ESLint 簡介

ESLint是一個開源的JavaScript程式碼檢查工具，其作者是大名鼎鼎的“紅寶書”《JavaScript高階程式設計》作者 Nicholas C. Zakas。Nicholas C. Zakas 在他的多部著作中都有涉及到JavaScript的程式碼風格問題，而eslint正是用來統一JavaScript程式碼風格的工具。

程式碼檢查是一種靜態的分析，常用於尋找有問題的模式或者程式碼，並且不依賴於具體的編碼風格。對大多數程式語言來說都會有程式碼檢查，一般來說編譯程式會內建檢查工具。

JavaScript 是一個動態的弱型別語言，在開發中比較容易出錯。因為沒有編譯程式，為了尋找 JavaScript 程式碼錯誤通常需要在執行過程中不斷除錯。像 ESLint 這樣的可以讓程式設計師在編碼的過程中發現問題而不是在執行的過程中。

ESLint 的初衷是為了讓程式設計師可以建立自己的檢測規則。ESLint 的所有規則都被設計成可插入的。ESLint 的預設規則與其他的外掛並沒有什麼區別，規則本身和測試可以依賴於同樣的模式。為了便於人們使用，ESLint 內建了一些規則，當然，你可以在使用過程中自定義規則。

ESLint 使用 Node.js 編寫，這樣既可以有一個快速的執行環境的同時也便於安裝。

ESLint 哲學

所有都是可拔插的

• 內建規則和自定義規則共用一套規則 API
• 內建的格式化方法和自定義的格式化方法共用一套格式化 API
• 額外的規則和格式化方法能夠在執行時指定
• 規則和對應的格式化方法並不強制捆綁使用

每條規則:

• 各自獨立
• 可以開啟或關閉（沒有什麼可以被認為“太重要所以不能關閉”）
• 可以將結果設定成警告或者錯誤

另外:

• ESLint 並不推薦任何編碼風格，規則是自由的
• 所有內建規則都是泛化的

專案:

• 通過豐富文件減少溝通成本
• 儘可能的簡單透明
• 相信測試的重要性

先看一下程式碼優化效果

請點開圖片看大圖

使用 ESLint 帶來的好處

統一程式碼風格，減少review成本和低階錯誤的出現

eslint可以配置在開發環境中，幫助我們找出專案中不符合規則的程式碼並給出提示。在我們的開發環境中，開發者每次修改程式碼，都會先用eslint檢查程式碼，再進行babel和react的編譯，一旦eslint發現error級別的錯誤，那麼報錯檔案不會進行後續的編譯。這樣可以讓eslint隨時提醒開發者程式碼是否符合規範，從而減少了我們花費在review程式碼風格上的時間，降低了低階bug的出現。

支援ES6

同類型的程式碼檢查工具還有jslint和jshint，和它們相比，eslint對ES6語法支援更好，可以通過eslint在團隊內快速統一ES6的語法，精簡產品程式碼，提高開發效率。

豐富的外掛

eslint除了上面說的支援ES6語法之外，還支援各種外掛，可以讓我們新增自己需要的語法規則。比如專案引入了react，那麼最好使用eslint-plugin-jsx-a11y和eslint-plugin-react 這兩個外掛來檢查程式碼，使基於react的程式碼更符合規範。

配置並在專案中使用

• 新增 eslint 依賴。全域性或者僅在專案安裝 ESLint（二選一），並執行 eslint --init
  • 僅在專案安裝，執行 npm i eslint --save-dev，如果是開源專案，推薦這種方式。
  • 全域性安裝 npm i eslint -g
• 專案如果用的是 webpack，則加入對應的外掛 eslint-loader
• 在專案根目錄下建立配置檔案 .eslintrc.*，參考：Configuring ESLint（該文對如何配置寫得非常詳細）。

使用命令生成配置檔案 .eslintrc.yml

在 cmd 視窗，進入專案根目錄，執行 eslint --init。如果用 WebStorm 開啟的專案，直接在 Terminal 視窗執行命令即可（預設路徑就是專案根目錄）。

env:
  browser: true
  commonjs: true
  es6: true
extends: 'eslint:recommended'
parserOptions:
  ecmaFeatures:
    jsx: true
  ecmaVersion: 2018
  sourceType: module
plugins:
  - react
rules:
  # 縮排風格：這裡設定的是用4個空格縮排。
  # 至於要用幾個空格來縮排，需要根據團隊的編碼規範來。
  # 如果是研究別人的開源專案，建議根據開源專案的實際情況來設定。
  indent:
    - error
    - 4
  linebreak-style:
    - error
    - windows
  quotes:  # 引號：設定成雙引號
    - error
    - double
  semi:   # 分號：語句末尾需要有分號
    - error
    - always

這裡有一份配置檔案的詳細解說，點選前往。

實踐

WebStorm 提示 Error: No ESLint configuration found.

• 需要配合 ESLint 的配置檔案，如果不想配置，可以臨時在 WebStorm 中將 ESLint 禁用掉。Ctrl+Alt+s -> Languages & Frameworks -> Code Quality Tools -> ESLint -> Enable，將 Enable 前面的複選框設定為非勾選狀態。
• 參考上面，新增配置檔案。

ESLint 是否全域性安裝，決定 WebStorm 如何配置

• 如果 ESLint 是配置到 package.json，即僅專案下安裝，而不是全域性安裝，則 Configuration file，勾選 Automatic search 即可。
• 如果 ESLint 是全域性安裝，則要指定配置檔案，勾選 Configuration file: 並在其後指定配置檔案。
  image

eslint-plugin-react 依賴

在執行 eslint --init 初始化配置檔案的時候，如果選擇了要使用 react，則需要安裝依賴 eslint-plugin-react，否則會提示： Error: Failed to load plugin react: Cannot find module 'eslint-plugin-react'。

解決此類問題，最基本的原則是，缺什麼依賴，就安裝什麼依賴。只是要注意區分，是全域性安裝還是僅專案安裝。

eslint-plugin-react 是否全域性安裝，與 ESLint 是否全域性安裝相關：

• 如果 ESLint 是全域性安裝的，eslint-plugin-react 也要全域性安裝，安裝命令： cnpm install eslint-plugin-react -g。
• 同理，如果 ESLint 只是在專案下安裝，安裝命令： cnpm install eslint-plugin-react --save-dev。

關於 ESLint 與 eslint-plugin-react 的搭配安裝，官方文件是這樣描述的：If you installed ESLint globally, you have to install React plugin globally too. Otherwise, install it locally.

switch 縮排配置

如下，配置縮排為兩個空格，沒有配置 SwitchCase 的情況下，switch 語句會報縮排不對。

rules:
  indent:
    - error
    - 2

解決：在配置檔案裡設定 switch case 的縮排，如下：

rules:
  indent:
    - error
    - 2
    - SwitchCase: 1

json 格式配置如下：

'rules': {
  // other config
  'indent': ['error', 2, {'SwitchCase': 1}],
  // ...
}

讓webpack在打包檔案之前，對除第三方外的js檔案用eslint進行檢查。

preLoaders: [
    {
        test: /\.js$/,  // 檢測所有的js檔案
        loader: "eslint-loader", // 使用eslint外掛
        exclude: [   // 排除第三方檔案
            /node_modules/,
            /app\/lib/
        ]
    }
]

完成上述配置後，webpack在構建時就能自動對js程式碼用eslint進行檢查了。

注：由於webpack在預設配置下遇到error並不會丟擲錯誤終止程式碼打包，需要在webpack命令上新增bail引數讓webpack丟擲錯誤：

webpack --bail --progress --colors --config webpack.config.js

新增外掛

如果需要react和jsx的語法檢查，可以引入eslint-plugin-jsx-a11y和eslint-plugin-react這兩個外掛並在.eslintrc檔案中新增入plugins的配置：

"plugins": [
    "react",
    "jsx-a11y"
]

規則格式是<外掛名稱>/<規則名稱>: <告警級別>：

{
    "rules": {
        "react/jsx-uses-react": "error",
        "jsx-a11y/no-static-element-interactions": "warn"
    }
}

rules 配置說明

以下配置僅列舉一部分，詳細說明請參考：ESLint 配置檔案 .eslintrc 示例及說明

'rules': {
    // no-var
    'no-var': 'error',
    // 要求或禁止 var 宣告中的初始化
    'init-declarations': 2,
    // 強制使用單引號
    'quotes': ['error', 'single'],
    // 要求或禁止使用分號而不是 ASI
    'semi': ['error', 'never'],
    // 禁止不必要的分號
    'no-extra-semi': 'error',
    // 強制使用一致的換行風格
    'linebreak-style': ['error', 'unix'],
    // 空格2個
    'indent': ['error', 2, {'SwitchCase': 1}],
    // 指定陣列的元素之間要以空格隔開(,後面)， never引數：[ 之前和 ] 之後不能帶空格，always引數：[ 之前和 ] 之後必須帶空格
    'array-bracket-spacing': [2, 'never'],
    // 在塊級作用域外訪問塊內定義的變數是否報錯提示
    'block-scoped-var': 0,
    // if while function 後面的{必須與if在同一行，java風格。
    'brace-style': [2, '1tbs', {'allowSingleLine': true}],
    // 雙峰駝命名格式
    'camelcase': 2,
    // 陣列和物件鍵值對最後一個逗號， never引數：不能帶末尾的逗號, always引數：必須帶末尾的逗號， 
    'comma-dangle': [2, 'never'],
    // 控制逗號前後的空格
    'comma-spacing': [2, {'before': false, 'after': true}],
    // 控制逗號在行尾出現還是在行首出現
    'comma-style': [2, 'last'],
    // 圈複雜度
    'complexity': [2, 9],
    // 以方括號取物件屬性時，[ 後面和 ] 前面是否需要空格, 可選引數 never, always
    'computed-property-spacing': [2, 'never'],
    // 關閉 強制方法必須返回值，TypeScript強型別，不配置
    // 'consistent-return': 0
  }

規則格式是<規則名稱>: <告警級別>，告警級別分為三種:

1. "0"表示忽略問題，等同於"off";
2. "1"表示給出警告，等同於"warn";
3. "2"表示直接報錯，等同於"error"。

配置第三方規則 airbnb

除了支援外掛外，eslint還支援通過擴充套件來快速的引入開源的JavaScript程式碼規則，減少了我們選擇規則的時間，例如eslint官方推薦的規則：

extends: 'eslint:recommended'

這裡安裝前端圈內很流行的 airbnb，參考：eslint-config-airbnb。

前提是要先引入 airbnb 的外掛。airbnb 的規則不僅包含了官方推薦的大部分規則，還加入了jsx、react和import的相關規則，能幫助我們一鍵完成react應用的程式碼規則配置。

如果擴充套件引入的有些規則不符合所在團隊的開發習慣，可在.eslintrc的rules中用自己的配置覆蓋掉擴充套件中的預設值。

引入擴充套件的目的是減少我們挑選規則的時間，但這些規則不一定切合團隊和專案的具體情況。如果一味地讓團隊去遵守別人制定的規則，很可能造成對現存程式碼的大範圍修改，反而降低了開發效率。因此，建議先依據團隊現有的良好的風格挑選出最符合現有開發習慣的規則，保證已有的好習慣不被破壞的基礎上，再新增一些希望在團隊中推廣的規則。

實際操作

安裝依賴

C:\workspace\react\react-full-stack-learning>npx install-peerdeps --dev eslint-config-airbnb
npx: installed 82 in 48.041s
install-peerdeps v1.9.0
Installing peerdeps for eslint-config-airbnb@latest.
npm install eslint-config-airbnb@17.1.0 eslint@^5.3.0 eslint-plugin-import@^2.14.0 eslint-plugin-jsx-a11y@^6.1.1 eslint-plugin-react@^7.11.0 --save-dev

實際執行的時候，報錯：Unhandled rejection RangeError: Maximum call stack size exceededill install loadIdealTree，換成 cnpm 安裝會成功，可能因為其它依賴都是用 cnpm 安裝的緣故吧。

cnpm install eslint-config-airbnb@17.1.0 eslint@^5.3.0 eslint-plugin-import@^2.14.0 eslint-plugin-jsx-a11y@^6.1.1 eslint-plugin-react@^7.11.0 --save-dev

或者，執行以下命令，檢視依賴，然後在 package.json 檔案配置好，再用命令 cnpm i 安裝依賴。

npm info "eslint-config-airbnb@latest" peerDependencies
{ 
  eslint: '^4.19.1 || ^5.3.0',
  'eslint-plugin-import': '^2.14.0',
  'eslint-plugin-jsx-a11y': '^6.1.1',
  'eslint-plugin-react': '^7.11.0' 
}

修改官方擴充套件為 airbnb

extends: airbnb

擴充套件閱讀

Airbnb React/JSX 編碼規範

參考

• ESLint 標準規則
• eslint-plugin-react 規則
• Configuring ESLint
• Getting Started with ESLint
• ESLint 中文網站
• eslint使用心得
• eslint 常用配置