ESLint
什麼是ESLint？
ESLint 是一個可配置的 JavaScript 檢查器。它可以幫助你發現並修復 JavaScript 代碼中的問題。問題可以指潛在的運行時漏洞、未使用最佳實踐、風格問題等。
Rules（規則）
Rules是ESLint的核心構建模塊。Rules會驗證你的代碼是否符合預期，並且規定了在不符合預期時應該怎麼做。規則還可以包含針對該規則的額外配置項。
配置Rules
規則嚴重性
要改變規則的設置，你必須把規則 ID 設置為這些值之一：
- "off" 或 0 - 關閉規則
- "warn" 或 1 - 啓用並視作警告（不影響退出）
- "error" 或 2 - 啓用並視作錯誤（觸發時退出代碼為 1）
通常會將規則設置為 "error" 以便在持續集成測試、pre- commit 檢查和拉取請求合併中強制遵守規則，而 ESLint 則以非零代碼退出。
示例：
// .eslintrc.js
module.exports = {
// ...
rules: {
curly: "error",
// 配置分號的規則，第一個為規則嚴重性，後面的是規則的選項
semi: ["error", "always"]
}
}
配置註釋
-
在文件的一部分中禁用規則警告
// 禁用所有 /* eslint-disable */ alert('foo'); /* eslint-enable */ // 禁用特定規則 /* eslint-disable no-alert */ alert('foo'); /* eslint-enable no-alert */ -
禁用整個文件中的規則警告
// 禁用所有 /* eslint-disable */ alert('foo');// 禁用特定規則 /* eslint no-alert: "off" */ console.log('foo')
配置文件
ESLint支持多種格式的配置文件（JS, JS Module, YAML, JSON），如果在同一目錄下存在多個配置文件，ESLint 將按照以下優先順序以此使用其一：
- .eslintrc.js
- .eslintrc.cjs
- .eslintrc.yaml
- .eslintrc.yml
- .eslintrc.json
- package.json
擴展配置文件
一個配置文件一旦擴展，就可以繼承另一個配置文件的所有特徵（包括規則、插件和語言選項）並修改所有選項。
通過extends屬性來設置配置文件的擴展，它的值可以是：
- 一個指定配置的字符串（要麼是配置文件的路徑，要麼是可共享配置的名稱，要麼是 eslint:recommended，要麼是 eslint:all）
-
一個字符串數組，每個額外的配置都會擴展前面的配置
// .eslintrc.js module.exports = { // ... extends: [ 'standard', 'plugin:vue/vue3-essential' ] }
使用可共享配置包
可共享配置 是導出配置對象的一個 npm 包。當你在項目根目錄下安裝了這個包後，ESLint 就可以使用它了。
extends 屬性值可以省略包名的 eslint-config-前綴。
npm init @eslint/config 命令可以創建一個配置，這樣你就可以擴展一個流行的風格指南（如 eslint-config-standard）。
使用插件配置
插件是一個可以為 ESLint 添加各種擴展功能的 npm 包。一個插件可以執行許多功能，包括但不限於添加新的規則和導出可共享的配置。
plugins屬性值可以省略包名中的eslint-plugin-前綴。
extends 屬性值由以下內容組成：
- plugin:
- 包名（可以省略其前綴，如
vue是eslint-plugin-vue的縮寫） /-
配置名稱
// .eslintrc.js module.exports = { // ... plugins: [ 'vue' ], extends: [ 'standard', 'plugin:vue/vue3-essential' ] }
使用現有配置文件
extends屬性值可以是基於配置文件的絕對或相對路徑。
// .eslintrc.js
module.exports = {
// ...
extends: [
"./node_modules/coding-standard/eslintDefaults.js",
"./node_modules/coding-standard/.eslintrc-es6",
"./node_modules/coding-standard/.eslintrc-jsx"
]
}覆蓋配置
有時，更精細的配置是必要的，比如同一目錄下的文件的配置不同。因此，你可以在 overrides 鍵下提供配置，這些配置只會用於符合特定 glob 模式的文件
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'standard',
'plugin:vue/vue3-essential'
],
overrides: [
{
env: {
node: true
},
// 指定需要覆蓋配置的文件
files: [
'.eslintrc.{js,cjs}'
],
parserOptions: {
sourceType: 'script'
}
}
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: [
'vue'
],
rules: {
}
}
插件
ESLint 插件是一個包含 ESLint 規則、配置、處理器和環境變量的集合的 npm 模塊。
配置插件
// .eslintrc.js
module.exports = {
// ...
plugins: [
'vue'
]
}指定處理器
插件可以提供處理器。處理器可以從其他類型的文件中提取 JavaScript 代碼，然後讓 ESLint 對 JavaScript 代碼進行提示，或者處理器可以在預處理中轉換 JavaScript 代碼以達到某些目的。
// .eslintrc.js
module.exports = {
// ...
plugins: [
'a-plugin'
],
processor: 'a-plugin/a-processor'
}自定義處理器：你也可以在用 ESLint 配置的處理器解析 JavaScript 代碼之前使用處理器先對其進行處理。
命令行 & Node.js API
ESLint 命令行是一個命令行界面，讓你可以在終端進行檢查。命令行有各種可以傳遞給命令的選項。
ESLint 的 Node.js API 讓你可以在 Node.js 代碼中以編程的方式使用 ESLint。該 API 在開發插件、集成和其他與 ESLint 相關的工具時非常有用。
eslint-webpack-plugin這個插件就是基於ESLint的Node.js API開發，在使用new ESLintPlugin(options)時，傳遞的options就可以參考Node.js API Reference
// webpack.config.js
module.exports = {
// ...
plugins: [
new ESLintPlugin({
// 自動修復
fix: true,
// 處理哪些格式的文件
extensions: [
'.js',
'.vue'
]
})
]
}
