react配置eslint+airbnb+Prettier

近日接手了一個項目，格式混亂不堪，由於要多人開發，想配置下校驗規則和自動格式化。

前言

• 項目是用 create-react-app 建立的項目。
• 校驗使用ESLint，規則是react-app和airbnb和Prettier
• 格式化是用Prettier
• 開發環境是VSCode

安裝VSCode插件: ESLint和Prettier

插件的做用就是輔助開發工具VSCode，不然就只能經過命令行去運行ESLint進行校驗，經過命令行運行Prettier進行格式化。

ESLint插件可讓VSCode根據規則顯示你的錯誤。

Prettier插件可讓VSCode以Prettier的格式格式化代碼。

須要手動操做格式化，或者配置保存自動格式化，格式化插件有多個的話，須要配置默認格式化插件

安裝依賴

eslint

create-react-app項目已經安裝過ESLint了，無需再次安裝

eslint-config-react-app

同上

eslint-config-airbnb

yarn add --dev eslint-config-airbnb
複製代碼

eslint-config-prettier

yarn add --dev eslint-config-prettier
複製代碼

eslint-plugin-prettier

yarn add --dev eslint-plugin-prettier
複製代碼

prettier

yarn add prettier --dev --exact
複製代碼

ESLint 校驗配置

項目下建立 .eslintrc.js 文件

module.exports = {
  extends: [
    'react-app', //  react幫配置好了一些語法，譬如箭頭函數
    'airbnb',
    'plugin:prettier/recommended', // prettier配置
  ],
  rules: {
    'react/jsx-filename-extension': 'off', // 關閉airbnb對於jsx必須寫在jsx文件中的設置
    'react/prop-types': 'off', // 關閉airbnb對於必須添加prop-types的校驗
    'react/destructuring-assignment': [
      true,
      'always',
      {
        ignoreClassFields: false,
      },
    ],
    'react/jsx-one-expression-per-line': 'off', // 關閉要求一個表達式必須換行的要求，和Prettier衝突了
    'react/jsx-wrap-multilines': {
      "prop": "ignore", // 關閉要求jsx屬性中寫jsx必需要加括號，和Prettier衝突了
    },
    'comma-dangle': [
      'error',
      {
        arrays: 'always-multiline',
        objects: 'always-multiline',
        imports: 'always-multiline',
        exports: 'always-multiline',
        functions: 'only-multiline', // 關閉airbnb對函數調用參數，非一行，最後也要加逗號的限制
      },
    ],
    'jsx-a11y/no-static-element-interactions': 'off', // 關閉非交互元素加事件必須加 role
    'jsx-a11y/click-events-have-key-events': 'off', // 關閉click事件要求有對應鍵盤事件
    'no-bitwise': 'off', // 不讓用位操做符，不知道爲啥，先關掉
  },
  overrides: [
    {
      files: ['**/Mi/*.js', '**/Mi/*.jsx'],
      rules: {
        'react/prop-types': 'error', // Mi 文件夾下的是系統組件，必須寫prop-types
      },
    },
  ],
};

複製代碼

Prettier 格式化配置

項目下建立 .prettierrc.json 文件，這個文件有兩個重要做用：

1. 配置了eslint的校驗規則，eslint進行校驗時候會引用這個規則
2. 同時也是格式化的規則，你去格式化文件時候會引用這個規則

注意：這個文件的改動常常不當即生效，重啓VSCode就生效了

{
  "trailingComma": "es5",
  "singleQuote": true
}

複製代碼

由於上面提到的兩點，因此必須有所改動，譬如Prettier格式化，默認是沒有尾逗號的，可是airbnb會報錯，因此改一下trailingComma爲es5，表示在es5環境容許的狀況下就加逗號。

安裝配置結束

能夠happy coding了。。。 可是能夠繼續拓展，例如配置保存時候自動格式化，配置git提交時候自動格式化，配置git提交時候自動校驗等。

附

eslint配置項extends理解

eslint 提供了幾百？千？個規則，可是通常都是默認關閉的，這也是eslint做者的思想：我給你提供規則，可是我不表態好很差，你本身配。 因此extends裏就是各家制定的規則，後面的會覆蓋前面的。

"extends": [
    "react-app", //  react幫配置好了一些語法，譬如箭頭函數
    "airbnb",
    "plugin:prettier/recommended" // prettier配置
  ]
複製代碼

譬如我用了這三個規則，優先級就是prettier > airbnb > react-app，若是有一樣的配置，放在extends後面的規則會覆蓋前面的。

• react-app規則
• airbnb規則
• airbn-base規則,會被airbnb規則引用
• prettier規則

Prettier的思想

Prettier就是幫你配了一套格式化規則，提供極少數的可配置項，用就是了。反正目的是統一團隊風格，好很差我無論，原本就是個主觀問題。若是提供過多配置項，就會發展成爭論怎麼配置Prettier是個好配置？進入另外一個糾紛。

plugin:prettier/recommended實際上是個簡寫

官方文檔 意思就是這個配置至關於同時配了

"extends": ["prettier"]
複製代碼

和

"plugins": ["prettier"],
"rules": {
    "prettier/prettier": "error"
}
複製代碼

關於規則優先級

官方文檔都有詳解，這裏講兩點：

1. 配置文件會覆蓋package.json中的配置
2. 默認都會向上繼續查找配置直到全局，配置文件若是配置root的話，將不會向上查找，若是不想項目和我的衝突，能夠配一下（例如項目統一縮進是2個空格，我的是4個空格）