项目质量监测（二）06-Lint工具之ESLint——实战vue项目配置

项目质量监测（二）06-Lint工具之ESLint——实战vue项目配置

实战vue项目配置

ESlint配置文件：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    semi: ['error', 'never'],
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
}

需要安装的VSCode插件：

• vue(高亮语法)
• vetur(格式化，代码规范)
• Vue peek(组件跳转)
• vue beautify(vue格式化)
• Vue VSCode Snippets 和 Vue Snippets(代码提示)
• Prettier(格式化 与 上面的Vetur其实是合作格式化)

vscode配置格式化：

"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "html",
    "autoFix": true
  },
  {
    "language": "vue",
    "autoFix": true
  }
],
"vetur.format.defaultFormatter.js": "prettier-eslint",
  // prettier
"prettier.trailingComma": "es5",
"prettier.semi": false,   //句尾不要分号
"prettier.jsxSingleQuote": true,  //js使用单引号
"prettier.singleQuote": true,//全局使用单引号
"prettier.eslintIntegration": true,  //使用prettier-eslint格式化

配置emmet:

  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  },

在Vue-cli工具中，可以使用npm run lint:

// bash输出
➜ npm run lint

> vue-recipe@0.1.0 lint /Users/itheima/vue-demo
> vue-cli-service lint

 DONE  No lint errors found!

来执行vue cli配置好了的Lint脚本：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

vscode中插件推荐使用：

Vue, Vetur, Vue Peek, vue-beautify