ESLint簡介
作為前端，大家對ESLint 一定不陌生！它可以幫我們強制約束程式碼風格、檢測程式碼中的語法錯誤、可以識別程式碼中的潛在問題甚至提供了一些自動修復功能。
但要注意，在前端中，ESLint 有兩個工具：
一個是 模組包 ，一個是 VSCode的擴充套件工具 。
ESLint 模組包
安裝方式：
透過 npm 或 yarn 直接進行 全域性 或 專案安裝
npm i eslint -D
透過 vue 腳手架 建立專案時 選擇安裝 eslint 模組包 vue create 建立專案過程中選擇 lint
模組包安裝在專案裡，當啟動專案時，會根據配置情況在瀏覽器控制檯顯示錯誤。
VS中ESLint擴充套件工具
安裝方式：透過 vscode 搜尋安裝
此外掛會根據當前專案的配置（配置不能使用console.log），實時將錯誤顯示在編譯器裡
ESLint配置詳解
eslint 本身是一個js語法規範檢查的包，可以使用官方推薦的推薦的檢查規則，也可以使用自定義的規則。
手動下載生成配置
原有專案第一次引入eslint時，可以使用該方法生成配置檔案。使用vue腳手架的方式建立專案多半是不用這種方式的，因為腳手架內會幫我們把eslint配置好。
建立專案
建立一個測試資料夾：eslint_test
初始化專案：npm init -y (建立 package.json)
ESLint安裝
在專案中安裝eslint包
npm i eslint -D
注意安裝結果：node_moduels 中下載了很多包
.bin/eslint.cmd 指令碼檔案，內部透過 nodejs 執行 eslint執行包 的程式碼
@eslint包 用來規範 eslint配置檔案
eslint開頭的包 是 eslint執行包，包含eslint程式碼
生成ESLint配置檔案
ESLint 可以建立獨立的配置檔案 .eslintrc.js，也可以 直接在 package.json 中配置
vue-cli安裝eslint預設將配置寫在package.json檔案中
使用內建指令碼實現配置檔案的生成：
執行 node_modules/.bin 資料夾裡的 eslint指令碼 來建立配置檔案
包含完整指令碼路徑的命令： ./node_modules/.bin/eslint --init
也可以用 npx 來執行 (推薦) ：
npx eslint --init
npx是隨node一起安裝的，能去 .bin 目錄 裡找 目標指令碼檔案，簡化執行指令碼的語法
建立配置檔案過程中，需要選擇配置：
執行完畢後，會自動生成了配置檔案 .eslintrc.js
觀察package.json，會發現此過程下載了若干相關規範包
主要是下載了 standard 語法規範包，而它需要 用到 import、node、promise 外掛包
使用ESLint檢查js語法
npx eslint ./需要檢查語法的檔案路徑
如果違法規範，會將錯誤提示到 終端，說明 eslint 工作正常
ESLint配置解析
ESlint 被設計為完全可配置的，我們可以關閉每一個規則而只執行基本語法驗證。有兩種主要的方式來配置 ESLint：
註釋法（不推薦）： 使用 JavaScript 註釋把配置資訊直接嵌入到一個程式碼原始檔中。
配置檔案： 使用 JavaScript、JSON 或者 YAML 檔案為整個目錄和它的子目錄指定配置資訊，或者直接在 package.json 檔案裡的 eslintConfig 欄位指定配置。
JavaScript配置的方式優先順序最高
一個標準的eslint配置檔案格式大致如下：
eslint檢測規則
ESLint 檢測配置檔案步驟：
在要檢測的檔案同一目錄裡尋找 .eslintrc.* 和 package.json；
緊接著在父級目錄裡尋找，一直到檔案系統的根目錄；
如果在前兩步發現有 root：true 的配置，停止在父級目錄中尋找 .eslintrc；
如果以上步驟都沒有找到，則回退到使用者主目錄 ~/.eslintrc 中自定義的預設配置；
通常我們都習慣把 ESLint 配置檔案放到專案根目錄，因此可以爲了避免 ESLint 校驗的時候往父級目錄查詢配置檔案，所以需要在配置檔案中加上
root: true
env節點
在ESLint 的各種規範中，一般都不允許使用未在頁面內宣告的成員，即使是一些執行環境自帶的 api，如：
瀏覽器中的 window/document 等
nodejs中的 __dirname 等
es2021中的 WeakRef 等
所以要告訴eslint，當前程式碼是執行在哪些環境中，這樣檢查時就不會報錯了
env: {
//使用瀏覽器的內建變數，如window，
browser: true,
//使用node的內建變數，如__dirname
commonjs: true,
es2021: true
},
可用的環境包括：
一個環境定義了一組預定義的全域性變數。可用的環境包括：
browser - 瀏覽器環境中的全域性變數。
node - Node.js 全域性變數和 Node.js 作用域。
commonjs - CommonJS 全域性變數和 CommonJS 作用域 (用於 Browserify/WebPack 打包的只在瀏覽器中執行的程式碼)。
shared-node-browser - Node.js 和 Browser 通用全域性變數。
es6 - 啟用除了 modules 以外的所有 ECMAScript 6 特性（該選項會自動設定 ecmaVersion 解析器選項為 6）。
worker - Web Workers 全域性變數。
amd - 將 require() 和 define() 定義為像 amd 一樣的全域性變數。
mocha - 新增所有的 Mocha 測試全域性變數。
jasmine - 新增所有的 Jasmine 版本 1.3 和 2.0 的測試全域性變數。
jest - Jest 全域性變數。
phantomjs - PhantomJS 全域性變數。
protractor - Protractor 全域性變數。
qunit - QUnit 全域性變數。
jquery - jQuery 全域性變數。
prototypejs - Prototype.js 全域性變數。
shelljs - ShellJS 全域性變數。
meteor - Meteor 全域性變數。
mongo - MongoDB 全域性變數。
applescript - AppleScript 全域性變數。
nashorn - Java 8 Nashorn 全域性變數。
serviceworker - Service Worker 全域性變數。
atomtest - Atom 測試全域性變數。
embertest - Ember 測試全域性變數。
webextensions - WebExtensions 全域性變數。
greasemonkey - GreaseMonkey 全域性變數。
globals節點
當訪問當前原始檔內未定義的變數時，no-undef 規則將發出警告。如，在jquery專案中，直接使用“$”就會報錯。
因此，我們可以在ESLint 中定義這些全域性變數，這樣 ESLint 就不會發出警告了。
配置檔案中：
//自定義全域性變數
globals:{
//自定義全域性變數$,既可讀又可改
"$":true
},
可選引數
| 引數名 | 釋義 | 示例 |
|---|---|---|
| writable | 允許重寫變數 | "var1": "writable", |
| readonly | 不允許重寫變數 | "var2": "readonly" |
可以使用字串 "off" 禁用全域性變數。
{
"env": {
"es6": true
},
"globals": {
"Promise": "off"
}
}
由於歷史原因，布林值 false 和字串值 "readable" 等價於 "readonly"。類似地，布林值 true 和字串值 "writeable" 等價於 "writable"。但是，不建議使用舊值。
Parser節點
ESLint 預設使用Espree作為其解析器，你可以在配置檔案中指定一個不同的解析器，只要該解析器符合下列要求：
它必須是一個 Node 模組，可以從它出現的配置檔案中載入。通常，這意味著應該使用 npm 單獨安裝解析器包。
它必須符合 parser interface。
爲了表明使用該 npm 模組作為你的解析器，你需要在你的 .eslintrc 檔案裡指定 parser 選項。
{
"parser": "esprima",
"rules": {
"semi": "error"
}
}
parserOptions 節點
注：此項配置是基於Parser節點的！不同的解析器，配置項可能不同！參考： vue-eslint-parser
ESLint 允許你指定你想要支援的 JavaScript 語言選項。預設情況下，ESLint 支援 ECMAScript 5 語法。
對於 ES6 語法，可以在配置檔案內增加如下配置
{
"parserOptions": {
"ecmaVersion": 6,
},
}
.eslintrc.js 檔案示例：
{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"semi": "error"
}
}
ecmaVersion - 預設設定為 3，5（預設）， 你可以使用 6、7、8、9 或 10 來指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本號指定為 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）或 2019 (same as 10)
sourceType - 設定為 "script" (預設) 或 "module"（如果你的程式碼是 ECMAScript 模組)。
ecmaFeatures - 這是個物件，表示你想使用的額外的語言特性:
globalReturn - 允許在全域性作用域下使用 return 語句
impliedStrict - 啟用全域性 strict mode (如果 ecmaVersion 是 5 或更高)
jsx - 啟用 JSX
Processor節點
外掛可以提供處理器，這意味著Processor都是呼叫外掛中的內建處理器。
處理器可以預處理程式碼： 比如過濾掉一些不需要檢測的js程式碼，然後交給rules去檢驗
若使用 processor 鍵，並使用由外掛名和處理器名組成的串接字串加上斜槓。例如，下面的選項啟用外掛 a-plugin 提供的處理器 a-processor：
{
"plugins": ["a-plugin"],
"processor": "a-plugin/a-processor"
}
注：
這裏的Processor和外掛中的Processor是不一樣的！
這裏的Processor是指定呼叫哪個外掛中的Processor，如果不指定外掛，這句配置將失去意義！
外掛中的Processor告訴 ESLint 如何處理 JavaScript 之外的檔案。
要為特定型別的檔案指定處理器，請使用 overrides 鍵和 processor 鍵的組合。例如，下面對 *.md 檔案使用處理器 a-plugin/markdown。
{
"plugins": ["a-plugin"],
"overrides": [
{
"files": ["*.md"],
"processor": "a-plugin/markdown"
}
]
}
處理器可以生成命名的程式碼塊，如 0.js 和 1.js。ESLint 將這樣的命名程式碼塊作為原始檔案的子檔案處理。你可以在配置的 overrides 部分為已命名的程式碼塊指定附加配置。例如，下面的命令對以 .js 結尾的 markdown 檔案中的已命名程式碼塊禁用 strict 規則。
{
"plugins": ["a-plugin"],
"overrides": [
{
"files": ["*.md"],
"processor": "a-plugin/markdown"
},
{
"files": ["**/*.md/*.js"],
"rules": {
"strict": "off"
}
}
]
}
extends 節點
簡介：
ESLint 檢查時用哪些規範呢？透過這個節點可以配置使用 內建規範 還是 第三方規範。如使用第三方下載的 eslint-config-standard 規範
// 擴充套件規則，使用第三方npm包 extends: 'standard',
extends 屬性值可以是：
指定配置的字串(配置檔案的路徑、可共享配置的名稱、eslint:recommended 或 eslint:all)
字串陣列：每個配置繼承它前面的配置
extends 內建的規範有：
| 內建規範 | |
|---|---|
| eslint:recommended | 值為 "eslint:recommended" 的 extends 屬性啟用一系列核心規則，核心規則參考eslint.bootcss.com/docs/rules/頁面內的所有綠色對鉤標記。 |
| eslint:all | 包含規則頁面的所有規則 |
如何配置：
實際專案中配置規則的時候，不可能團隊一條一條的去商議配置，太費精力了。通常的做法是使用業內大家普通使用的、遵循的編碼規範；然後透過 extends 去引入這些規範。
extends 屬性值可以是：
指定配置的字串(配置檔案的路徑、可共享配置的名稱、eslint:recommended 或 eslint:all)
字串陣列：每個配置繼承它前面的配置
{
extends: [
'eslint:recommended',
'plugin:vue/essential',
'eslint-config-standard', // 可以縮寫成 'standard'
'@vue/prettier',
'./node_modules/coding-standard/.eslintrc-es6'
]
}
從上面的配置，可以知道 extends 支援的配置型別可以是以下幾種
eslint 開頭的：是 ESLint 官方的擴充套件；
plugin 開頭的：是外掛型別擴充套件，比如 plugin:vue/essential；
eslint-config 開頭的：來自 npm 包，使用時可以省略字首 eslint-config-，比如上面的可以直接寫成 standard；
@開頭的：擴充套件和 eslint-config 一樣，只是在 npm 包上面加了一層作用域 scope；
一個執行配置檔案的相對路徑或絕對路徑；
那有哪些常用的、比較著名擴充套件可以被 extends 引入呢
eslint:recommended：ESLint 內建的推薦規則，即 ESLint Rules 列表中打了鉤的那些規則；
eslint:all：ESLint 內建的所有規則；
eslint-config-standard：standard 的 JS 規範；
eslint-config-prettier：關閉和 ESLint 中以及其他擴充套件中有衝突的規則；
eslint-config-airbnb-base：airbab 的 JS 規範；
eslint-config-alloy：騰訊 AlloyTeam 前端團隊出品，可以很好的針對你專案的技術棧進行配置選擇，比如可以選 React、Vue（現已支援 Vue 3.0）、TypeScript 等；
Plugins節點
有的時候，內建的規則不能滿足我們的要求，比如，對於vue檔案，顯然缺少對應的規則。這個時候，我們就可以使用外掛來拓展規則了。
外掛 是一個 npm 包，通常輸出規則。一些外掛也可以輸出一個或多個命名的 配置。要確保這個包安裝在 ESLint 能請求到的目錄下。
注意： 外掛是相對於 ESLint 程序的當前工作目錄解析的。換句話說，ESLint 將載入與使用者透過從專案 Node 互動直譯器執行 ('eslint-plugin-pluginname') 獲得的相同的外掛。
如何配置外掛
ESLint 相關的外掛的命名形式有 2 種：不帶名稱空間的和帶名稱空間的，比如：
eslint-plugin- 開頭的可以省略這部分字首；
@開頭的；
{
plugins: [
'jquery', // 是指 eslint-plugin-jquery
'@jquery/jquery', // 是指 @jquery/eslint-plugin-jquery
'@foobar', // 是指 @foobar/eslint-plugin
]
}
當需要基於外掛進行 rules 的配置的時候，需要加上外掛的引用，比如：
{
plugins: [
'jquery', // eslint-plugin-jquery
'@foo/foo', // @foo/eslint-plugin-foo
'@bar, // @bar/eslint-plugin
],
rules: {
'jquery/a-rule': 'error',
'@foo/foo/some-rule': 'error',
'@bar/another-rule': 'error'
},
}
rules 節點
使用內建規則
兩個用法：
不使用 extend 節點 配置 整套的規範，而是在 rules節點中直接配置
使用 extend 節點 配置 整套的規範，在 rules節點中修改部分規範的配置 eg
{
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"]
}
}
"off" 或 0 - 關閉規則
"warn" 或 1 - 開啟規則，使用警告級別的錯誤：warn (不會導致程式退出)
"error" 或 2 - 開啟規則，使用錯誤級別的錯誤：error (當被觸發的時候，程式會退出)
使用外掛規則
我們也可以使用外掛中的規則，你必須使用 外掛名/規則ID 的形式。比如：
{
"plugins": [
"vue"
],
"rules": {
"vue/rule1": "error"
}
}
注意： 當指定來自外掛的規則時，確保刪除 eslint-plugin- 字首。ESLint 在內部只使用沒有字首的名稱去定位規則。
