ESlint 使用總結

在編寫 Js 代碼時, 下面是兩種常見的編程風格

const foo = 'Foo'
複製代碼

const foo = "Foo";
複製代碼

關於使用單引號仍是雙引號、 行末加不加 ; 可使用 ESlint 在開發時統一編程風格。

ESlint 工具不只能夠統一這種風格, 還能夠在編寫時就檢查代碼是否符合語法規範。

eslint 使用

1. 安裝

npm install eslint -g  ## 爲了使用 eslint cli 功能， 這裏使用了全局安裝
複製代碼

2. 在項目的根目錄下新建 .eslintrc 文件

{
    "rules": {
      "indent": 2,
      "no-unused-vars": 2,
      "no-alert": 2
    }, 
    "env": {
       "browser": true
    }
}
複製代碼

3. 新建 index.js 文件

var unused = 'I have no purpose!'

alert(unused)

function foo () {
    var message = 'Hello, World!';
        alert(message);
}

foo()
複製代碼

4. 使用 eslint index.js 檢查代碼。

在命令行中輸出了三條錯誤， 並顯示了錯誤出現的 行:列 錯誤等級 錯誤說明 對應的 eslint rule

7:1  error  Expected indentation of 4 spaces but found 8  indent
複製代碼

5. 使用 --fix 參數， 修復問題。

eslint index.js --fix
複製代碼

--fix 該選項指示 ESLint 試圖修復儘量多的問題。修復只針對實際文件自己，並且剩下的未修復的問題纔會輸出。不是全部的問題都能使用這個選項進行修復。

ESlint 配置方式

1. 使用 eslintrc.js、 eslintrc.json、 eslintrc.yml、 .eslintrc 文件配置。

2. 除了使用配置文件, 也能夠在文件內部以行內的形式來配置 eslint 規則。

// index.js

var unused = 'I have no purpose!'

// eslint-disable-next-line no-alert 
alert(unused)

function foo () {
    var message = 'Hello, World!';
    // eslint-disable-next-line indent
        console.log(message);
}

foo()

複製代碼

3. 在 package.json 中使用 eslintConfig 字段進行配置

{
    "eslintConfig": {
        "rules": {
            ...
        }, 
        "extends": []
    }
}
複製代碼

指定 JavaScript 支持版本

當在代碼中使用 const let 等 ES6 語法時, ESlint 會報錯。

這是由於 ESlint 默認支持 JavaScript 三、5 版本。 對更高 ES 語法的支持須要手動配置。

ESlint 的解析器選項能夠在配置文件中使用 parserOptions 屬性設置。可用的選項有：

1. ecmaVersion 默認設置爲3，5（默認）， 可使用 六、七、8 或 9 來指定你想要使用的 ECMAScript 版本。你也能夠用使用年份命名的版本號指定爲 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）

2. sourceType 設置爲 "script" (默認) 或 "module"（若是你的代碼是 ECMAScript 模塊)。

3. ecmaFeatures 這是個對象，表示你想使用的額外的語言特性:

   • globalReturn 容許在全局做用域下使用 return 語句
   • impliedStrict 啓用全局 strict mode
   • jsx 啓用 JSX
   • experimentalObjectRestSpread 啓用實驗性的 object rest/spread properties 支持

{
    "paarserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    }
}
複製代碼

::: tip

1. ，對 JSX 語法的支持不用於對 React 的支持。React 使用了一些特定的 ESLint 沒法識別的 JSX 語法。若是你正在使用 React 而且想要 React 語義支持，使用 eslint-plugin-react。
2. 支持 ES6 語法並不意味着同時支持新的 ES6 全局變量或類型(好比 Set 等新類型), 這時候除了須要使用 { "parserOptions": { "ecmaVersion": 6 } } 來開啓 ES6 語法支持, 還須要 {"env": {"es6": true}} (當開啓了這個配置後會自動開啓對 ES6 語法的支持) :::

配置運行環境

一個環境定義了一組預約義的全局變量。 Js 運行在不一樣的環境, 會有不一樣的全局變量, 例如在 Node 環境中會存在 global 變量, 當運行在 browser 中會存在 window 變量。 ESlint 會根據當前的運行環境來識別代碼中的全局變量, 若是執行環境與全局變量不符合時, 將會報錯。

使用 env 關鍵字在配置文件裏指定想啓用的環境，並設置它們爲 true。

{
    "env": {
        "browser": true,
        "node": true
    }
}
複製代碼

更多的 env 配置參照 Specifying Environments

定義特殊的全局變量

當訪問源文件未定義的變量名時, no-undef 將會發出警告。 這是能夠在 ESlint 配置文件中使用 globals 單獨設置一個全局變量。

{
    "globals": {
        "var1": true,
        "var2": true
    }
}
複製代碼

這樣在代碼中就能夠不定義 var1 var2 這兩個變量而直接使用了。

Rules 配置

在 ESlint 附帶有大量的規則， 可使用上面提到的配置方式添加項目的 rules 規則。

以 indent 規則爲例，默認時四個空格， 當須要更改這個規則時候， 能夠有下面幾種寫法:

// 使用默認4個空格。 錯誤等級爲 2 
"indent": 2

// 使用 2 個空格。 錯誤等級爲 2
"indent": [2, 2]

// 使用 tab 縮進。 錯誤等級爲 2
"indent": [2, "tab"]

// 縮進爲2個空格, 同時，switch...case結構的case也必須縮進
"indent": [2, 2, {"SwitchCase": 2}]
複製代碼

能夠看到, Rules 的配置規則是一個能夠包含三個參數的數組(只有第一個時能夠爲字符串)：

1. 第一個參數爲錯誤級別， 可使用 0 或者 off(關閉規則)、 1 或者 warn(開啓規則, 使用警告級別的錯誤, 不會致使程序退出)、 2 或者 error(開啓規則, 使用錯誤級別的錯誤, 會致使程序退出)

2. 第二個參數爲規則的選項， 在例子中分別配置了 indent 爲默認4個空格、2個空格、tab縮進。

3. 第三個參數爲額外參數, 例子中使用該參數開啓了 switch...case 縮進驗證。

Extend 配置

ESlint 提供了衆多可配置的 Rules, 一個一個配置是很是麻煩的。 ESlint 支持從已有的配置中繼承啓動的規則。

eslint:recommended

ESlint 提供了 eslint:recommended 配置， 它提供了一系列核心規則， 可使用 extends 屬性來繼承這些規則。

"extends": "eslint:recommended"
複製代碼

::: tip

1. eslint:recommended 描述了每一個規則的說明和默認配置。
2. extends 屬性值當只有一個時能夠是字符串, 多個時, 爲字符串數組。 :::

其餘規則集

除了繼承默認的 eslint:recommended, 還能夠繼承一些優秀的開源規則集， 如 eslint-plugin-standard, 使用方法也比較簡單。

1. 安裝 npm 包

npm install -D eslint-plugin-standard
複製代碼

2. 配置

{
    "extends": ["eslint:recommended", "standard"]
}
複製代碼

::: tip

1. 在 ESlint 中, 使用外部 npm 包的時候， 省略前面 exlint-plugin-
2. 若是須要覆蓋 extends 中的配置, 能夠在 rules 字段中進行覆蓋 :::

Plugin 插件使用

插件是一個 npm 包，一般輸出一個或多個命名的規則配置。 上面說到能夠 extends 屬性來繼承規則， 咱們可使用 plugins 屬性來引入 一個 npm 包, 而後使用 extends 屬性來繼承這個 npm 包的某個規則集。

1. 安裝一個 ESlint 的 npm 包。

npm install eslint-plugin-react --save-dev
複製代碼

2. 使用 plugins 屬性引入插件

{
    "plugins": "react"
}
複製代碼

::: tip 在 ESlint 中, 使用外部 npm 包的時候， 省略前面 exlint-plugin- :::

3. 使用 extends 繼承插件的某個規則

{
    "plugins": "react", 
    "extends": ["eslint:recommended", "plugin:react/recommended"]
}
複製代碼

ignore 文件配置

在項目根目錄建立一個 .eslintignore 文件告訴 ESLint 去忽略特定的文件和目錄。.eslintignore 文件是一個純文本文件，其中的每一行都是一個 glob 模式代表哪些路徑應該忽略檢測。例如，如下將忽略全部的 JavaScript 文件：

**/*.js
複製代碼

或者也能夠在 package.json 文件中配置 eslintIgnore 字段來指定忽略文件

{
    "eslintIgnore": ["hello.js", "world.js"]
}
複製代碼