react脚手架 webpack 如何配置Eslint

Eslint

中文的官网有明确的配置步骤 https://cn.eslint.org/docs/user-guide/getting-started

下面为react脚手架下如何配置 eslint；

1. 找到自己项目下得webpack的配置项目，在文件里找到如下图位置
   

2. 注意在module属性下的rules下修改如下对象配置
   

3. 在根目录下 添加 .eslintrc文件，文件添加自己的代码规则，举例如下：

{
  "root": true,       //根配置，每一个文件夹都可以配置eslintrc文件，依次向外找该文件，找到 "root": true,  则停止，我再最外层只配置了一个eslintrc文件，则所有的文件只依赖这一个文件的规则
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "no-multi-spaces": 2,   //2代表error  运行报错，必须处理
    "no-debugger": 1,		//1代表警告， 可忽略； 0 代表屏蔽该规则
    "eol-last": [     //写成中括号 可配置其他参数，具体参数可参考官网
      2,
      "never"
    ],
   ... 巴拉巴拉
    "indent": [2, 2],          //举例缩进： 第一个2代表 运行错误， 第二个2 代表缩进2格   

  }
}

4. 其次配置忽略文件， .eslintignore文件， 我的配置如下图

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
serviceWorker.js
webpack.config.dev.js
webpack.config.prod.js

.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

5. 再package.json文件下可自定义命令行
   

输入eslintFix 则可检验规则 --fix则可以自动修复错误项目，注意–fix只可以修复可修复项目，可修复的配置项在官网前会有扳手图标，如下图

好了 就到这里，码字好累，欢迎指正建议。