AlloyTeam ESLint 配置指南
ESLint 是一個應用廣泛的 JavaScript 代碼檢查工具。本文主要介紹由 AlloyTeam 總結的 ESLint 配置，以及應用 ESLint 配置時的一些經驗和工具。
配置原則
我們依據以下三條原則，研讀了 ESLint 所有的配置項，定制出了心目中「完美」的 ESLint 配置 。
- 能夠幫助發現代碼錯誤的規則，全部開啟
- 配置不應該依賴于某個具體項目，而應盡可能的合理
- 幫助保持團隊的代碼風格統一，而不是限制開發體驗
配置解讀
我們對每一條配置，都有詳盡的注釋，這樣不僅方便了我們自己查閱某項配置的意義和如此配置的原因，也使大家更容易配置出自己心目中的規則：
- 每一條配置都有注釋說明此配置的用途
- 對于理解困難的配置，都在注釋中有舉例
- 對于有爭議的配置，都在注釋中說明了為什么要這么配置的原因
- 對于關閉掉的配置，都在注釋中有對應的原因說明，以及 @off 的標識
- 對于能夠 autofix 的配置，都在注釋中有標注 @autofix
詳細的配置內容在這里：
下面列出一個代碼片段供參考：
module.exports = {
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 2017,
sourceType: 'module',
ecmaFeatures: {
experimentalObjectRestSpread: true,
jsx: true
}
},
env: {
browser: true,
node: true,
commonjs: true,
es6: true
},
// 以當前目錄為根目錄，不再向上查找 .eslintrc.js
root: true,
rules: {
//
//
// 可能的錯誤
// 這些規則與 JavaScript 代碼中可能的語法錯誤或邏輯錯誤有關
//
// 禁止 for 循環出現方向錯誤的循環，比如 for (i = 0; i < 10; i--)
'for-direction': 'error',
// getter 必須有返回值，并且禁止返回空，比如 return;
'getter-return': [
'error',
{
allowImplicit: false
}
],
// 禁止將 await 寫在循環里，因為這樣就無法同時發送多個異步請求了
// @off 要求太嚴格了，有時需要在循環中寫 await
'no-await-in-loop': 'off',
// 禁止與負零進行比較
'no-compare-neg-zero': 'error',
// 禁止在 if, for, while 里使用賦值語句，除非這個賦值語句被括號包起來了
'no-cond-assign': [
'error',
'except-parens'
],
// 禁止使用 console
// @off console 的使用很常見
'no-console': 'off',
// 禁止將常量作為 if, for, while 里的測試條件，比如 if (true), for (;;)，除非循環內部有 break 語句
'no-constant-condition': [
'error',
{
checkLoops: false
}
],
// 禁止在正則表達式中出現 Ctrl 鍵的 ASCII 表示，即禁止使用 /\x1f/
// 開啟此規則，因為字符串中一般不會出現 Ctrl 鍵，所以一旦出現了，可能是一個代碼錯誤
'no-control-regex': 'error',
// @fixable 禁止使用 debugger
'no-debugger': 'error',
// 禁止在函數參數中出現重復名稱的參數
'no-dupe-args': 'error',
// 禁止在對象字面量中出現重復名稱的鍵名
'no-dupe-keys': 'error',
}
};
使用方法
標準規則
安裝
npm install --save-dev eslint-config-alloy babel-eslint
配置 .eslintrc.js
在你的項目根目錄下創建 .eslintrc.js ，并將以下內容復制到文件中：
module.exports = {
extends: [
'eslint-config-alloy',
],
globals: {
// 這里填入你的項目需要的全局變量
// 這里值為 false 表示這個全局變量不允許被重新賦值，比如：
//
// jQuery: false,
// $: false
},
rules: {
// 這里填入你的項目需要的個性化配置，比如：
//
// // @fixable 一個縮進必須用兩個空格替代
// 'indent': [
// 'error',
// 2,
// {
// SwitchCase: 1,
// flatTernaryExpressions: true
// }
// ]
}
};
React 版
安裝
npm install --save-dev eslint-config-alloy eslint-plugin-react babel-eslint
配置 .eslintrc.js
在你的項目根目錄下創建 .eslintrc.js ，并將以下內容復制到文件中：
module.exports = {
extends: [
'eslint-config-alloy/react',
],
globals: {
// 這里填入你的項目需要的全局變量
// 這里值為 false 表示這個全局變量不允許被重新賦值，比如：
//
// React: false,
// ReactDOM: false
},
rules: {
// 這里填入你的項目需要的個性化配置，比如：
//
// // @fixable 一個縮進必須用兩個空格替代
// 'indent': [
// 'error',
// 2,
// {
// SwitchCase: 1,
// flatTernaryExpressions: true
// }
// ],
// // @fixable jsx 的 children 縮進必須為兩個空格
// 'react/jsx-indent': [
// 'error',
// 2
// ],
// // @fixable jsx 的 props 縮進必須為兩個空格
// 'react/jsx-indent-props': [
// 'error',
// 2
// ]
}
};
Vue 版
安裝
npm install --save-dev eslint-config-alloy eslint-plugin-vue babel-eslint
配置 .eslintrc.js
在你的項目根目錄下創建 .eslintrc.js ，并將以下內容復制到文件中：
module.exports = {
extends: [
'eslint-config-alloy/vue',
],
globals: {
// 這里填入你的項目需要的全局變量
// 這里值為 false 表示這個全局變量不允許被重新賦值，比如：
//
// Vue: false
},
rules: {
// 這里填入你的項目需要的個性化配置，比如：
//
// // @fixable 一個縮進必須用兩個空格替代
// 'indent': [
// 'error',
// 2,
// {
// SwitchCase: 1,
// flatTernaryExpressions: true
// }
// ]
}
};
代碼改造經驗
如果是一個新項目，應用一個比較嚴格的 ESLint 規則并不是一件難事。
但是如果是一個已經維護多年的老項目，那么突然引入 ESLint 就會有成千上萬個錯誤。這個時候該如何改造呢？
1. 將所有報錯的配置都關閉
運行 ESLint 之后，會有很多錯誤，這時候我們可以把他們先暫時關閉掉。
由于項目還在不停地迭代，這樣可以保證其他不會報錯的規則能夠應用到新增的文件上。
這時你的 .eslintrc.js 應該類似與下面的樣子：
module.exports = {
extends: [
'@alloyteam/eslint-config-standard',
],
globals: {
React: false,
jQuery: false,
$: false
},
rules: {
'no-dupe-keys': 'off',
'no-var': 'off',
'complexity': 'off',
'indent': 'off'
}
};
小技巧：如果報錯的規則太多了，可以在運行 ESLint 的時候，加上參數 -f json ，這樣的話會以 json 格式輸出，然后稍作處理就可以直接得到所有報錯的規則了。
注意：一開始不要開啟 --fix ，因為修復的太多了，就難以 review 代碼了。
2. 針對每個配置，修復所有報錯的文件，優先修復能夠 autofix 的配置
將 .eslintrc.js 中的 rules 刪掉一行，然后重新執行 ESLint 檢查。
- 如果可以 autofix，則加上 --fix 即可
- 如果不能 autofix，則需要一個文件一個文件的手動修改
建議優先修復能夠 autofix 的配置。
在這一步中，我們一次只修復一個 ESLint 配置，這樣的好處是 code review 的時候，目的很明確，不會出現問題。
小技巧：如果一個配置不能 autofix，又有很多文件報錯，那么可以嘗試寫一些腳本去處理，利用 ESLint 中的參數 -f json ，可以解析到所有報錯的文件和報錯的行數。
小技巧：如果寫腳本也難以處理，那么可以用編輯器的宏功能快速的執行重復的操作，對于 VSCode，可以使用這個工具： https://github.com/geddski/macros
注意：不要陷于某一個配置的泥潭，優先解決容易修復的問題。
3. 針對難以修復的配置，將報錯的文件忽略掉對應的規則，將來再慢慢修復
有時一個配置需要理解業務邏輯，讀懂上下文，很難去修復。
這個時候，可以在報錯的文件頭部加上 ESLint 注釋，忽略掉對應的規則，將來只要搜索對應的 ESLint 注釋就可以一個文件一個文件的修復問題了。
比如 eqeqeq 限制必須使用 === 而不是 == ，代碼中使用了 if (result == '2') ，然而我們并不知道 ajax 返回的數據是 number 還是 string。這時候就可以在對應的文件頭部加上：
/* eslint eqeqeq:0 */
這樣就可以針對這個文件關閉掉 eqeqeq 這個規則了。
相比于將規則在 .eslintrc.js 中關閉，將 ESLint 注釋添加到對應文件的頭部的好處是：這些規則雖然對老文件不起效，但是新文件都需要遵守這些規則了。
小技巧：如果需要修改的文件太多了，可以使用我們開發的小工具，批量給文件添加 ESLint 注釋： https://github.com/xcatliu/add-eslint-comment
編輯器插件對 ESLint 的支持
所有編輯器對 ESLint 的支持都很好，可以參考 這個頁面 安裝你的編輯器插件。
以 VSCode 舉例，在插件欄中下載安裝 ESLint 之后，編寫 js 代碼時就會有類似下圖的提示了：
]
注意：如果提示說 eslint 未安裝，則需要在命令行安裝項目級別的 eslint，或全局安裝 eslint：
npm install -g eslint
VSCode 設置中也可以配置一些 ESLint 選項（以及其他相關選項），比如：
{
// 關閉編輯器自帶的 js 檢查，建議關閉
"javascript.validate.enable" : false,
// ESLint 在保存時自動修復錯誤
"eslint.autoFixOnSave": true,
// 輸出 ESLint 執行時的 log，ESLint 不生效的時候可以啟用看看
// "eslint.trace.server": "messages",
// 配置 ESLint 檢查的文件類型，這個配置包括 .js, .jsx, .html, .vue
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
}
快來使用 AlloyTeam ESLint 規則 吧！
來自：http://www.alloyteam.com/2017/08/13065/