PJCHENder 未整理筆記

[筆記] ESLint 學習筆記

2017-09-26

[筆記] ESLint 學習筆記

keywords: CLI

Command Line Interface

1
2
3
4
5
6
7
8
# 安裝 eslint cli
$ npm i eslint

# 初始化 eslint 專案
$ npx eslint --init # To check syntax, find problems, and enforce code style

# 執行 eslint
$ eslint [options] [file|dir|glob]*

使用範例

1
2
3
# eslint [options] file.js [file.js] [dir]
$ eslint file1.js file2.js
$ eslint lib/**

修復問題

1
2
3
# Fixing problems:
# --fix 自動修復問題
# --fix-dry-run 自動修復問題,但不儲存檔案

設定 ESLint

ESLint Configuration @ ESLint

設定方式

ESLint 有兩種最主要的設定方式:

  1. 註解:在檔案中直接透過 JavaScript 的註解來進行設定
  2. 設定檔:為整個專案進行設定,一樣有兩種設定方式
    • 使用 JavaScript、JSON 或 YAML 檔案來,它可以是 .eslintrc.* 的檔案
    • 或在 package.json 中使用 eslintConfig 這個欄位來進行設定

透過 ESLint CLI 可以快速建立設定檔。

定義規則(rules)

這裡的 semiquotes 是 ESLint 中可以套用的規則(rules),陣列中:

  • 第一個值是錯誤層級(error level):
    • off0 - 關閉規則
    • warn1- 將該規則顯示為警告,但仍可執行
    • error2 - 將規則顯示為錯誤,會跳出錯誤後不執行,無法成功編譯
  • 第二個值則是針對該規則的選項設定,例如在 semi 規則中的 always 表示總是要有分號;quotes 規則中的 double 則表示要使用雙引號。
1
2
3
4
5
6
7
8
// .eslintrc.*
{
"rules": {
"semi": ["error", "always"], // "semi": "error",
"quotes": ["error", "double"],
"no-console": "off"
}
}

定義解析選項(parser options)

設定 parser options 可以幫助 ESLint 決定什麼是解析錯誤,所有語言預設的選項都是 false

預設的 ESLint 並沒有支援所有最新的 ES6 語法,因此若有需要可以加上 { "parserOptions": { "ecmaVersion": 6 } } 的設定;如果想要使用 ES6 中新的全域變數(global variables),則可以使用 { "env": { "es6": true }}

相關的設定如下:

  • 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 Mode
    • jsx - 可以使用 JSX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// .eslintrc.json
{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"settings": {
// 這裡可以設定 react 的版本
"react": {
"version": "16.13.1"
}
}
}
},
"rules": {
"semi": "error"
}
}

定義環境(environments)

透過定義環境可以讓 ESLint 中知道有哪些可用的環境變數,其中常見的選項包含 browser, node, commonjs,設定方式如下:

1
2
3
4
5
6
7
// .eslintrc.json
{
"env": {
"browser": true,
"node": true
}
}

或者在 package.json 設定也可以:

1
2
3
4
5
6
7
8
9
10
11
// package.json
{
"name": "my-package",
"version": "0.0.1",
"eslintConfig": {
"env": {
"browser": true,
"node": true
}
}
}

設定全域變數(global environments)

透過 globals 欄位可以哪些變數是可以直接在檔案中使用的全域變數,設定方式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
// eslintrc.json

/**
* 設定 var1 和 var2 為全域變數
* writable 表示該變數可以被重新定義該變數
* readonly 則不能重新定義該變數
**/
{
"globals": {
"var1": "writable",
"var2": "readonly"
}
}

設定外掛(plugins)

在 ESLint 中可以使用第三方的套件,其中在使用這些套件前需要先透過 npm 進行安裝。在設定時,每個套件名稱前面的 eslint-plugin- 可以省略不寫:

1
2
3
4
// 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- 可以省略。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// .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',
},
};

程式碼中備註

整支檔案隱藏警告

keywords: eslint-disable, eslint {rule}: 0

忽略所有規則

放在檔案開頭:

1
/* eslint-disable */ // 在該檔案關閉 ESLint

忽略特定規則

off or 0 - 關閉規則
warn or 1 - turn the rule on as a warning (doesn’t affect exit code)
error or 2 - turn the rule on as an error (exit code is 1 when triggered)

1
2
/* eslint no-unused-vars: 0 */
/* eslint no-unused-vars: "error" */
1
/* global myVar1, myVar2 */ // 忽略未定義的全域變數

於 package.json 中設定

忽略特定的全域變數也可以在 package.json 中加上:

1
2
3
4
5
{
"standard": {
"globals": ["myVar1", "myVar2"]
}
}

特定行數隱藏警告

keywords: eslint-disable-line, eslint-disable-next-line, eslint-disable-line {rule}, eslint-disable-next-line {rule}

忽略單行

忽略所有規則
1
2
3
4
file = 'I know what I am doing'; // eslint-disable-line

// eslint-disable-next-line
alert('foo');
忽略特定規則
1
2
3
4
alert('foo'); // eslint-disable-line no-alert, quotes, semi

// eslint-disable-next-line no-alert
alert('foo');

忽略多行

keywords: eslint-disable, eslint-enable
忽略所有規則
1
2
3
/* eslint-disable */
alert('foo');
/* eslint-enable */
忽略特定規則
1
2
3
4
/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-enable no-alert, no-console */

常見問題

extends 和 plugin 的差別

What’s the difference between plugins and extends in eslint?

使用 extends 時會直接套用一系列的規則(rules);使用 plugin 則會提供一系列的規則,你可以根據你的需要選擇要使用的規則,也就是說,使用 plugin 並不會強制套用任何規則,你需要自行選擇要用哪個規則。在 plugin 中也可能會提供設定檔供你使用,如果有的話,你可以在套用 plugin 後再將它的設定檔放入 extends 欄位中。

具體來說,plugins 提供你許多的規則,你可以自行選用,而 plugin 的作者也可能一併提供了他認為合理的設定檔讓你放在 extends 中使用,但這並不是強制的。

舉例來說:

1
2
3
4
5
6
7
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
]

參考資料

[官方]

Tags: eslint

掃描二維條碼,分享此文章