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 經過的代碼