[note] ESLint
keywords: CLI
- Configuring ESLint @ ESLint > UserGuide > Configuring
- Configuration Files @ ESLint > UserGuide > Configuration
- ESLint Demo
Command Line Interface
Command Line Interface @ ESLint
# 安裝 eslint cli
$ npm i eslint
# 初始化 eslint 專案
$ npx eslint --init # To check syntax, find problems, and enforce code style
# 執行 eslint
$ eslint [options] [file|dir|glob]*
# 留意: --ext 主要是針對資料夾使用,表示只要 lint 這個資料夾內的特定副檔名,
# 但如果給的是檔案路徑,則 "ext" 這個參數會被忽略,一定會 lint 到這個檔案
$ eslint . --ext .jsx,.js,.ts,.tsx --cache --quiet --report-unused-disable-directives
# 只檢查和 develop branch 相比有變更的檔案(origin/develop...HEAD)
# 且不要檢查被刪除的檔案(--diff-filtered=d)
$ npx eslint -c .eslintrc $(git diff --name-only --diff-filter=d develop...HEAD)
# 檢視並複製當前套用到的 eslint config
$ npx eslint --print-config path::String | pbcopy
使用範例
# eslint [options] file.js [file.js] [dir]
$ eslint 'src/**/*.ts' # 檢驗所有 src 中的 .ts 檔
$ eslint file1.js file2.js
$ eslint lib/**
修復問題
# Fixing problems:
# --fix 自動修復問題
# --fix-dry-run 自動修復問題,但不儲存檔案
$ eslint 'src/**/*.ts' --fix
透過 npm 執行
// package.json
"scripts": {
"lint": "eslint src/**/*.ts"
}
執行:
$ npm run lint -- --fix
設定 ESLint
ESLint Configuration @ ESLint
設定方式
ESLint 有兩種最主要的設定方式:
- 註解:在檔案中直接透過 JavaScript 的註解來進行設定
- 設定檔:為整個專案進行設定,一樣有兩種設定方式
- 使用 JavaScript、JSON 或 YAML 檔案來,它可以是
.eslintrc.*
的檔案 - 或在
package.json
中使用eslintConfig
這個欄位來進行設定
- 使用 JavaScript、JSON 或 YAML 檔案來,它可以是
透過 ESLint CLI 可以快速建立設定檔。
定義規則(rules)
這裡的 semi
和 quotes
是 ESLint 中可以套用的規則(rules),陣列中的:
- 第一個值是「錯誤層級(error level)」:
off
或0
- 關閉規則warn
或1
- 將該規則顯示為警告,但仍可執行error
或2
- 將規則顯示為錯誤,會跳出錯誤後不執行,無法成功編譯
- 第二個值則是針對該規則的「設定」,例如在
semi
規則中的always
表示總是要有分號;quotes
規則中的double
則表示要使用雙引號。
// .eslintrc.*
{
"rules": {
"semi": ["error", "always"], // "semi": "error",
"quotes": ["error", "double"],
"no-console": "off"
}
}
如果是針對第三方 plugins 要設定規則的話,最前面會戴上該 plugin 的名稱,例如:
// 針對 jest 這個 plugin 套用規則(要留意 jest 這個 plugin 需要在 "plugins" 或 "extends" 欄位中被啟用(activate)過。
{
"rules": {
"jest/no-disabled-tests": "warn",
"jest/no-focused-tests": "error"
}
}
定義解析選項(parser options)
keywords: parserOptions
設定 parser options 可以幫助 ESLint 決定什麼是解析錯誤,所有語言預設的選項都是 false
。
預設的 ESLint 並沒有支援所 有最新的 ES6 語法,因此若有需要可以加上 { "parserOptions": { "ecmaVersion": 6 } }
的設定。
相關的設定如下:
-
ecmaVersion
- 設成 3, 5 (default), 6, 7, 8, 9, 10 or 11 來指定要使用哪一版本的 ECMAScript 語法,也可以用年份寫2015
等同於 6,2016
等同於 7,以此類推。 -
sourceType
- 設成script
(default) 或module
(如果你使用的是 ECMAScript modules)。 -
ecmaFeatures
- 用來定義希望使用語言中哪些額外的功能globalReturn
- 可以在 global scope 下使用return
impliedStrict
- 可以在全域使用 Strict Modejsx
- 可以使用 JSX
// .eslintrc.json
{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"settings": {
// 這裡可以設定 react 的版本
"react": {
"version": "16.13.1"
}
}
}
}
}
定義環境(environments)
keywords: env
Specifying Environments @ ESLint
透過定義環境可以讓 ESLint 中知道有哪些可用的環境變數或全域變數(global variable),例如,console.log
, alert
等等。其中常見的選項包含 browser
, node
, commonjs
,設定方式如下:
// .eslintrc.json
{
"env": {
"browser": true,
"node": true,
"es2021": true,
"jest": true
}
}
或者在 package.json
設定也可以:
// package.json
{
"name": "my-package",
"version": "0.0.1",
"eslintConfig": {
"env": {
"browser": true,
"node": true
}
}
}
設定全域變數(global environments)
透過 globals
欄位可以哪些變數是可以直接在檔案中使用的全域變數,設定方式如下:
// eslintrc.json
/**
* 設定 var1 和 var2 為全域變數
* writable 表示該變數可以被重新定義該變數
* readonly 則不能重新定義該變數
**/
{
"globals": {
"var1": "writable",
"var2": "readonly"
}
}
設定外掛(plugins)
在 ESLint 中可以使用第三方的套件,其中在使用這些套件前需要先透過 npm 進行安裝。在設定時,每個套件名稱前面的 eslint-plugin-
可以省略不寫:
// eslintrc.json
{
"plugins": ["plugin1", "eslint-plugin-plugin2"]
}
延伸設定檔(Extending Configuration Files)
Extending Configuration Files @ ESLint Configuration
由 extends
延伸後的規則,可以在 rules
欄位中進行修改或覆蓋。
extends
的欄位可以是:
- 透過字串來定義設定檔
- 透過字串陣列(array of strings)來定義,每一個設定都會延伸自前一個設定檔
extends 的設定檔可以是「設定檔的路徑」或「共用的設定檔(shareable config)」,例如
eslint:recommended
,eslint:all
),同樣的套件名稱前面的eslint-config-
可以省略。
// .eslintrc.js
// 透過 extends 擴增的規則可以再透過 rules 進行修改或覆蓋
module.exports = {
extends: 'eslint:recommended',
rules: {
// enable additional rules
indent: ['error', 4],
'linebreak-style': ['error', 'unix'],
quotes: ['error', 'double'],
semi: ['error', 'always'],
// override default options for rules from base configurations
'comma-dangle': ['error', 'always'],
'no-cond-assign': ['error', 'always'],
// disable rules from base configurations
'no-console': 'off',
},
};