WebStorm + React 項目，配置 ESLint

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 並不推薦任何編碼風格，規則是自由的
• 所有內置規則都是泛化的

項目:

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

先看一下代碼優化效果

請點開圖片看大圖

 

image

按照以上提示， Alt+Enter 之后，會彈出以下窗口：

 

image

選擇 Fix Current file，之后，優化的代碼差異如下：

 

image

 

使用 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 窗口執行命令即可（默認路徑就是項目根目錄）。

 

image

通過以上操作，最終在項目根目錄下生成文件 .eslintrc.yml，內容如下：

 

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 

 

image

解決：在配置文件里設置 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 常用配置

作者：AndyChen
鏈接：https://www.jianshu.com/p/d2ddab8777f7