最全的Eslint配置模板，今後統一團隊的編程習慣

隨着項目的不斷增長，急切須要統一每一個項目的代碼規範，將一些低級錯誤在萌芽狀態下掐死。因此特此結合當前項目使用的一些規範，再根據社區推薦的規範，整合成這個repo。裏面集成了React和Nodejs的編程規範，全部的規範都是基於airbnb，裏面細分了js版本和ts版本，知足你們的編程需求。

另外其餘框架的代碼規範沒有實際項目經驗，因此沒能集齊全部」龍珠「，所以在此歡迎你們貢獻出平時使用的標準編碼規範(儘可能是基於airbnb的)，共享給社區其餘童鞋。

Eslint生態依賴包介紹

在說明Eslint配置以前，咱們先來掌握Eslint配置的生態圈中涉及到的一些依賴包的做用，這樣咱們方能夠知其因此然。

最基礎

1. eslint: lint代碼的主要工具，因此的一切都是基於此包

解析器(parser)

1. babel-eslint: 該依賴包容許你使用一些實驗特性的時候，依然可以用上Eslint語法檢查。反過來講，當你代碼並無用到Eslint不支持的實驗特性的時候是不須要安裝此依賴包的。

2. @typescript-eslint/parser: Typescript語法的解析器，相似於babel-eslint解析器同樣。對應parserOptions的配置參考官方的README。

擴展的配置

1. eslint-config-airbnb: 該包提供了全部的Airbnb的ESLint配置，做爲一種擴展的共享配置，你是能夠修改覆蓋掉某些不須要的配置的，該工具包包含了react的相關Eslint規則(eslint-plugin-react與eslint-plugin-jsx-a11y)，因此安裝此依賴包的時候還須要安裝剛纔說起的兩個插件

2. eslint-config-airbnb-base: 與上一個包的區別是，此依賴包不包含react的規則，通常用於服務端檢查。

3. eslint-config-jest-enzyme: jest和enzyme專用的校驗規則，保證一些斷言語法可讓Eslint識別而不會發出警告。

4. eslint-config-prettier: 將會禁用掉全部那些非必須或者和prettier衝突的規則。這讓您可使用您最喜歡的shareable配置，而不讓它的風格選擇在使用Prettier時礙事。請注意該配置只是將規則off掉,因此它只有在和別的配置一塊兒使用的時候纔有意義。

插件

1. eslint-plugin-babel: 和babel-eslint一塊兒用的一款插件.babel-eslint在將eslint應用於Babel方面作得很好，可是它不能更改內置規則來支持實驗性特性。eslint-plugin-babel從新實現了有問題的規則，所以就不會誤報一些錯誤信息

2. eslint-plugin-import: 該插件想要支持對ES2015+ (ES6+) import/export語法的校驗, 並防止一些文件路徑拼錯或者是導入名稱錯誤的狀況

3. eslint-plugin-jsx-a11y: 該依賴包專一於檢查JSX元素的可訪問性。

4. eslint-import-resolver-webpack: 能夠藉助webpack的配置來輔助eslint解析，最有用的就是alias，從而避免unresolved的錯誤

5. eslint-import-resolver-typescript：和eslint-import-resolver-webpack相似，主要是爲了解決alias的問題

6. eslint-plugin-react: React專用的校驗規則插件.

7. eslint-plugin-jest: Jest專用的Eslint規則校驗插件.

8. eslint-plugin-prettier: 該插件輔助Eslint能夠平滑地與Prettier一塊兒協做，並將Prettier的解析做爲Eslint的一部分，在最後的輸出能夠給出修改意見。這樣當Prettier格式化代碼的時候，依然可以遵循咱們的Eslint規則。若是你禁用掉了全部和代碼格式化相關的Eslint規則的話，該插件能夠更好得工做。因此你可使用eslint-config-prettier禁用掉全部的格式化相關的規則(若是其餘有效的Eslint規則與prettier在代碼如何格式化的問題上不一致的時候，報錯是在所不免的了)

9. @typescript-eslint/eslint-plugin：Typescript輔助Eslint的插件。

10. eslint-plugin-promise：promise規範寫法檢查插件，附帶了一些校驗規則。

輔助優化流程

1. husky: git命令hook專用配置.

2. lint-staged: 能夠定製在特定的git階段執行特定的命令。

Prettier

Prettier相關的包有好多個，除了上面列舉的兩個，你可能還會用到下面的三個：

1. prettier：原始實現版本，定義了prettier規則並實現這些規則。支持的規則參考：傳送門

2. prettier-eslint：輸入代碼，執行prettier後再eslint --fix輸出格式化後的代碼。僅支持字符串輸入。

3. prettier-eslint-cli：顧名思義，支持CLI命令執行prettier-eslint的操做

那麼Prettier這麼多工具包，都是些什麼關係呢？太容易讓人混淆了。這裏用一段話簡單介紹一下：

最基礎的是prettier，而後你須要用eslint-config-prettier去禁用掉全部和prettier衝突的規則，這樣纔可使用eslint-plugin-prettier去以符合eslint規則的方式格式化代碼並提示對應的修改建議。爲了讓prettier和eslint結合起來，因此就誕生了prettier-eslint這個工具，可是它只支持輸入代碼字符串，不支持讀取文件，所以又有了prettier-eslint-cli

這就是5個工具包互相之間的關係。加上prettier以後的提示可讀性高一點，以下圖：

Eslint配置文件

1. env: 預約義那些環境須要用到的全局變量，可用的參數是：es6、broswer、node等。

   es6會使能全部的ECMAScript6的特性除了模塊(這個功能在設置ecmaVersion版本爲6的時候會自動設置)

   browser會添加全部的瀏覽器變量好比Windows

   node會添加全部的全局變量好比global

   更多環境配置參考Specifying Environments

2. extends: 指定擴展的配置，配置支持遞歸擴展，支持規則的覆蓋和聚合。

3. plugins: 配置那些咱們想要Linting規則的插件。

4. parser: 默認ESlint使用Espree做爲解析器，可是一旦咱們使用babel的話，咱們須要用babel-eslint。

5. parserOptions: 當咱們將默認的解析器從Espree改成babel-eslint的時候，咱們須要指定parseOptions，這個是必須的。

   ecmaVersion: 默認值是5，能夠設置爲三、五、六、七、八、九、10，用來指定使用哪個ECMAScript版本的語法。也能夠設置基於年份的JS標準，好比2015(ECMA 6)

   sourceType: 若是你的代碼是ECMAScript 模塊寫的，該字段配置爲module，不然爲script(默認值)

   ecmaFeatures：該對象指示你想使用的額外的語言特性

   globalReturn：容許全局範圍內的`return`語句
   
    impliedStrict：使能全局`strict`模式
   
    jsx：使能JSX
   複製代碼

6. rules: 自定義規則，能夠覆蓋掉extends的配置。

7. settings：該字段定義的數據能夠在全部的插件中共享。這樣每條規則執行的時候均可以訪問這裏面定義的數據

更多配置選項參考官方文檔Eslint

Eslint配置文件解析

介紹了這麼多，咱們以模板提供的一個配置例子eslint-react-js來講(說明都寫在註釋裏了~)：

module.exports =  {
  parser:  'babel-eslint',  // Specifies the ESLint parser
  parserOptions: {
    ecmaVersion: 2015, // specify the version of ECMAScript syntax you want to use: 2015 => (ES6)
    sourceType:  'module',  // Allows for the use of imports
    ecmaFeatures: {
      jsx: true, // enable JSX
      impliedStrict: true // enable global strict mode
    }
  },
  extends:  [
    'airbnb',  // Uses airbnb, it including the react rule(eslint-plugin-react/eslint-plugin-jsx-a11y)
    'plugin:promise/recommended',
    // 'prettier', // Use prettier, it can disable all rules which conflict with prettier
    // 'prettier/react' // Use prettier/react to pretty react syntax
  ],
  settings: {
    'import/resolver': { // This config is used by eslint-import-resolver-webpack
      webpack: {
        config: './webpack/webpack-common-config.js'
      }
    },
  },
  env: {
    browser: true // enable all browser global variables
  },
  'plugins': ['react-hooks', 'promise'], // ['prettier', 'react-hooks']
  rules:  {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    // e.g. '@typescript-eslint/explicit-function-return-type': 'off',
    "react-hooks/rules-of-hooks": "error",
    "semi": ["error", "never"],
    "react/jsx-one-expression-per-line": 0,
    /** * @description rules of eslint-plugin-prettier */
    // 'prettier/prettier': [
    // 'error', {
    // 'singleQuote': true,
    // 'semi': false
    // }
    // ]
  },
};
複製代碼

由於咱們在代碼的保存以及提交階段都會進行prettier的格式化，因此在Eslint中禁用掉了全部跟prettier的配置，若是你須要的話，能夠從新enable掉。

下面對比一下打開prettier和沒有打開prettier的區別：

和

Prettier影響的規則

上面prettier介紹了那麼多，那麼這小節簡單介紹如下prettier的一些重要的的規則：

1. printWidth: 確保你的代碼每行的長度不會超過100個字符
2. singleQuote: 轉換全部的雙引號爲單引號
3. trailingComma: 確保對象的最後一個屬性後會有一個逗號
4. bracketSpacing: 自動爲對象字面量之間添加空格，好比：{ foo: bar }
5. jsxBracketSameLine: 在多行JSX元素的最後一行追加 >
6. tabWidth：指定tab的寬度是幾個空格
7. semi: 是否在每行聲明代碼以後都要添加;

更多規則請參考：Options

讓優美的代碼深刻到骨髓裏~

保存代碼的時候自動格式化(Vscode版本)

1. 安裝Eslint插件

2. Vscode配置：

   2.1. editor.formatOnSave置爲false，以防默認的文件格式化配置和Eslint和Prettier衝突

   2.2. eslint.autoFixOnSave置爲true，這樣當咱們每次保存文件的時候就能夠自動fix文件的錯誤格式。

   以下圖：

   

   

Lint-staged

Lint-staged幫助你在暫存文件的時候可以讓錯誤格式代碼不會提交到你分支。

爲何使用Lint-staged?

由於提交代碼前的檢查是最後一個管控代碼質量的一個環節，因此在提交代碼以前進行lint檢查意義重大。這樣能夠確保沒有錯誤的語法和代碼樣式被提交到倉庫上。可是在整個項目上執行Lint進程會很低效，因此最好的作法就是檢查那個被改動的文件。而Lint-staged就是作這個的。

根據上面咱們提供的生態圈依賴包，在package.json中配置該字段：

"lint-staged": {
  "**/*.{tsx,ts}": [ // 這裏的文件後綴能夠修改爲本身須要的文件後綴
    "prettier-eslint --write",
    "git add"
  ]
}
複製代碼

與Husky結合使用

爲了讓lint-staged能夠在change被staged以前執行，咱們這時候須要藉助git的鉤子功能，而提供鉤子功能的社區解決方案就是husky，該工具提供了git在多個階段前執行的操做，好比咱們此次要在預提交的時候進行Lint檢查，配置以下：

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}
複製代碼

這樣每次commit的時候會執行lint操做，如以前所說，prettier-eslint-cli會將代碼prettier一遍後再eslint --fix，若是沒有錯誤，那麼就會直接執行git add，不然報錯退出。

EditorConfig

由於並非全部的人都使用VS code，因此爲了在一樣的項目下保持一致，好比tab的寬度或者行尾要不要有分號，咱們可使用.editorconfig來統一這些配置。

支持EditorConfig的編輯器列表請走這裏。

下面是模板配置裏面推薦的editorconfig的配置

# EditorConfig is awesome: http://EditorConfig.org
 # top-most EditorConfig file
root = true

[*.md]
trim_trailing_whitespace = false

[*.js]
trim_trailing_whitespace = true
 # Unix-style newlines with a newline ending every file
[*]
indent_style = space
indent_size = 2
# 保證在任何操做系統上都有統一的行尾結束字符
end_of_line = lf
charset = utf-8
insert_final_newline = true
max_line_length = 100
複製代碼

最後

至此Eslint的全解析就完美落幕了，最後再安利一波eslint-config-templates，也歡迎你們PR。

參考

1. These tools will help you write clean code
2. Prettier
3. Eslint