Vue提高篇六： 使用Vetur+ESLint+Prettier插件提升开发效率

系列文章目录

Vue基础篇一：编写第一个Vue程序
Vue基础篇二：Vue组件的核心概念
Vue基础篇三：Vue的计算属性与侦听器
Vue基础篇四：Vue的生命周期（秒杀案例实战）
Vue基础篇五：Vue的指令
Vue基础篇六：Vue使用JSX进行动态渲染
Vue提高篇一：使用Vuex进行状态管理
Vue提高篇二：使用vue-router实现静态路由
Vue提高篇三：使用vue-router实现动态路由
Vue提高篇四：使用Element UI组件库
Vue提高篇五：使用Jest进行单元测试
Vue提高篇六： 使用Vetur+ESLint+Prettier插件提升开发效率

文章目录

---

一、背景

• 用VSCode开发Vue项目几乎已经是前端的标配了。本文将介绍VsCode三个必备的插件，通过这些插件可以瞬间提升前端程序员的开发效率。

二、Vetur

• Vetur支持vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本。
• Vetur 除了支持vue文件的语法和模板外，还能实现Lint检查，格式化等功能。

三、ESLint

• ESLint 是实现代码风格检测的必备工具，它能有效对Vue前端项目实现代码规范与错误检查。

四、Prettier

• Prettier的中文意思是“漂亮的、机灵的”，是一个流行的代码格式化工具，它能够解析代码，根据你自己设定的规则格式化代码。

五、配置实战

• 以下是通过 Vue CLI 生成的项目进行Vetur+ESLint+Prettier的配置：
• 打开VsCode->首选项->设置，搜索Vetur



• 打开并配置settings.json文件

{
  // 指定格式的代码文件由eslint进行代码检查
 "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "jsx",
        "vue"
    ],
  // 指定 *.vue 文件的格式化工具为vetur
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
   // vetur格式化配置
  "vetur.format.options.tabSize": 2,
  "vetur.format.options.useTabs": true,
  "vetur.format.defaultFormatterOptions": {
        "prettier": {
           // 禁止随时添加逗号
           "trailingComma": "none"
         }
    },
  // 使用prettier格式化html与js  
  "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
 
}

• 可配置vue-cli项目的eslintrc.json文件，实现代码检查与规范

{
    "root": true,
    "env": {
        "node": true
    },
    "extends": [
        // vue项目推荐代码规范插件
        "plugin:vue/recommended",
        "@vue/eslint-config-prettier"
    ],
    "rules": {
        "vue/require-default-prop": "off",
        "no-console": "off",
        "vue/v-bind-style": "off",
        "vue/v-on-style": "off",
        "no-unused-vars": "off",
        "vue/no-v-html": "off"
    },
    "parserOptions": {
        "parser": "babel-eslint"
    },
    "globals": {
        "location": true,
        "document": true,
        "window": true,
        "GLOBAL": true
    }
}

• 以下是Prettier的格式化选项，可以根据项目需要进行配置

/*  prettier的配置 */
    "prettier.printWidth": 100, // 超过最大值换行
    "prettier.tabWidth": 2, // 缩进字节数
    "prettier.useTabs": true, // 缩进使用tab
    "prettier.semi": true, // 句尾添加分号
    "prettier.singleQuote": true, // 使用单引号代替双引号
    "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
    "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
    "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
    "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
    "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
    "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
    "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
    "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
    "prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验