ESLint | wepack+vue+vscode的一站式ESLint配置

最近用webpack4 ( 非vue-cli ) 搭建了一个vue项目，因为要和多人协作完成，所以配置了eslint。因为网上的教程都有点过时了，让我踩了坑，这里提供的是 2019/5/2 的最新配置方法，并且还提供了vscode 的 ESLint + Prettier + Vetur 扩展配置，以便于更好地支持eslint。

适用对象：webpack4 + vue2 以及 vscode使用者

webpack 配置

安装依赖

总依赖列表, 你可以复制进package.json, 然后用 npm install 安装。

devDependencies:{
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-html": "^5.0.3",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-promise": "^4.1.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^5.2.2",
}

package.json 配置

为了添加一个 lint 命令，用来检测语法错误，npm run lint 就可以使用。

"scripts": {
    "build": "webpack --mode=production --config build/webpack.base.conf.js",
    "dev": "NODE_ENV=development webpack-dev-server --config build/webpack.base.conf.js",
    "lint": "eslint --ext .js,.vue src" // 添加这一行
  },

webpack.config.js 配置

对js文件和vue文件启用eslint检查，由于enforce是 'pre' ，所以它会在编译前检查。
注意： resolve('src') 的resolve函数需要自己定义，其实就是根目录下的src文件。

rules:[
  ···
  {
    test: /\.(js|vue)$/,
    use: {
      loader: 'eslint-loader',
      options: {
        formatter: require('eslint-friendly-formatter') // 默认的错误提示方式
      }
    },
    enforce: 'pre', // 编译前检查
    include: [resolve('src')]
  },
]

.eslintrc.js 配置

这是eslint的主要配置文件，之前我踩的坑也是因为这里的配置经常出错。当然，在未来可能我这个配置也会过时，推荐大家多查看下官方文档：https://vuejs.github.io/eslint-plugin-vue/user-guide/#usage

可以将下面对内容完整复制进根目录下创建的 .eslintrc.js 文件。

module.exports = {
  root: true,
  env: {
    browser: true
  },
  extends: ['standard', 'plugin:vue/recommended'], 
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  plugins: ['vue', 'html'],
  // 对vue文件取消了缩进检查
  overrides: [
    {
      files: ['*.vue'],
      rules: {
        indent: 'off'
      }
    }
  ],
  rules: {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'no-irregular-whitespace': [
      'error',
      {
        skipComments: true,
        skipTemplates: true
      }
    ],
    'no-unused-vars': ['warn']
  }
}

.eslintignore 配置

该文件主要是让eslint忽略这些文件夹下的语法检查，可以是dist目录下，build 目录下的js文件。

同样，可以将下面对内容完整复制进根目录下创建的 .eslintignore 文件。

build/*.js
dist/*.js
src/assets/js/*.js

.editorconfig

这是我个人推荐加的配置文件，如果你只需要eslint可以不加。用来告诉编辑器你的项目一些规则比如代码缩进。
同样，你可以复制然后放在根目录下创建的 .editorconfig 文件

root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

webpack的配置到此结束啦，下面介绍vscode的配置。

---

vscode

这里不废话直接放配置文件，先在扩展那里安装ESLint + Prettier + Vetur 这三个插件，然后按 ctrl+shift+t 打开 setting.json 就可以往里面贴配置啦。

{
  // tab 大小为2个空格
  "editor.tabSize": 2,
  // 100 列后换行
  "editor.wordWrapColumn": 100,
  // 保存时格式化
  "editor.formatOnSave": true,
  // prettier 设置强制单引号
  "prettier.singleQuote": true,
  // prettier 去分号
  "prettier.semi": false,
  // prettier 开启eslint规范
  "prettier.eslintIntegration": true,
  // prettier 在vue文件禁用
  "prettier.disableLanguages": ["vue"],
  // 设置 eslint 保存时自动修复
  "eslint.autoFixOnSave": true, // try
  // eslint 检测文件类型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // vetur 的自定义设置
  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false
    },
    "prettier": {
      "singleQuote": true,
      "proseWrap": "never",
      "printWidth": 100
    }
  },
  // 选择 vue 文件中 template 的格式化工具
  "vetur.format.defaultFormatter.html": "none",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  // 文件自动保存
  "files.autoSave": "afterDelay",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 括号前加空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true
}

创作不易，有需要帮助的留言，觉得有用的请点赞哦～