手模手配置Eslint，看懂腳手架中的Eslint

使用ESLint前：eslint是幹嘛的，我這樣寫有什麼問題，怎麼還報錯了，太麻煩想去掉這個插件，腳手架中關於eslint文件里的配置是什麼意思？怎麼設置配置項和規則達到自己想要的檢測效果呢？怎麼集成到VSCODE實現自動修複呢？所以本片博文介紹ESLint是什麼，配置項的意思，啟用elsint推 ...

使用ESLint前：
eslint是幹嘛的，我這樣寫有什麼問題，怎麼還報錯了，太麻煩想去掉這個插件，腳手架中關於eslint文件里的配置是什麼意思？
怎麼設置配置項和規則達到自己想要的檢測效果呢？怎麼集成到VSCODE實現自動修複呢？

所以本片博文介紹ESLint是什麼，配置項的意思，啟用elsint推薦的規則及eslint-plugin-vue推薦規則檢測項目,集成到VScode修複可自動修複的選項。
希望這篇文章可以讓你看得懂elsint文件里的配置項及開啟/關閉規範規則保持代碼規範。

一.ESLint是什麼：

ESLint 是在 ECMAScript/JavaScript 代碼中識別和報告模式匹配的工具，它的目標是保證代碼的一致性和避免錯誤。
ESLint 可以讓程式員在編碼的過程中發現問題而不是在執行的過程中。
ESLint 的初衷是為了讓程式員可以創建自己的檢測規則，所以的所有規則都被設計成可插入的。每條規則各自獨立，可以開啟或關閉，配置項實現細粒度的控制。

二.配置項：

1.配置方式：
1.1.JavaScript註釋:

作用：臨時禁止某些lint 規則出現的警告。

使用 JavaScript 註釋把配置信息直接嵌入到一個代碼源文件中

/* eslint-disable */
alert('/* eslint-disable */ 塊註釋放在文件頂部,整個文件範圍內禁止規則出現警告');

/* eslint-disable-next-line */
alert('/* eslint-disable-next-line */塊放在上行，本行禁止出現警告');

alert('/* eslint-disable-next-line */塊放在本行後行，本行禁止出現警告'); /* eslint-disable-line */

/* eslint-disable no-alert, no-console */
/* eslint-enable no-alert, no-console */

alert('對指定的一個或者多個規則啟用或禁用警告');
console.log('對指定的一個或者多個規則啟用或禁用警告');

上面的所有方法同樣適用於插件規則：
例如，禁止 eslint-plugin-example 的 rule-name 規則，把插件名（example）和規則名（rule-name）結合為 example/rule-name：

foo(); /* eslint-disable-line example/rule-name */

2.配置文件：

作用：一般用配置文件配置eslint

2.1ESLint 支持幾種格式的配置文件：

JavaScript - 使用 .eslintrc.js 然後輸出一個配置對象。
YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定義配置的結構。
JSON - 使用 .eslintrc.json 去定義配置的結構，ESLint 的 JSON 文件允許 JavaScript 風格的註釋。
(棄用) - 使用 .eslintrc，可以使 JSON 也可以是 YAML。
package.json - 在 package.json 里創建一個 eslintConfig屬性，在那裡定義你的配置。

2.2 同一個目錄下有多個配置文件的優先順序：
同一個目錄下有多個配置文件，ESLint 只會使用一個。優先順序順序如下：
.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json >.eslintrc(已經棄用) >package.json

2.3 層疊配置:
如下結構：
your-project
├── .eslintrc.js
├── lib
│ └── source.js
└─┬ tests
├── .eslintrc.js
└── test.js

1.層疊配置使用離要檢測的文件最近的 .eslintrc文件作為最高優先順序，然後才是父目錄里的配置文件:
ESLint檢測時，lib/ 下麵的所有文件將使用項目根目錄里的 .eslintrc 文件作為它的配置文件。---對應使用父目錄里的配置文件（如有node_modules，node_modules文件夾內依賴的不會被使用，因為不是父目錄）

當 ESLint 遍歷到 test/ 目錄，your-project/.eslintrc 之外，它還會用到 your-project/tests/.eslintrc。
所以 your-project/tests/test.js 是基於它的目錄層次結構中的兩個.eslintrc 文件的組合，並且離的最近的一個優先。

2.將 ESLint 限制到一個特定的項目：
預設情況下，ESLint 會在所有父級目錄里尋找配置文件，一直到文件系統的根目錄。
為了將 ESLint 限制到一個特定的項目，在你項目根目錄下的 package.json 文件或者 .eslintrc.* 文件里的 eslintConfig 欄位下設置 "root": true。
ESLint 一旦發現配置文件中有 "root": true，它就會停止在父級目錄中尋找。

2.4 解析器及解析器選項：

2.4.1 parser配置項:

作用：指定解析JavaScript的解析器。

ESLint 預設使用Espree作為其解析器，解析JavaScript。

{
  "parser": "Espree",
  "parserOptions":{}
}

你可以在配置文件中指定一個不同的解析器，只要該解析器符合下列要求：
它必須是一個 Node 模塊，可以從它出現的配置文件中載入。通常，這意味著應該使用 npm 單獨安裝解析器包。
它必須符合 parser interface。

以下解析器與 ESLint 相容：
Esprima
babel-eslint - 一個對Babel解析器的包裝，使其能夠與 ESLint 相容。
@typescript-eslint/parser - 將 TypeScript 轉換成與 estree 相容的形式，以便在ESLint中使用。

在使用自定義解析器時，為了讓 ESLint 在處理非 ECMAScript 5 特性時正常工作，配置屬性 parserOptions 仍然是必須的。
解析器會被傳入 parserOptions。(使用第三方插件會涉)

2.4.2 parserOptions 配置項：

作用：解析器選項，配置ES版本，sourceType，額外的語言特性。

parserOptions 屬性可用的選項有：

1.ecmaVersion - 預設設置為 3，5（預設），你可以使用 6（或者年份同 2015）、7、8、9 或 10 來指定你想要使用的 ECMAScript 版本。

2.sourceType - 設置為 "script" (預設) 或 "module"（如果你的代碼是 ECMAScript 模塊)。

3.ecmaFeatures - 這是個對象，表示你想使用的額外的語言特性:
globalReturn - 允許在全局作用域下使用 return 語句
impliedStrict - 啟用全局 strict mode (如果 ecmaVersion 是 5 或更高)
jsx - 啟用 JSX

設置解析器選項能幫助 ESLint 確定什麼是解析錯誤，所有語言選項預設都是 false。

eslint支持 ES6 語法並不意味著同時支持新的 ES6 全局變數或類型（比如 Set 等新類型）。
對於 ES6 語法，使用 { "parserOptions": { "ecmaVersion": 6 } }，但{ "parserOptions": { "ecmaVersion": 6 } }不自動啟用es6全局變數，對於新的 ES6 全局變數，使用 { "env":{ "es6": true } }。
{ "env": { "es6": true } } 自動啟用es6語法和啟用es6全局變數。

2.5 globals：

作用：提前聲明全局變數，以免ESLint 發出警告，有些變數是我們引入的庫聲明的，需要提前在配置中聲明，例如jquery的$。

當訪問當前源文件內未定義的變數時，no-undef 規則將發出警告。
如果你想在一個源文件里使用全局變數，推薦你在 ESLint 中定義這些全局變數，這樣 ESLint 就不會發出警告了。
要在配置文件中配置全局變數，請將 globals 配置屬性設置為一個對象，該對象包含以你希望使用的每個全局變數。
對於每個全局變數鍵，將對應的值設置為 "writable" 以允許重寫變數，或 "readonly" 不允許重寫變數。例如：

{
    "globals": {
        "$": false,
        "var1": "writable",
        "var2": "readonly"
    }
}

2.6 env 關鍵字指定你想啟用的環境

作用：在 globals 中一個個的進行聲明太過繁瑣，使用到 env就能避免這種繁瑣，env配置是對一個環境定義了一組預定義的全局變數。

可用的環境包括：

browser - 瀏覽器環境中的全局變數。
node - Node.js 全局變數和 Node.js 作用域。
es6 - 啟用除了 modules 以外的所有 ECMAScript 6 特性（該選項會自動設置 ecmaVersion 解析器選項為 6）。jquery - jQuery 全局變數。等等。。。
這些環境並不是互斥的，所以你可以同時定義多個。

{
  "env": {
  "browser": true,
  "node": true
 }
}

2.7 plugins：

作用：使用他人寫好的規則插件。

使用第三方（規則）插件。在使用插件之前，你必須使用 npm 安裝它，是一個 npm 包，通常輸出規則,規則預設關閉。

使用 plugins 關鍵字來存放插件名字的列表。插件名稱可以省略 eslint-plugin- 首碼。

{
  "plugins": [
  "plugin1",
  "eslint-plugin-plugin2"
 ]
}

2.8 extends：

作用：啟用規則繼承。

啟用的規則繼承，屬性值可以是：

1.指定配置的字元串(配置文件的路徑、可共用配置的名稱、eslint:recommended 或 eslint:all)
2.字元串數組：每個配置繼承它前面的配置

extends 屬性值可以由以下組成：
包名 (省略了首碼，比如，react)
/
配置名稱 (比如 recommended)

"plugins": [
  "vue"
],
"extends": [
  "eslint:recommended",//啟用elsint推薦的規則
  "plugin:vue/recommended" //啟用eslint-plugin-vue推薦的規則
],

2.9 rules：

作用：檢測的規則。

ESLint 附帶有大量的規則，所有的規則預設都是禁用的。
在配置文件中，使用 "extends": "eslint:recommended" 來啟用推薦的規則，報告一些常見的問題，
在Eslint中文文檔中這些推薦的規則都帶有一個標記。

要改變一個規則設置，你必須將規則 ID 設置為下列值之一：

"off" 或 0 - 關閉規則
"warn" 或 1 - 開啟規則，使用警告級別的錯誤：warn (不會導致程式退出)
"error" 或 2 - 開啟規則，使用錯誤級別的錯誤：error (當被觸發的時候，程式會退出)

使用數組連同錯誤級別和任何你想使用的選項
配置定義在插件中的一個規則的時候，你必須使用插件名/規則ID 的形式。

{
  "plugins": [
    "plugin1"
 ],
"rules": {
  "eqeqeq": "off",
  "curly": "error",
  "quotes": ["error", "double"],
  "plugin1/rule1": "error"
 }
}

規則 plugin1/rule1 表示來自插件 plugin1 的 rule1 規則。

rules 屬性可以做下麵的任何事情以擴展（或覆蓋）規則：

啟用額外的規則
改變繼承的規則級別而不改變它的選項：
基礎配置："eqeqeq": ["error", "allow-null"]
派生的配置："eqeqeq": "warn"
最後生成的配置："eqeqeq": ["warn", "allow-null"]
覆蓋基礎配置中的規則的選項
基礎配置："quotes": ["error", "single", "avoid-escape"]
派生的配置："quotes": ["error", "single"]
最後生成的配置："quotes": ["error", "single"]

如：

module.exports = {
//值為 "eslint:recommended" 的 extends 屬性啟用一系列核心 
規則，這些規則報告一些常見問題，在 規則頁面 中被標記為打勾。
"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",
 }
}

三.使用eslint-plugin-vue插件規則:

3.1. eslint-plugin-vue：

Vue.js官方eslint插件，檢查.vue文件中的<template> and <script>,查找語法，vue指令，vue風格指南錯誤。

3.2.用法：

Example .eslintrc.js:

module.exports = {
  extends: [
    // 在這裡添加通用的規則, 例如:
    'eslint:recommended',
    'plugin:vue/recommended'//extends裡面有這選項相當於多設置了，"parser": "vue-eslint-parser"
  ],
  rules: {
    // 在這裡覆蓋/添加 rules, 例如:
    // 'vue/no-unused-vars': 'error'
  }
}

3.3.parser問題：
如果使用其他通用parsers，如babel-eslint，需要把他寫在parserOptions.parser裡面而不是parser選項里
因為eslint-plugin-vue需要vue-eslint-parser解析器.vue文件。重寫parser選項會導致eslint-plugin-vue不能使用。

- "parser": "babel-eslint",
+ "parser": "vue-eslint-parser", //extends裡面有'plugin:vue/recommended'相當於多設置了"parser": "vue-eslint-parser"。
  "parserOptions": {
+     "parser": "babel-eslint",
      "sourceType": "module"
  }

3.4.plugin:vue/xxx的取值：

base
essential
strongly-recommended
recommended

取值對應啟用的規則，訪問eslint-plugin-vue官網。

四. .eslintrc.js實例及集成到VSCODE自動修複

4.1.啟用eslint推薦規則和eslint-plugin-vue規則示例：

module.exports = {
  "root": true,
  "env": {
      "browser": true,
      "node": true,
      "es6": true,
  },
  "parserOptions": {
     "parser": "babel-eslint",
     "sourceType": "module"
  }
  "extends": [
    'eslint:recommended',
    'plugin:vue/recommended'
  ],
  "rules": {
    // 在這裡覆蓋/添加 rules, 例如:
    'vue/no-unused-vars': 'error'
  }
}

4.2.集成到VSCODE

需在VSCODE拓展中安裝Eslint插件，在VSCODE設置->settings.json

{
    "prettier.semi": false,//設置語句結尾不加分號
    "prettier.singleQuote": true,//設置單引號
    "eslint.autoFixOnSave": true,//設置eslint自動處理可修複的規則
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {"language": "vue","autoFix": true}//處理可修複的vue檢測規則
    ],
    "vetur.validation.template": false,//使用Vetur插件要關閉這項
}