目標
學習完本教程希望對下面這個 .eslintrc.js 文件能夠做到心裏有數。
// .eslintrc.js module.exports = { "extends": "airbnb", "rules": { "semi": [2, "never"], "no-console": 0, "comma-dangle": [2, "always-multiline"], "max-len": 0, "react/jsx-first-prop-new-line": 0, "react/jsx-filename-extension": 0, "space-before-function-paren": [2, "always"], "no-unused-expressions": [0, { "allowShortCircuit": true, "allowTernary": true }], "arrow-body-style": [0, "never"], "func-names": 0, "prefer-const": 0, "no-extend-native": 0, "no-param-reassign": 0, "no-restricted-syntax": 0, "no-eval": 0, "no-continue": 0, "react/jsx-no-bind": 0, "no-unused-vars": [2, { "ignoreRestSiblings": true }], "no-underscore-dangle": 0, "global-require": 0, "import/no-unresolved": 0, "import/extensions": 0, "jsx-a11y/href-no-hash": 0, "react/no-array-index-key": 0, "react/require-default-props": 0, "react/forbid-prop-types": 0, "react/no-string-refs": 0, "react/no-find-dom-node": 0, "import/no-extraneous-dependencies": 0, "import/prefer-default-export": 0, "react/no-danger": 0, "jsx-a11y/no-static-element-interactions": 0, }, "parser": "babel-eslint", "parserOptions": { "sourceType": "module", "ecmaVersion": 8, "ecmaFeatures": { "jsx": true, "experimentalObjectRestSpread": true } }, "settings": { "import/resolver": "node" } };
Eslint 是什麼
編碼規範
每個程序員都有自己的編碼習慣，最常見的莫過於：
- 有的人寫代碼一行代碼結尾必須加分號
;，有的人覺得不加分號;更好看； - 有的人寫代碼一行代碼不會超過 80 個字符，認爲這樣看起來簡潔明瞭，有的人喜歡把所有邏輯都寫在一行代碼上，覺得別人看不懂的代碼很牛逼；
- 有的人使用變量必然會先定義
var a = 10;，而粗心的人寫變量可能沒有定義過就直接使用b = 10;；
Lint 的含義
如果你寫自己的項目怎麼折騰都沒關係，但是在公司中老闆希望每個人寫出的代碼都要符合一個統一的規則，這樣別人看源碼就能夠看得懂，因爲源碼是符合統一的編碼規範制定的。
那麼問題來了，總不能每個人寫的代碼老闆都要一行行代碼去檢查吧，這是一件很蠢的事情。凡是重複性的工作，都應該被製作成工具來節約成本。這個工具應該做兩件事情：
- 提供編碼規範；
- 提供自動檢驗代碼的程序，並打印檢驗結果：告訴你哪一個文件哪一行代碼不符合哪一條編碼規範，方便你去修改代碼。
Lint 因此而誕生。
Eslint 的含義
Lint 是檢驗代碼格式工具的一個統稱，具體的工具有 Jslint 、 Eslint 等等 ...........
我們可以形象地將 Lint 看成是電商行業，而電商行業具體表現有淘寶（Eslint）、京東（Jslint）等。
使用 Eslint
確保你的電腦安裝了 node 和 npm 環境
創建項目
npm init 指令會在項目根目錄下生成 package.json 文件。
$ d:
$ cd d:
$ mkdir test-eslint
$ cd test-eslint
$ npm init
安裝依賴包
--save-dev 會把 eslint 安裝到 package.json 文件中的 devDependencies 屬性中，意思是隻是開發階段用到這個包，上線時就不需要這個包了。
$ npm install eslint --save-dev
設置 package.json 文件
打開 package.json 文件，修改 script 屬性如下：
"scripts": {
"test": "react-scripts test --env=jsdom",
"lint": "eslint src",
"lint:create": "eslint --init"
}
- script 屬性的意思是腳本，使用方法是在 cmd 窗口中輸入
npm run 指令的形式，如：npm run lint:create； "lint:create": "eslint --init"這個腳本是爲了生成 .eslintrc.js 文件，在介紹 Lint 的時候說到 Lint 應該提供編碼規範，規範寫在哪裏，就寫在這個文件，所以我們需要創建它；"lint": "eslint src"在介紹 Lint 的時候也說到 Lint 應該提供自動校驗代碼的程序，這個腳本是讓 Lint 自動檢驗 src 目錄下所有的 .js 文件。
創建 .eslint.js 文件
$ npm run lint:create > [email protected] lint:create D:\code\test\20170811 > eslint --init ? How would you like to configure ESLint? Answer questions about your style // 以問答的形式創建配置文件 ? Are you using ECMAScript 6 features? Yes // 是否校驗 Es6 語法 ? Are you using ES6 modules? Yes // 是否校驗 Es6 模塊語法 ? Where will your code run? Browser // 代碼運行環境，Browser 指瀏覽器 ? Do you use CommonJS? Yes // 是否校驗 CommonJs 語法 ? Do you use JSX? Yes // 是否校驗 JSX 語法 ? Do you use React? Yes // 是否校驗 React 語法 ? What style of indentation do you use? Tabs // 首行空白選擇 Tab 鍵還是 Space ? What quotes do you use for strings? Double // 字符串使用單引號 'string' 還是雙引號 "string" ? What line endings do you use? Windows // 操作系統 ? Do you require semicolons? Yes // 每行代碼結尾是否校驗加分號 ; ? What format do you want your config file to be in? JavaScript // 以 .js 格式生成配置文件 Installing eslint-plugin-react@latest // 因爲要校驗 Reac 語法，所以這裏需要下載一個 React 語法規則的包
創建完成後根目錄下應該會出現 .eslintrc.js 文件
創建 index.js 文件
在根目錄下創建 src/index.js 文件，內容如下，接下來就使用 Eslint 來檢驗這個 .js 文件是否符合編碼規範。
const lint = 'eslint'
此時的目錄結構應該爲：
- test-eslint + .eslintrc.js + package.json - src + index.js
校驗代碼
$ npm run lint 1:7 error 'lint' is assigned a value but never used no-unused-vars 1:14 error Strings must use doublequote quotes 1:22 error Missing semicolon semi 3 problems (3 errors, 0 warnings) 2 errors, 0 warnings potentially fixable with the `--fix` option.
這裏報了三個錯誤，分別是：
- index.js 第1行第7個字符，報錯編碼規則爲
no-unused-vars：變量 lint 只定義了，但是未使用； - index.js 第1行第14個字符，報錯編碼規則爲
quotes：編碼規範字符串只能使用雙引號，這裏卻使用了單引號； - index.js 第1行第22個字符，報錯編碼規則爲
semi：編碼規範每行代碼結尾必須加分號，這裏沒有加分號。
當我們熟悉了編碼規範之後，只需進行響應的修改就可以使代碼形成統一的風格。剛開始如果對編碼規範具體某一條規則不瞭解的話，可以在 eslint規則表 查看用法。（不建議去背規則表，而是用到什麼查什麼，把它當成字典來用，不那麼累）
設置 --fix 參數
打開 package.json 文件，修改 script 屬性如下：
"scripts": { "test": "react-scripts test --env=jsdom", "lint": "eslint src --fix", "lint:create": "eslint --init" }
說明：這裏給 "lint": "eslint src --fix", 加上 --fix 參數，是 Eslint 提供的自動修復基礎錯誤的功能。
此時運行 npm run lint 會看到少了兩條報錯信息，並不是說編碼規範變了，而是 Eslint 自動修復了基礎錯誤，打開 index.js 文件，可看到字符串自動變成了雙引號，並且代碼末尾也加上了分號。可惜的是 --fix 只能修復基礎的不影響代碼邏輯的錯誤，像 no-unused-vars 這種錯誤只能手動修改。
配置文件講解
按照上述操作，會生成默認 .eslintrc.js 配置文件，內容如下：
// .eslintrc.js module.exports = { "env": { "browser": true, "commonjs": true, "es6": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaFeatures": { "experimentalObjectRestSpread": true, "jsx": true }, "sourceType": "module" }, "plugins": [ "react" ], "rules": { "indent": [ "error", "tab" ], "linebreak-style": [ "error", "windows" ], "quotes": [ "error", "double" ], "semi": [ "error", "always" ] } }
該文件導出一個對象，對象包含屬性 env、extends、parserOptions、plugins、rules 五個屬性，作爲剛學習 Eslint 的新手，我們總是想要竭盡所能的詳細瞭解每一個屬性是什麼，幹嘛用的，以獲取小小的安全感。
env、parserOptions、plugins
這三個放在一起將是因爲你只需要知道它們是幹嘛的：我的程序裏要用到 ES6 、React 、JSX 語法，這幾個屬性就是讓 Eslint 能夠檢驗到這些語法的。其餘的你不需要知道更多的哪怕一丟丟的東東了。
作者在學習之初在這塊浪費了很多時間，官方文檔看了很多遍，大多不能理解什麼意思，後來想它既然提供這麼一個自動生成配置文件的工具，並且是命令行交互的方式，我只需要告訴它我要用 ES6 、React 、JSX 語法，它會自動進行相關配置滿足我的要求即可。
extends
前面一直說檢驗代碼遵循編碼規範，那到底是什麼規範呢。
值爲 "eslint:recommended" 的 extends 屬性啓用一系列核心規則，這些規則是經過前人驗證的最佳實踐（所謂最佳實踐，就是大傢伙都覺得應該遵循的編碼規範），想知道最佳實踐具體有哪些編碼規範，可以在 eslint規則表 中查看被標記爲 √ 的規則項。
如果覺得官方提供的默認規則不好用，可以自定義規則配置文件，然後發佈成 Npm 包，eslint-config-airbnb 就是別人自定義的編碼規範，使用 npm 安裝後，在我們自己的 .eslintrc.js 中進行配置 "extends": "airbnb"，eslint-config 這個前綴可以省略不寫，這樣我們就使用了 eslint-config-airbnb 中的規則，而不是官方的規則 "extends":"eslint:recommended" 了。關於如何創建自定義規則配置並共享可以參考： 如何自定義規則配置
關於 "airbnb" 編碼規範說兩句，在接觸到大多數開源項目中，大多數的作者都會使用 "airbnb" 編碼規範而不是 官方的 "extends": "eslint:recommended" 編碼規範。
如果我們覺得 eslint-config-airbnb 規則配置中個別規則並不符合當前項目的要求，可以直接在 .eslintrc.js 配置 rules 屬性，優先級高於共享規則 airbnb。
rules
配置文件也生成了，我們怎麼知道我們的系統會遵循什麼規則呢？？
在前面的列子中，使用 npm run lint 校驗出了三處錯誤，假如我們的項目中字符串就是要使用單引號而不是雙引號，代碼結尾就是要不加分號纔好看，變量就是定義了可能不會使用，我們可以通過設置 rules 來定義我們自己的編碼規範，即規則。
ESLint 附帶有大量的規則，修改規則應遵循如下要求：
- "off" 或 0 - 關閉規則
- "warn" 或 1 - 開啓規則，使用警告級別的錯誤：warn (不會導致程序退出)
- "error" 或 2 - 開啓規則，使用錯誤級別的錯誤：error (當被觸發的時候，程序會退出)
有的規則沒有屬性，只需控制是開啓還是關閉，像這樣："eqeqeq": "off"，有的規則有自己的屬性，使用起來像這樣："quotes": ["error", "double"]，具體有沒有自帶屬性，可查看 eslint規則表。
修改 .eslintrc.js 文件中的 rules 屬性：
"rules": { "indent": [ "error", "tab" ], "linebreak-style": [ "error", "windows" ], "quotes": [ "error", "single" // 改成字符串必須由單引號括起來而不是雙引號，'string'不報錯，"string"報錯 ], "semi": [ "error", "never" // 改成代碼結尾不再加分號，加了分號報錯，不加分號不報錯 ], "no-unused-vars": 0 // 0 相當於 off，表示關閉規則，相當於不再校驗這條規則：變量定義了必須使用 }
此時再使用 npm run lint 進行代碼校驗，沒有報錯就說明校驗通過，代碼符合統一編碼規範。
D:\code\test\20170811>npm run lint > [email protected] lint D:\code\test\20170811 > eslint src D:\code\test\20170811>
可能存在的疑問
剛接觸 ESlint ，並不清楚有哪些規則怎麼辦，要去 eslint規則表 一條條記憶嗎？答案是 no。
個人認爲 ESlint 的配置文件並不是一次性完成的，而是在項目過程中慢慢完善的。你可以放心大膽的先進行編碼，然後使用 npm run lint 校驗代碼的編碼規範，如果這時候報錯，可以在報錯信息中知道是哪一條編碼規範報錯了，你可能並不認識它們，此時去 eslint規則表 查詢相應規則的使用方法，如：no-unused-vars，從而進一步確定項目中是否需要這條編碼規範，如果需要，進行局部調整即可。
$ npm run lint 1:7 error 'lint' is assigned a value but never used no-unused-vars 1:14 error Strings must use doublequote quotes 1:22 error Missing semicolon semi 3 problems (3 errors, 0 warnings) 2 errors, 0 warnings potentially fixable with the `--fix` option.
更新部分
全局變量配置。
如使用 window 對象，默認情況下會報 no-undef 的錯誤，需要在 .eslintrc 中進行相應配置。
{ "rules": { // ... }, "globals": { "window": true } }
單行跳過 lint 校驗
在實際編碼時，可能會出現以下的代碼。
const apple = "apple"; const balana = "balana"; module.exports = { fruit: balana ; }
在最上面定義了兩個變量，在底部的配置文件中只可能用到其中一個變量，另一個用不到的在 eslint 校驗時就會報錯 no-unused-vars 的錯誤，意思是變量定義了但是沒有被用到。
其中一種解決方案是在 .eslintrc 文件中配置 rules no-unused-vars: 0，意思是項目中不檢驗變量定義未使用這條規則。強烈不建議這樣做，這個規則十分有用，可以規避編寫代碼時遺漏的變量。
另一種解決方案就是使用行內註釋跳過對 apple 和 balana 兩個變量跳過 eslint 校驗，隻影響這兩個變量，不影響外部。
const apple = "apple"; // eslint-disable-line const balana = "balana"; // eslint-disable-line module.exports = { fruit: balana ; }
此時使用 eslint 校驗時就不會再報錯了。
常見規則含義解釋
object-shorthand設置該規則，表示對象屬性要簡寫。
var foo = {x: x}; // 會報錯 var bar = {a: function () {}}; // 會報錯 var foo = {x}; // 不會報錯 var bar = {a () {}}; // 不會報錯
prefer-arrow-callback要求回調函數使用箭頭函數
// 回調函數，函數的參數是個函數，這個參數函數就是回調函數 funciton bar () {} // 不是回調函數，不會報錯 // setTimeout 的第一個參數就是回調函數，不用箭頭函數會報錯 setTimeout(() => { // ....... }, 1000)
no-param-reassign禁止對函數的參數重新賦值
function bar ({ data = {} }) { data.num = 12; // 會報錯 } /* 雖然報錯，又不想要將該校驗關閉，如果代碼中只有 data 這個屬性有這種情形， 可以在 .eslintrc.js 中的 rules 屬性中添加配置（可忽略 data 屬性做此校驗）： 'no-param-reassign': ['error', { 'props': true, 'ignorePropertyModificationsFor': ['data'] }], 'no-param-reassign': 0, // 關閉該屬性校驗 */
-
no-trailing-spaces禁止行尾空格 -
no-shadow禁止變量聲明與外層作用域的變量同名
function sum (num) { let num = 2; // 報錯，因爲 num 變量作爲參數已經申明過了 }
常用的幾個規則
"quotes": [1, "single"], # 單引號 "quote-props":[2, "as-needed"], # 雙引號自動變單引號 "semi": [2, "never"], # 一行結尾不要寫分號 "comma-dangle": [1,"always-multiline"] # 對象或數組多行寫法時，最後一個值加逗號