create-react-app 自定义 eslint 配置

使用eslint和editorconfig规范代码

为何要用这些：

• 代码规范有利于团队协做
• 纯手工规范耗时耗力并且不能保证准确性
• 能配合编辑器自动提醒错误，提升开发效率

eslint

• 随着ECMAScript版本一直更新的Js lint工具，插件丰富，而且可以套用规范，规则很是丰富，可以知足大部分团队的需求。

eslint 配合 git

• 为了最大程度控制每一个人的规范，咱们能够在git commit代码的时候，使用git hook调用eslint进行代码规范验证，不规范的代码没法提交到仓库。

editorconfig

• 不一样编辑器对文本的格式会有必定的区别，若是不统一一些规范，可能你和别人合做的时候每次更新下来别人的代码就会出一大堆错误-webstorm自动支持editorconfig配置文件。

首先安装eslintnpm i eslint 由于create-react-app默认已经安装了

"babel-eslint": "7.2.3",
    "eslint": "4.10.0",
    "eslint-config-react-app": "^2.1.0",
    "eslint-loader": "1.9.0",
    "eslint-plugin-flowtype": "2.39.1",
    "eslint-plugin-import": "2.8.0",
    "eslint-plugin-jsx-a11y": "5.1.1",
    "eslint-plugin-react": "7.4.0",

咱们针对咱们想要的自定义配置，咱们再安装以下

npm i babel-eslint \
\ eslint-config-airbnb eslint-config-standard \
\ eslint-loader \
\ eslint-plugin-import \
\ eslint-plugin-jsx-a11y \
\ eslint-plugin-node \
\ eslint-plugin-promise \
\ eslint-plugin-react \
\ eslint-plugin-standard -D

咱们在根目录下新建 .eslintrc 文件针对整个项目作一个标准的规范

{
  "extends": "standard"
}

主要项目是前端工程，因此咱们在前端文件夹下新建 .eslintrc 文件，在这里去规范客户端代码，客户端代码使用 jsx，不少规则和 nodejs 是不一样的，在这里使用更加严格的规范来要求客户端代码。

配置的value对应的值： 0 : off 1 : warning 2 : error

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "extends": "airbnb",
  "rules": {
    "semi": [0],
    "react/jsx-filename-extension": [0],
    "jsx-a11y/anchor-is-valid": [0]
  }
}

使用 babel-eslint 去解析代码，定义环境是浏览器和es6，会包含公共变量，webpack因此须要node一些环境变量，parserOptions定义版本，jsmodule模式方法书写。

由于须要在每次编译以前都要去检查一下代码，因此还须要配置 webpack,这是create-react-app默认的

{
        test: /\.(js|jsx|mjs)$/,
        enforce: 'pre',
        use: [
          {
            options: {
              formatter: eslintFormatter,
              eslintPath: require.resolve('eslint'),
              
            },
            loader: require.resolve('eslint-loader'),
          },
        ],
        include: paths.appSrc,
      },

咱们但愿屏蔽掉 node_modules 文件夹下的代码

exclude:[path.resolve(__dirname, '../node_modules')]

在项目根目录下新建文件 .editorconfig webstom默认就有配置

• root = true 项目根目录
• [*] 全部文件都应用这个规则
• charset = utf-8 编码模式
• indent_style = space 使用 tab 的样式制表符和 space
• indent_size = 2
• end_of_line = lf 行尾结尾方式
• insert_final_newline = true 自动保存行尾最后一行是空行
• trim_trailing_whitespace = true 一行结束后面的空格自动去掉

eslint 不检测这行代码 // eslint-disable-line
eslint 不检测这个文件，在开头 /* eslint-disable */在文件结尾 /* eslint-enable */

安装 npm i husky -D

而后在 package.json scripts中增长git 钩子,会在执行git commit以前会调用这个命令

"lint": "eslint --ext .js --ext .jsx src/",
"precommit": "npm run lint"

git commit 强制执行 eslint 经过的代码