react项目eslint配置

1、首先检查是是否装了 eslint和babel-eslint

全局安装：
npm install eslint babel-eslint -g

当前项目安装：
npm install eslint babel-eslint -D

2、创建配置文件.eslintrc.js

npx是执行Node软件包的工具，它从 npm5.2版本开始，就与npm捆绑在一起。
npx的作用如下：

默认情况下，首先检查路径中是否存在要执行的包（即在项目中）；
如果存在，它将执行；
若不存在，意味着尚未安装该软件包，npx将安装其最新版本，然后执行它；
npx eslint --init

选好上面的配置项之后，下面会叫你安装这些插件：
（如果默认安装不成功，建议使用cnpm安装，安装在devDependencies中）
cnpm install -D eslint-plugin-react@^7.20.0 eslint-config-airbnb@latest eslint@^7.2.0 eslint-plugin-import@^2.21.2 eslint-plugin-jsx-a11y@^6.3.0 eslint-plugin-react-hooks@^4

注意：因为我们重新安装的插件在devDependencies中，可能dependencies中会有重复的插件，可以去掉dependencies中对应的插件。
可以把node_modules包整体删掉再装，或者是运行命令逐个删掉------------（这个可以不急着弄，等文件规则校验都改好了之后再弄也行）

Airbnb编码规范资料参考：
https://github.com/BingKui/javascript-zh

3、修改.eslintrc.js配置

eslint详细配置解析参考： .eslintrc.js 配置解析_ecmafeatures_Amars_丁的博客-优快云博客

module.exports =  {
  "root": true,
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "node": true,
    "es6": true
    // "worker": true
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": [
    "babel",
    "react"
  ],
  "extends": "airbnb",
  "rules": {
    "no-underscore-dangle": "off",
    "arrow-parens": "off",
    "react/jsx-fragments": "off",
    "react/jsx-props-no-spreading": "off",
    "react/state-in-constructor": "off",
    "react/no-unused-state": 1,
    "no-use-before-define": 1,
    "class-methods-use-this": "off",
    "consistent-return": "off",
    "global-require": "off",
    "import/extensions": "off",
    "import/no-duplicates": "off",
    "import/no-dynamic-require": "off",
    "import/no-extraneous-dependencies": "off",
    "import/no-named-as-default": "off",
    "import/no-named-as-default-member": "off",
    "import/no-unresolved": "off",
    "jsx-a11y/anchor-has-content": "off",
    "jsx-a11y/anchor-is-valid": [
      "warn",
      {
        "aspects": [
          "invalidHref"
        ]
      }
    ],
    "jsx-a11y/click-events-have-key-events": "off",
    "jsx-a11y/href-no-hash": "off",
    "jsx-a11y/interactive-supports-focus": "off",
    "jsx-a11y/label-has-associated-control": "off",
    "jsx-a11y/label-has-for": "off",
    "jsx-a11y/no-noninteractive-element-interactions": "off",
    "jsx-a11y/no-static-element-interactions": "off",
    "linebreak-style": "off",
    "max-len": "off",
    "no-console": "error",
    "no-control-regex": "off",
    "no-debugger": "error",
    "no-else-return": "off",
    "no-param-reassign": "off",
    "no-trailing-spaces": "off",
    "no-unused-vars": "warn",
    "object-curly-newline": "off",
    "react/destructuring-assignment": "off",
    "react/forbid-prop-types": "off",
    "react/jsx-filename-extension": "off",
    "react/static-property-placement": "off",
    "react/jsx-no-bind": "off",
    // [
    //   "error",
    //   {
    //     "ignoreRefs": true,
    //     "allowArrowFunctions": true,
    //     "allowBind": true
    //   }
    // ],
    "react/jsx-one-expression-per-line": "off",
    "react/no-unused-prop-types": "off",
    "react/prefer-stateless-function": [
      "off",
      {
        "ignorePureComponents": true
      }
    ],
    "react/prop-types": "off",
    "react/require-default-props": "off",
    "react/sort-comp": "off",
    "indent": [
      "warn",
      2,
      {
        "ignoredNodes": [
          "TemplateLiteral"
        ]
      }
    ],
    "template-curly-spacing": "off"
  },
  "globals": {
    "Choerodon": true
  }
}

4、vscode编辑器开启eslint插件校验

5、在package.json中添加自动修复命令

“fix”: “eslint --fix src”

npm run fix 

6、vscode本地settings里eslint相关配置

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }, // 使用eslint进行格式化
  "editor.formatOnSave": true,
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue"
    ]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    "typescript",
    "typescriptreact"
  ],