2.3 vscode 保存时自动修复eslint报错的配置

2.3.1 安装ESLint插件

2.3.2 在.vscode中setting.json中开启代码保存自动修复eslint告警功能

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
2.3.3 安装 eslint npm包
VSCode ESLint扩展会先从工作目录下的node_modules中查找eslint工具包，如果找不到，会全局查找，所以有多个项目的话，建议全局安装，这样只需安装一次eslint工具包
# 命令行使用时全局安装
npm install -g eslint 
其它需要安装的npm包参见package.json文件
  "name": "eslint-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {},
  "author": "tank",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-proposal-decorators": "^7.7.0",
    "@babel/polyfill": "^7.8.7",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-import": "^1.12.0",
    "eslint": "^7.12.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-prettier": "^4.1.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-compat": "^2.6.3",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-markdown": "^1.0.0",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-standard": "^4.0.1"
  "dependencies": {}
2.3.4 在项目下添加.eslintrc.js文件,内容如下：
#生成eslint配置文件
eslint --init
module.exports = {
  root:true,
  parser: 'babel-eslint',
  parserOptions: {
    // 想使用的额外的语言特性
    ecmaFeatures: {
      legacyDecorators: true, // 装饰器
  // 添加共享设置, 在共享设置中设置的对象能被任一即将执行的规则获取到，所以这在开发自定义规则插件而言很重要
  settings: {
    polyfills: ['fetch', 'promises', 'url', 'object-assign'],
  // extends 属性值可以省略包名的前缀 eslint-config-
  // 你可能想要将你的配置信息分享给其他项目或人。可分享的配置允许你在 npm 发布你的配置设置并且其他人可以在他的 ESLint 项目中下载使用这些配置。
  // 可共享的配置 是一个 npm 包，它输出一个配置对象。
  extends: ['airbnb','prettier', 'plugin:compat/recommended'],
  // 插件一般是输出规则,一些插件也可以输出一个或多个命名的 配置
  plugins: ['react'],
  // 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
  env: {
    browser: true,
    node: true,
    es6: true,
    mocha: true,
    jest: true,
    jasmine: true,
  globals: {
    localStorage: true,
    sessionStorage: true,
    WeixinJSBridge: true,
    screen: true,
    wx: true,
    qq: true,
    alert: true,
    Image: true,
    File: true,
    FormData: true,
    IntersectionObserver: true,
    fiboSDK: true,
  rules: {  // 规则集，会覆盖extends中的规则，多用于关闭不符合项目使用场景的规则//  不检验函数入参是否被使用
    'no-unused-vars': ['warn', { args: 'none' }],
2.3.5 如果想在代码编译的时候，提示eslint错误，你需要在webpack.config.js中添加
module: {
    rules: [{
        test: /\.(js|jsx)$/,
        exclude: [/node_modules/],
        use: {
            loader: 'babel-loader',
            options: {
                sourceMap: true,
                plugins: [
                    "add-module-exports",
                    ['import', { libraryName: "antd", style: 'css' }]
        test: /\.(js|jsx)$/,
        use: ['eslint-loader'],
        exclude: [/node_modules/],
        enforce: 'pre'
2.3.6 最终的提示效果，有些代码风格类的问题(比如参数之间是否加空格), eslint可以修复，有些则不能(如for循环循环方向必须是自增)，而所有的代码质量类问题(如变量定义了未使用)
，都需要手动修复。
3. 避坑指南
1.安装了VSCode ESlint扩展，在.vscode的setting.json中配置了ESLint保存自动修复，也安装了ESLint相关node_modules依赖，也配置了.eslintrc.js和.eslintignore，但保存代码时ESLint没有错误提示，也没有自动修复错误，打开VSCode 命令窗口的输出面板一看，原来是
.eslintrc校验规则集Airbnb有一个规则不被支持，"ignoreDOMComponents" 选项在 eslint-plugin-react v7.11.0+以上才被支持，而我安装的 eslint-plugin-react 版本是v7.5.0
如果你发现按照本文的步骤，编写违反eslint校验规则的代码时没有eslint提示，那你首先要看看控制台有没有报错。
2.prettier 格式化报错  'No files matching the pattern were found' when using prettier
[1] 详解VSCode 格式化不符合预期的问题
[2] 一款超人气代码格式化工具prettier
[3] prettier配置项官方文档
[4] eslint中文文档  
[5] react 使用 eslint 的三种代码检查方案
[6] eslint官方配置文档
[7] 你真的了解babel-loader，eslint-loader，.eslintrc吗
[8] ESlint 配置从0到1 (二)
[9] ESLint 工作原理探讨
[10]前端代码质量进阶：自定义 eslint 规则校验业务逻辑
[11] eslint 注释规则