ESLint 配置
一、eslint 安裝
1、全局安裝
npm i -g eslint
全局安裝的好處是，在任何項目我們都可以使用eslint的全局命令進行代碼規則操作，但是這對我們的意義並不大，後續會詳細介紹；
全局安裝之後，要求相關的eslint插件頁必須全局安裝，這對多人開發項目來說會比項目安裝更加繁瑣。所以，我們這裏採用在項目上安裝eslint：
2、項目安裝
npm i -D eslint
3、編輯器安裝，後續文章會有介紹
二、eslint 定義規則
1、創建 .eslintrc.js 文件
可以使用 ./node_modules/.bin/eslint --init 創建文件
.eslintrc.* 文件支持 .js .yaml .yal .json等格式的配置文件，這裏使用 .js文件
在 package.json 裏創建一個 eslintConfig 屬性，在那裏，同樣可以定義你的配置
如果 .eslintrc.js 和 package.json裏的 eslintConfig 同時存在，則只讀取 .eslintrc.js文件
2、eslint 選項說明
“root”: true
默認情況下，ESLint 會在所有父級目錄裏尋找配置文件，一直到根目錄。如果發現配置文件中有 “root”: true，它就會停止在父級目錄中尋找。
"parserOptions": {
"parser": "babel-eslint", // 解析器，默認使用Espree
"ecmaVersion": 6, // 支持es6語法，但並不意味着同時支持新的 ES6 全局變量或類型（比如 Set 等新類型）
"sourceType": "module", // 指定來源的類型，"script" (默認) 或 "module"（如果你的代碼是 ECMAScript 模塊)
// 使用的額外的語言特性
"ecmaFeatures": {
"jsx": true, // 啓用 JSX
"globalReturn": true, // 允許在全局作用域下使用 return 語句
"impliedStrict": true, // 啓用全局 strict mode (如果 ecmaVersion 是 5 或更高)
"experimentalObjectRestSpread": true, // 啓用實驗性的 object rest/spread properties 支持。(重要：這是一個實驗性的功能,在未來可能會有明顯改變。 建議你寫的規則 不要 依賴該功能，除非當它發生改變時你願意承擔維護成本。)
}
}
解析器選項可以在 parserOptions 屬性設置。設置解析器選項能幫助 ESLint 確定什麼是解析錯誤，所有語言選項默認都是 false。如上：
"env": {
es6: true, // 啓用 ES6 語法支持以及新的 ES6 全局變量或類型
node: true, // Node.js 全局變量和 Node.js 作用域
browser: true, // 瀏覽器全局變量
jquery: true // jQuery 全局變量
}
使用 env 關鍵字指定你想啓用的環境。如上：
更多環境設置請參考：https://cn.eslint.org/docs/user-guide/configuring#specifying-environments
"globals": {
template: false, // false 不允許被重寫
_util: false
}
當訪問當前源文件內未定義的變量時，no-undef 規則將發出警告。如果你想在一個源文件裏使用全局變量，推薦你在 ESLint 中定義這些全局變量，這樣 ESLint 就不會發出警告了。如上：
"plugins": [
"html" // 此插件用來識別.html 和 .vue文件中的js代碼
]
ESLint 支持使用第三方插件。在使用插件之前，你必須使用 npm 安裝它。如：npm i -D eslint-plugin-html。在配置文件裏配置插件時，可以使用 plugins 關鍵字來存放插件名字的列表。插件名稱可以省略 eslint-plugin- 前綴。如上：
“extends”: “eslint:recommended”
一個配置文件可以從基礎配置中繼承已啓用的規則。如上，如果值爲字符串數組則每個配置繼承它前面的配置。值爲 “eslint:recommended” 的 extends 屬性啓用了eslint默認的規則，請參考：https://cn.eslint.org/docs/rules/
"rules": {
'indent': [2, 4], // 強制使用一致的縮進
'eqeqeq': [2, 'always'], // 要求使用 === 和 !==
'semi': [2, 'never'], // 要求或禁止使用分號代替 ASI
'quotes': [2, 'single'] // 強制使用一致的反勾號、雙引號或單引號
}
ESLint 附帶有大量的規則。你可以在rules選項中設置，設置的規則將覆蓋上面繼承的默認規則。要改變一個規則設置，你必須將規則 ID 設置爲下列值之一：
“off” 或 0 - 關閉規則
“warn” 或 1 - 開啓規則，使用警告級別的錯誤：warn (不會導致程序退出)
“error” 或 2 - 開啓規則，使用錯誤級別的錯誤：error (當被觸發的時候，程序會退出)
三、eslint 代碼檢測和修復
這裏講的是使用 eslint 命令行來操作，後續會講到如何用編輯器提升代碼效率
1、代碼檢測
項目根目錄運行 eslint，檢測指定文件，支持 glob 模式
./node_modules/.bin/eslint index.js
檢測index.js文件，如下，有一個錯誤：多餘的分號（基於semi規則）。並告訴我們此規則可以通過 --fix 命令修復。
在這裏插入圖片描述
指定文件後綴名
./node_modules/.bin/eslint --ext .js,.html src
目前，告訴 ESLint 哪個文件擴展名要檢測的唯一方法是使用 --ext 命令行選項指定一個逗號分隔的擴展名列表。注意，該標記只在與目錄一起使用時有效，如果使用文件名或 glob 模式，它將會被忽略。
2、代碼修復
項目根目錄運行：
./node_modules/.bin/eslint index.js --fix
會自動修復代碼，當然不是所有的規則都能實現自動修復的，具體說明請參照：https://cn.eslint.org/docs/rules/
四、eslint更多配置方式
完整的 配置層次結構，從最高優先級最低的優先級，如下：
1、行內配置
/eslint-disable/ 、 /eslint-enable/
/global/
/eslint/
/eslint-env/
2、命令行選項
–global
–rule
–env
-c、–config
3、項目級配置
與要檢測的文件在同一目錄下的 .eslintrc.* 或 package.json 文件
繼續在父級目錄尋找 .eslintrc 或 package.json文件，直到根目錄（包括根目錄）或直到發現一個有"root": true的配置。
4、如果不是（1）到（3）中的任何一種情況，退回到 ~/.eslintrc 中自定義的默認配置。
五、.eslintignore 忽略文件
1、定義及作用
在項目根目錄創建一個 .eslintignore 文件告訴 ESLint 去忽略特定的文件和目錄。
2、忽略規則
.eslintignore 文件是一個純文本文件，其中的每一行都是一個 glob 模式表明哪些路徑應該忽略檢測。如：
/dist/
/*.js
eslint總是忽略 /node_modules/* 和 /bower_components/* 中的文件
3、用eslint命令檢查忽略文件
./node_modules/.bin/eslint index.js
六、創建自己的規則風格文件
1、命名
eslint-config-* // 如：eslint-config-vui
2、上傳
參照：發佈一個自己的npm包
3、下載
npm i -D eslint-config-vui
4、使用
在繼承規則 extends 屬性中定義自己上傳的規則名，可以忽略 eslint-config- 字符，如下：
extends: [‘vui’]
七、使用編輯器插件標識錯誤以及自動修復代碼
爲什麼使用編輯器插件：上述講到的使用 eslint 命令來檢測和修復代碼的操作顯然非常繁瑣，我們需要能夠自動修復代碼的工具，相關編輯器都提供了 eslint 插件。
參考： vscode配置eslint，實現錯誤代碼標識以及自動修復
八、使用構建工具檢測代碼
爲什麼：以上方式，包括後續講到的使用編輯器修復代碼，都只是自我書寫代碼的規範意識而已，在多人開發時如何強制性的要求提交的代碼是符合我們自定的規範呢？這就需要在構建工具做相應的配置。