深入淺出eslint——關於我學習eslint的心得

摘要： 很多人在引入eslint後，發現專案中出現了很多錯誤提示，看著讓人的強迫症都犯了，於是就放棄了使用。可小編在這卻還是要說在專案中要用到eslint，尤其是在專案一開始構建搭建的時候，就約定好，就不會再出現多人協助程式碼不統一，開發看著比較噁心，也減少在執行時才知道程式碼出現問題的情況，保證寫出...

很多人在引入eslint後，發現專案中出現了很多錯誤提示，看著讓人的強迫症都犯了，於是就放棄了使用。可小編在這卻還是要說在專案中要用到eslint，尤其是在專案一開始構建搭建的時候，就約定好，就不會再出現多人協助程式碼不統一，開發看著比較噁心，也減少在執行時才知道程式碼出現問題的情況，保證寫出語法正確、風格統一的程式碼。最後捨棄一部分靈活性換取更高的穩定性和可維護性。

一、關於eslint

ESLint屬於一種QA工具，是一個ECMAScript/JavaScript語法規則和程式碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的程式碼。

ESLint旨在完全可配置，它的目標是提供一個外掛化的javascript程式碼檢測工具。這意味著您可以關閉每個規則，只能使用基本語法驗證，或者混合並匹配捆綁的規則和自定義規則，使ESLint完美的適用於您的專案。

【ESlint 中文官方網站】：eslint.cn/

可以檢視官網：eslint.org/

二、為什麼要用eslint呢？

1. 多人蔘與的專案中,經常會多人交叉編輯多個檔案。這就導致了各個檔案中充斥著各種編碼風格。最常見的就有:使用空格還是Tab一次縮排是2個空格還是4個空格還是8個空格字串使用單引號還是雙引號JavaScript一行結尾到底要不要加分號關鍵字前後要不要加空格等等等等不同風格混雜在一起極大的影響程式碼的可讀性與質量。不同風格混雜在一起極大的影響程式碼的可讀性與質量。因此在多人專案中維護一致的程式碼風格就很重要了。
2.  JavaScript我們知道這個語言比較靈活，除了基本的語法錯誤能在程式一啟動的時候被檢測到之外，很多隱含的錯誤都是在執行的時候才突然地蹦出來。除非你的程式有著100%的測試覆蓋率，否則說不定哪天就會因為一個xxx is undefined而導致程式崩潰，而為了避免這樣的錯誤可能你只需要在提交程式碼的時候用工具靜態分析一下，僅此而已。 ESLint是一個外掛化的javascript程式碼檢測工具，它可以用於檢查常見的JavaScript程式碼錯誤，也可以進行程式碼風格檢查，這樣我們就可以根據自己的喜好指定一套ESLint配置，然後應用到所編寫的專案上，從而實現輔助編碼規範的執行，有效控制專案程式碼的質量。 那麼，那現在有這麼多的靜態程式碼檢測工具，我們為什麼要選擇Eslint呢？ 主要原因是他的靈活性比較高，易於擴充套件，所以有非常良好的生態，並且主流的編輯器都可以整合Eslint。

三、eslint有以下幾個特性？

• 1、所有東西都是可以插拔的。你可以呼叫任意的rule api或者formatter api 去打包或者定義rule or formatter。 
• 2、任意的rule 都是獨立的 
• 3、沒有特定的coding style，你可以自己配置

四、安裝

要在 Node.js 上執行 ESLint，您必須安裝 npm。如果 npm 未安裝，請按照此處的說明進行操作：https://www.npmjs.com/ 一旦安裝了 npm，執行以下內容

•  A、本地安裝   

  npm install eslint --save-dev複製程式碼

   生成配置檔案 ./node_modules/.bin/eslint --init 之後,您可以執行ESLint在任何檔案或目錄如下: ./node_modules/.bin/eslint index.js index.js是你需要測試的js檔案。你使用的任何外掛或共享配置（必須安裝在本地來與安裝在本地的ESLint一起工作）。
•  B、全域性安裝 如果你想讓ESLint可用到所有的專案,建議全域性安裝ESLint。 

  npm install -g eslint 複製程式碼

• C、生成配置檔案 初始化 

  eslint --init
  複製程式碼

  執行eslint –init後，會在當前目錄下生成一個 .eslintrc 檔案，你可以在這個檔案中配置一些規則。 之後,您可以在任何檔案或目錄執行ESLint 

  eslint index.js 複製程式碼

• PS： eslint --init 是用於每一個專案設定和配置eslint,並將執行本地安裝的ESLint及其外掛的目錄。如果你喜歡使用全域性安裝的ESLint，在你配置中使用的任何外掛都必須是全域性安裝的。

五、關於eslint的配置

ESLint的設計是完全可配置的，這意味著您可以關閉每個規則並僅通過基本的語法驗證來執行，或者將捆綁規則和自定義規則進行混合匹配，以使ESLint完美適合您的專案。

有兩種主要的方法來配置ESLint：

1、配置註釋 - 使用JavaScript註釋將配置資訊直接嵌入到檔案中。

2、配置檔案 - 使用下面任一的檔案來為全部的目錄和它的子目錄指定配置資訊。

• A、javascript：使用.eslintrc.js檔案並匯出一個包含配置的物件。
•  B、YAML：.eslintrc.yaml或者.eslintrc. 
• C、yml JSON：.eslintrc.json，並且此檔案允許使用JS形式的註釋
•  D、廢棄的用法：.eslintrc，此檔案可以是JSON或者YAML 
• E、package.json：在package.json檔案中建立eslintConfig屬性，所有的配置包含在此屬性中。

Ps： 這些檔案的優先順序則是按照以上出現的順序 （.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json） 。  

從最高優先順序到最低優先順序的完整配置層次如下：

1、內聯配置 /*eslint-disable*/ 和 /*eslint-enable*/ /*global*/ /*eslint*/ /*eslint-env*/ 

2、命令列選項： --global --rule --env -c, --config 

3、專案級配置： .eslintrc.* 或者將package.json檔案放入與linted檔案相同的目錄中 繼續搜尋.eslintrc，並package.json在祖先目錄中的檔案（父具有最高的優先順序，然後祖父母等），直至幷包括根目錄或直到一個配置"root": true中找到。 

在沒有從（1）到（3）的任何配置的情況下，回到個人的預設配置~/.eslintrc。

Ps：*檔案或檔案中的eslintConfig欄位的形式package.json，ESLint將自動查詢和讀取，也可以在命令列上指定配置檔案。如果您的主目錄中（通常~/）有配置檔案，則ESLint 僅在ESLint找不到任何其他配置檔案時才使用它。 如果在同一個目錄中找到.eslintrc和package.json找到一個檔案，.eslintrc將會優先考慮，並且package.json不會使用檔案。

有幾個資訊可以配置：

可以被配置的資訊主要分為3類：

Environments：你的 javascript 腳步將要執行在什麼環境（如：nodejs，browser，commonjs等）中。

•  環境 - 指令碼設計執行的環境。每個環境都帶有一組預定義的全域性變數。
•  全域性變數 - 指令碼在執行期間訪問的其他全域性變數。 
• 規則 - 啟用哪些規則以及錯誤級別。 

所有這些選項都可以讓您精確控制ESLint如何處理您的程式碼。

指定全域性變數 可以在配置檔案或註釋中指定額外的全域性變數，false表明變數只讀： 註釋： /* global var1, var2 */ /* global var1:false, var2:false */ JSON： { "globals": { "var1": true, "var2": false } }

六、規則

1. 解析器選項（parserOptions）： 

"parserOptions": {
"ecmaVersion": 6, //ES的版本，預設為5
"sourceType": "module", //指定原始碼存在的位置，script | module，預設為script。
"ecmaFeatures": { //指定要使用其他那些語言物件
"experimentalObjectRestSpread": true,//啟用對物件的擴充套件
"jsx": true, //啟用jsx語法
"globalReturn":true, //允許return在全域性使用
"impliedStrict":true //啟用嚴格校驗模式
}
}
複製程式碼

2. 解析器（parser） 預設情況下ESLint使用Espree解析器，這裡我們可以修改它的預設設定。

parser": "babel-eslint",

複製程式碼

3. 環境配置（env） 預設情況下，所有環境變數都為false，且這些環境並不衝突，可以自由選擇搭配。 環境定義了預定義的全域性變數。可用的環境是：

browser - 瀏覽器全域性變數。
node - Node.js全域性變數和Node.js範圍。
commonjs - CommonJS全域性變數和CommonJS範圍（使用Browserify / WebPack的瀏覽器程式碼）。
shared-node-browser - Node.js和Browser的通用全域性。
es6- 啟用除模組外的所有ECMAScript 6功能（這會自動將ecmaVersion解析器選項設定為6）。
worker - 網路工作者全域性變數。
amd- 根據amd規範定義require()和define()作為全域性變數。
mocha - 增加了所有的Mocha測試全域性變數。
jasmine - 為版本1.3和2.0添加了所有Jasmine測試全域性變數。
jest - 是全域性變數。
phantomjs - PhantomJS全域性變數。
protractor - 量角器全域性變數。
qunit - QUnit全域性變數。
jquery - jQuery全域性變數。
prototypejs - Prototype.js全域性變數。
shelljs - ShellJS全域性變數。
meteor - 流星全球變數。
mongo - MongoDB全域性變數。
applescript - AppleScript全域性變數。
nashorn - Java 8 Nashorn全域性變數。
serviceworker - 服務工作者全域性變數。
atomtest - Atom測試助手全域性變數。
embertest - 灰燼測試幫手全域性。
webextensions - 全球網路擴充套件。
greasemonkey - GreaseMonkey全域性變數
複製程式碼

這些環境並不相互排斥，因此您可以一次定義多個環境。

可以在檔案內部，配置檔案中或使用--env命令列標誌指定環境。

要在JavaScript檔案中使用註釋指定環境，請使用以下格式：

/* eslint-env node, mocha */複製程式碼

env: {
node: true,
},複製程式碼

在一個package.json檔案中

{
"name": "mypackage",
"version": "0.0.1",
"eslintConfig": {
"env": {
"browser": true,
"node": true
}
}}複製程式碼

在YAML中：

---
env:
browser: true
node: true
複製程式碼

4. 外掛（plugins）

"plugins": ["standard","promise","react"],複製程式碼

5. 全域性變數（globals） 指定全域性變數的值為true|false。true表示變數可以被覆蓋，false表示不允許被覆蓋。

"globals": {
"document": true,
"navigator": true,
"window": true,
"think": true
},
複製程式碼

6. 自定義規則（settings）

"settings": {
"sharedData": "Hello"
}
複製程式碼

7. 禁用持續查詢（root） 預設情況下，ESLint將在根目錄下的所有父資料夾中查詢配置檔案。該屬性的作用是一旦發現了配置檔案就停止對父資料夾的查詢

"root": true
複製程式碼

8. 共享配置（extends）

該屬性可以是

eslint命令，也可以是繼承檔案的路徑。

eslint:all:表示引入當前版本eslint的所有核心規則。

eslint:recommended:表示引入eslint的核心功能，並且報告一些常見的共同錯誤。 如果值為絕對或相對路徑則相當於匯入路徑對應的規則配置。

"extends": recommended,
複製程式碼

"extends": "./eslint-config-public.js",
複製程式碼

9. 在配置檔案中可以設定一些規則。

 規則的錯誤等級有三種：

• "off" 或者 0：關閉規則。
•  "warn" 或者 1：開啟規則，並且作為一個警告（不影響exit code）。
•  "error" 或者 2：開啟規則，並且作為一個錯誤（exit code將會是1）。

例子：

1、要使用配置註釋配置檔案內部的規則，請使用以下格式的註釋：

•  A、 /* eslint eqeqeq: "off", curly: "error" */ 在這個例子中，eqeqeq它被關閉並curly作為錯誤開啟。
•  B、您也可以使用等同於規則嚴重性的數字： /* eslint eqeqeq: 0, curly: 2 */ 
  
• C、如果規則具有其他選項，則可以使用陣列文字語法來指定它們，例如： /* eslint quotes: ["error", "double"], curly: 2 */ 
  

2、要在配置檔案內部配置規則，請使用該rules鍵以及錯誤級別以及要使用的任何選項。

例如：  

{
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"]
}}複製程式碼

3、在YAML中：

---
rules:
eqeqeq: off
curly: error
quotes:
- error
- double複製程式碼

要配置在外掛中定義的規則，必須在規則ID前加上外掛名稱和a /。

例如：

{
"plugins": [
"plugin1"
],
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"],
"plugin1/rule1": "error"
}}
複製程式碼

在YAML中：

---
plugins:
- plugin1
rules:
eqeqeq: 0
curly: error
quotes:
- error
- "double"
plugin1/rule1: error複製程式碼

注意：從外掛中指定規則時，請確保省略eslint-plugin-。ESLint在內部僅使用字首名來查詢規則。 

4、通過內嵌評論禁用規則

•  A、要臨時禁用檔案中的規則警告，請按以下格式使用塊註釋：要在整個檔案中禁用規則警告，請在檔案 /* eslint-disable */ 頂部放置塊註釋： / * eslint-disable */ alert('foo'); /* eslint-enable */
  
• B、要禁用特定行上的所有規則，請使用以下格式之一的行註釋： alert('foo'); // eslint-disable-line // eslint-disable-next-linealert('foo'); 
  

5、使用配置檔案 按圖解釋：

•  1、"parserOptions"屬性配置解析器內容。其中“ecmaVersion”屬性配置JS的語法版本。“sourceType”屬性配置JS檔案載入模式，值為“script”或“module”。“ecmaFeatures”屬性配置想要使用的額外語言特性。 
• 2、“env”屬性配置了預定義的全域性環境。我們當前開啟了“es6”、"node"、"amd"三個環境。 
• 3、"plugins"屬性配置需要載入的第三方外掛。這裡我們需要先安裝對應外掛才能使用。 4、“globals”屬性定義了全域性變數集合，包含在這個集合中的屬性都會被工具認為是全域性變數，no-undef 規則就不會發出警告。
• 5、"extends"屬性配置基礎規則，“rules”屬性中配置的規則都是基於這個規則之上配置的。 
• 6、"rules"屬性配置檢查規則。 

開啟規則和發生錯誤時報告的等級

規則的錯誤等級有三種：

• 0或’off’：關閉規則。
•  1或’warn’：開啟規則，並且作為一個警告（並不會導致檢查不通過）。
•  2或’error’：開啟規則，並且作為一個錯誤 (退出碼為1，檢查不通過)。

引數說明：

•  引數1 ： 錯誤等級 
•  引數2 ： 處理方式

配置程式碼註釋方式 使用 JavaScript 註釋把配置資訊直接嵌入到一個檔案

示例：

• 忽略 no-undef 檢查 /* eslint-disable no-undef */ 
  
• 忽略 no-new 檢查 /* eslint-disable no-new */ 
  
• 設定檢查 /*eslint eqeqeq: off*/ /*eslint eqeqeq: 0*/  

eslint 檢查指令

•  檢查且修復 eslint * --fix 
  
• 檢查指定檔案 eslint app.js --fix 
  

再次簡單說明，下邊會附上 一些基本的配置規則，及註釋。

七、基本使用案例

根據案例來一步一步 看是怎麼使用eslint的，如下：

1.  在專案根目錄生成package.json檔案 

   npm init -y複製程式碼

    
2. 安裝eslint（安裝方式根據個人專案需要安裝，這裡使用全域性安裝） 

   npm install -g eslint複製程式碼

    
3. 建立index.js檔案，裡面寫一個函式。

   function test () {
   var ret = {};
   for (var i in arguments) {
   var m = arguments[i];
   for (var j in m) ret[j] = m[j];
   }
   return ret;
   }
   console.log(test({a: 123}, {b: 456})); 複製程式碼

輸出

4. 使用eslint檢查

eslint index.js複製程式碼

輸出：

執行結果是失敗，因為沒有找到相應的配置檔案，本案例中會用配置檔案來說明：

生成的過程中，需要選擇生成規則、支援環境等內容，下面說明一些小編的生成選項

生成的內容在.eslintrc.js檔案中，

module.exports = {"env": {"browser": true},"extends": "eslint:recommended","parserOptions": {"ecmaVersion": 5},"rules": {"indent": ["error","tab"],"linebreak-style": ["error","unix"],"quotes": ["error","double"],"semi": ["error","always"]}};複製程式碼

這是預設生成的，留下個extends，剩下的可以自己配置檔案規則，後邊將附上規則說明，

module.exports = {
"extends": "eslint:recommended"
};複製程式碼

現在我們先使用內建的eslint:recommended配置，它包含了一系列核心規則，能報告一些常見的問題。

在此執行

eslint index.js複製程式碼

因為eslint規則的禁用no-console規則，會出現如此的錯誤。

如何不出現這個錯誤呢？

• 1、將程式碼中的console語句刪除，
• 2、在.eslintrc.js規則中關閉此規則，因為在開發測試中，我們可能需要列印一些東西，測試。

module.exports = {extends: 'eslint:recommended',rules: {'no-console': 'off',},};複製程式碼

重新執行檢查還是提示no-undef

這是因為JavaScript有很多種執行環境，比如常見的有瀏覽器和Node.js，另外還有很多軟體系統使用JavaScript作為其指令碼引擎，比如PostgreSQL就支援使用JavaScript來編寫儲存引擎，而這些執行環境可能並不存在console這個物件。另外在瀏覽器環境下會有window物件，而Node.js下沒有；在Node.js下會有process物件，而瀏覽器環境下沒有。

所以在配置檔案中我們還需要指定程式的目標環境：

module.exports = {
extends: 'eslint:recommended',
env: {
node: true,
},
rules: {
'no-console': 'off',
},};複製程式碼

重新執行檢查時，已經沒有任何提示輸出了，說明index.js已經完全通過了檢查。

例外情況：

定立ESLint規則的初衷是為了避免自己犯錯，但是我們也要避免不顧實際情況而將其搞得太過於形式化，本末倒置。

ESLint提供了多種臨時禁用規則的方式，比如我們可以通過一條 eslint-disable-next-line 備註來使得下一行可以跳過檢查： 

// eslint-disable-next-linevar a = 123;var b = 456;
複製程式碼

在上面的示例程式碼中， var a = 123 不會受到檢查，而 var b = 456 則又恢復檢查，在上文我們使用的 eslint-config-lei 的配置規則下，由於不允許使用var宣告變數，則var b這一行會報告一個error。 我們還可以通過成對的 eslint-enable 和 eslint-disable 備註來禁用對某一段程式碼的檢查，但是稍不小心少寫了一個 eslint-disable 就可能會導致後面所有檔案的檢查都被禁用，所以我並不推薦使用。

八、使用共享的配置檔案

ESLint支援將共享設定新增到配置檔案中。我們大多時候，個人或者團隊有好幾個專案，而每個專案可能使用規則不同，或者需要配置不同的規則，如果都寫到一個配置或者每次都改配置檔案，管理起來會很麻煩。

新建一個檔案比如eslint-config-public.js，在檔案內容新增一兩個規則。

module.exports = {
extends: 'eslint:recommended',
env: {
node: true,
},
rules: {
'no-console': 'off',
'indent': [ 'error', 4 ],
'quotes': [ 'error', 'single' ],
},
};複製程式碼

然後將原來的.eslintrc.js檔案改成這樣：

module.exports = {
extends: './eslint-config-public.js',};
複製程式碼

這個要測試的是啥呢，就是看看限定縮排是4個空格和使用單引號的字串等，然後測試下，執行 eslint index.js ，得到的結果是沒有問題的，但是如果在index.js中的 var ret = {}; 前面加個空格啥的，結果就立馬不一樣了。

這時候提示第2行的是縮排應該是4個空格，而檔案的第2行卻發現了5個空格，說明公共配置檔案eslint-config-public.js已經生效了。

九、忽略檔案

我們的整個專案中，有一些檔案是不需要eslint進行檢查，我們可以用到忽略檔案。

在我們的工程目錄中新建一個檔案，命名為“ .eslintignore ”，Eslint會自動識別這個檔案。

這個配置檔案裡面，每一行都是一個glob模式語句，具體格式如下：

• 以 # 開頭的行被當作註釋，不影響忽略模式。
•  路徑是相對於 .eslintignore 的位置或當前工作目錄。這也會影響通過 --ignore-pattern傳遞的路徑。 
• 忽略模式同 .gitignore 規範
•  以 ! 開頭的行是否定模式，它將會重新包含一個之前被忽略的模式。

.eslintignore當 ESLint 在目錄上執行時，ESLint 支援檔案從linting 程序中排除檔案。作為單獨的 CLI 引數給出的檔案將免除排除。該.eslintignore檔案是一個純文字檔案，每行包含一個模式。它可以位於任何目標目錄的祖先中; 它會影響其包含目錄中的檔案以及所有子目錄。

以下是一個簡單的.eslintignore檔案示例：

 node_modules/* 

**/vendor/*.js 

Ps：除了.eslintignore檔案中的任何模式之外，ESLint始終忽略 /node_modules/* 和中的檔案 /bower_components/*

1、您可以通過提供不同檔案的路徑來覆蓋此行為。 --ignore-path

eslint --ignore-path tmp/.eslintignore file.js
eslint --ignore-path .gitignore file.js複製程式碼

2、 --no-ignore 禁用從檔案的排除.eslintignore， --ignore-path 和 --ignore-pattern 

eslint --no-ignore file.js複製程式碼

比如，你已經在忽略檔案.eslintignore中忽略了某檔案，但是你用在命令列中執行了 eslint 該檔案，則為警告提示，您可以使用--no-ignore忽略使用忽略規則。

3、在package.json中使用eslintIgnore

如果.eslintignore未找到檔案並且未指定備用檔案，ESLint將在package.json中查詢eslintIgnore金鑰以檢查要忽略的檔案。

{
"name": "mypackage",
"version": "0.0.1",
"eslintConfig": {
"env": {
"browser": true,
"node": true
}
},
"eslintIgnore": ["hello.js", "world.js"]}
複製程式碼

十、Webpack環境中使用ESLint

• 1、在webpack配置中使用eslint載入器了。 

  loaders: [
  {
  test: /\.jsx?$/,
  exclude: /node_modules/,
  loader: 'react-hot!babel'
  },
  {
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'eslint-loader'
  }
  ]
  } 複製程式碼

• 2、也可以建立檔案.eslintrc 並引入 webpack.config.js 

  eslint:{ 
  configFile: './.eslintrc' 
  },複製程式碼

•  3、使用webpack的preLoaders 

  module:{ 
  preLoaders:[ 
  { 
  test: /\.js$/, 
  exclude: /node_modules/, 
  loader: 'eslint-loader' 
  }, 
  ], 
  loaders:[ 
  { 
  test: /\.jsx?$/, 
  exclude: /node_modules/, 
  loader: 'react-hot!babel' 
  } 
  ] 
  }, 複製程式碼

• Ps：webpack3 的配置 

  module: {
  rules: [
  {
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  enforce: 'pre',
  loader: 'eslint-loader'
  }
  ]
  } 複製程式碼

十一、編輯器上使用

我們用編輯器上安裝eslint整合，可以在編寫程式碼時，就會出現錯誤或者警告提示，不用每次執行eslint 來知道是否有問題。

•  1、visual code 在擴充套件中直接安裝eslint就可以使用了，載入就可以。
• 2、WebStorm上的使用

Preferences -> Languages & Frameworks -> JavaScript -> Code Quality Tools -> Eslint -> Enable (勾選) -> Apply -> OK

十二、規則表解釋

{
// 環境定義了預定義的全域性變數。
"env": {
//環境定義了預定義的全域性變數。更多在官網檢視
"browser": true,
"node": true,
"commonjs": true,
"amd": true,
"es6": true,
"mocha": true
},
// JavaScript 語言選項
"parserOptions": {
// ECMAScript 版本
"ecmaVersion": 6,
"sourceType": "module", //設定為 "script" (預設) 或 "module"（如果你的程式碼是 ECMAScript 模組)。
//想使用的額外的語言特性:
"ecmaFeatures": {
// 允許在全域性作用域下使用 return 語句
"globalReturn": true,
// impliedStric
"impliedStrict": true,
// 啟用 JSX
"jsx": true,
"modules": true
}
},
//-----讓eslint支援 JSX start
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
//-----讓eslint支援 JSX end

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

////////////////
// 可能的錯誤 //
////////////////

// 禁止條件表示式中出現賦值操作符
"no-cond-assign": 2,
// 禁用 console
"no-console": 0,
// 禁止在條件中使用常量表達式
// if (false) {
// doSomethingUnfinished();
// } //cuowu
"no-constant-condition": 2,
// 禁止在正則表示式中使用控制字元 ：new RegExp("\x1f")
"no-control-regex": 2,
// 陣列和物件鍵值對最後一個逗號， never引數：不能帶末尾的逗號, always引數：必須帶末尾的逗號，
// always-multiline：多行模式必須帶逗號，單行模式不能帶逗號
"comma-dangle": [1, "never"],
// 禁用 debugger
"no-debugger": 2,
// 禁止 function 定義中出現重名引數
"no-dupe-args": 2,
// 禁止物件字面量中出現重複的 key
"no-dupe-keys": 2,
// 禁止重複的 case 標籤
"no-duplicate-case": 2,
// 禁止空語句塊
"no-empty": 2,
// 禁止在正則表示式中使用空字符集 (/^abc[]/)
"no-empty-character-class": 2,
// 禁止對 catch 子句的引數重新賦值
"no-ex-assign": 2,
// 禁止不必要的布林轉換
"no-extra-boolean-cast": 2,
// 禁止不必要的括號 //(a * b) + c;//報錯
"no-extra-parens": 0,
// 禁止不必要的分號
"no-extra-semi": 2,
// 禁止對 function 宣告重新賦值
"no-func-assign": 2,
// 禁止在巢狀的塊中出現 function 或 var 宣告
"no-inner-declarations": [2, "functions"],
// 禁止 RegExp 建構函式中無效的正則表示式字串
"no-invalid-regexp": 2,
// 禁止在字串和註釋之外不規則的空白
"no-irregular-whitespace": 2,
// 禁止在 in 表示式中出現否定的左運算元
"no-negated-in-lhs": 2,
// 禁止把全域性物件 (Math 和 JSON) 作為函式呼叫 錯誤：var math = Math();
"no-obj-calls": 2,
// 禁止直接使用 Object.prototypes 的內建屬性
"no-prototype-builtins": 0,
// 禁止正則表示式字面量中出現多個空格
"no-regex-spaces": 2,
// 禁用稀疏陣列
"no-sparse-arrays": 2,
// 禁止出現令人困惑的多行表示式
"no-unexpected-multiline": 2,
// 禁止在return、throw、continue 和 break語句之後出現不可達程式碼
"no-unreachable": 2,
// 要求使用 isNaN() 檢查 NaN
"use-isnan": 2,
// 強制使用有效的 JSDoc 註釋
"valid-jsdoc": 1,
// 強制 typeof 表示式與有效的字串進行比較
// typeof foo === "undefimed" 錯誤
"valid-typeof": 2,

//////////////
// 最佳實踐 //
//////////////

// 定義物件的set存取器屬性時，強制定義get
"accessor-pairs": 2,
// 強制陣列方法的回撥函式中有 return 語句
"array-callback-return": 0,
// 強制把變數的使用限制在其定義的作用域範圍內
"block-scoped-var": 0,
// 限制圈複雜度，也就是類似if else能連續接多少個
"complexity": [2, 9],
// 要求 return 語句要麼總是指定返回的值，要麼不指定
"consistent-return": 0,
// 強制所有控制語句使用一致的括號風格
"curly": [2, "all"],
// switch 語句強制 default 分支，也可新增 // no default 註釋取消此次警告
"default-case": 2,
// 強制object.key 中 . 的位置，引數:
// property，'.'號應與屬性在同一行
// object, '.' 號應與物件名在同一行
"dot-location": [2, "property"],
// 強制使用.號取屬性
// 引數： allowKeywords：true 使用保留字做屬性名時，只能使用.方式取屬性
// false 使用保留字做屬性名時, 只能使用[]方式取屬性 e.g [2, {"allowKeywords": false}]
// allowPattern: 當屬性名匹配提供的正則表示式時，允許使用[]方式取值,否則只能用.號取值 e.g [2, {"allowPattern": "^[a-z]+(_[a-z]+)+$"}]
"dot-notation": [2, {
"allowKeywords": false
}],
// 使用 === 替代 == allow-null允許null和undefined==
"eqeqeq": [2, "allow-null"],
// 要求 for-in 迴圈中有一個 if 語句
"guard-for-in": 2,
// 禁用 alert、confirm 和 prompt
"no-alert": 0,
// 禁用 arguments.caller 或 arguments.callee
"no-caller": 2,
// 不允許在 case 子句中使用詞法宣告
"no-case-declarations": 2,
// 禁止除法操作符顯式的出現在正則表示式開始的位置
"no-div-regex": 2,
// 禁止 if 語句中有 return 之後有 else
"no-else-return": 0,
// 禁止出現空函式.如果一個函式包含了一條註釋，它將不會被認為有問題。
"no-empty-function": 2,
// 禁止使用空解構模式no-empty-pattern
"no-empty-pattern": 2,
// 禁止在沒有型別檢查操作符的情況下與 null 進行比較
"no-eq-null": 1,
// 禁用 eval()
"no-eval": 2,
// 禁止擴充套件原生型別
"no-extend-native": 2,
// 禁止不必要的 .bind() 呼叫
"no-extra-bind": 2,
// 禁用不必要的標籤
"no-extra-label:": 0,
// 禁止 case 語句落空
"no-fallthrough": 2,
// 禁止數字字面量中使用前導和末尾小數點
"no-floating-decimal": 2,
// 禁止使用短符號進行型別轉換(!!fOO)
"no-implicit-coercion": 0,
// 禁止在全域性範圍內使用 var 和命名的 function 宣告
"no-implicit-globals": 1,
// 禁止使用類似 eval() 的方法
"no-implied-eval": 2,
// 禁止 this 關鍵字出現在類和類物件之外
"no-invalid-this": 0,
// 禁用 __iterator__ 屬性
"no-iterator": 2,
// 禁用標籤語句
"no-labels": 2,
// 禁用不必要的巢狀塊
"no-lone-blocks": 2,
// 禁止在迴圈中出現 function 宣告和表示式
"no-loop-func": 1,
// 禁用魔術數字(3.14什麼的用常量代替)
"no-magic-numbers": [1, {
"ignore": [0, -1, 1]
}],
// 禁止使用多個空格
"no-multi-spaces": 2,
// 禁止使用多行字串，在 JavaScript 中，可以在新行之前使用斜線建立多行字串
"no-multi-str": 2,
// 禁止對原生物件賦值
"no-native-reassign": 2,
// 禁止在非賦值或條件語句中使用 new 操作符
"no-new": 2,
// 禁止對 Function 物件使用 new 操作符
"no-new-func": 0,
// 禁止對 String，Number 和 Boolean 使用 new 操作符
"no-new-wrappers": 2,
// 禁用八進位制字面量
"no-octal": 2,
// 禁止在字串中使用八進位制轉義序列
"no-octal-escape": 2,
// 不允許對 function 的引數進行重新賦值
"no-param-reassign": 0,
// 禁用 __proto__ 屬性
"no-proto": 2,
// 禁止使用 var 多次宣告同一變數
"no-redeclare": 2,
// 禁用指定的通過 require 載入的模組
"no-return-assign": 0,
// 禁止使用 javascript: url
"no-script-url": 0,
// 禁止自我賦值
"no-self-assign": 2,
// 禁止自身比較
"no-self-compare": 2,
// 禁用逗號操作符
"no-sequences": 2,
// 禁止丟擲非異常字面量
"no-throw-literal": 2,
// 禁用一成不變的迴圈條件
"no-unmodified-loop-condition": 2,
// 禁止出現未使用過的表示式
"no-unused-expressions": 0,
// 禁用未使用過的標籤
"no-unused-labels": 2,
// 禁止不必要的 .call() 和 .apply()
"no-useless-call": 2,
// 禁止不必要的字串字面量或模板字面量的連線
"no-useless-concat": 2,
// 禁用不必要的轉義字元
"no-useless-escape": 0,
// 禁用 void 操作符
"no-void": 0,
// 禁止在註釋中使用特定的警告術語
"no-warning-comments": 0,
// 禁用 with 語句
"no-with": 2,
// 強制在parseInt()使用基數引數
"radix": 2,
// 要求所有的 var 宣告出現在它們所在的作用域頂部
"vars-on-top": 0,
// 要求 IIFE 使用括號括起來
"wrap-iife": [2, "any"],
// 要求或禁止 “Yoda” 條件
"yoda": [2, "never"],
// 要求或禁止使用嚴格模式指令
"strict": 0,

//////////////
// 變數宣告 //
//////////////

// 要求或禁止 var 宣告中的初始化(初值)
"init-declarations": 0,
// 不允許 catch 子句的引數與外層作用域中的變數同名
"no-catch-shadow": 0,
// 禁止刪除變數
"no-delete-var": 2,
// 不允許標籤與變數同名
"no-label-var": 2,
// 禁用特定的全域性變數
"no-restricted-globals": 0,
// 禁止 var 宣告 與外層作用域的變數同名
"no-shadow": 0,
// 禁止覆蓋受限制的識別符號
"no-shadow-restricted-names": 2,
// 禁用未宣告的變數，除非它們在 /*global */ 註釋中被提到
"no-undef": 2,
// 禁止將變數初始化為 undefined
"no-undef-init": 2,
// 禁止將 undefined 作為識別符號
"no-undefined": 0,
// 禁止出現未使用過的變數
"no-unused-vars": [2, {
"vars": "all",
"args": "none"
}],
// 不允許在變數定義之前使用它們
"no-use-before-define": 0,

//////////////////////////
// Node.js and CommonJS //
//////////////////////////

// require return statements after callbacks
"callback-return": 0,
// 要求 require() 出現在頂層模組作用域中
"global-require": 1,
// 要求回撥函式中有容錯處理
"handle-callback-err": [2, "^(err|error)$"],
// 禁止混合常規 var 宣告和 require 呼叫
"no-mixed-requires": 0,
// 禁止呼叫 require 時使用 new 操作符
"no-new-require": 2,
// 禁止對 __dirname 和 __filename進行字串連線
"no-path-concat": 0,
// 禁用 process.env
"no-process-env": 0,
// 禁用 process.exit()
"no-process-exit": 0,
// 禁用同步方法
"no-sync": 0,

//////////////
// 風格指南 //
//////////////

// 指定陣列的元素之間要以空格隔開(, 後面)， never引數：[ 之前和 ] 之後不能帶空格，always引數：[ 之前和 ] 之後必須帶空格
"array-bracket-spacing": [2, "never"],
// 禁止或強制在單行程式碼塊中使用空格(禁用)
"block-spacing": [1, "never"],
//強制使用一致的縮排 第二個引數為 "tab" 時，會使用tab，
// if while function 後面的{必須與if在同一行，java風格。
"brace-style": [2, "1tbs", {
"allowSingleLine": true
}],
// 雙峰駝命名格式
"camelcase": 2,
// 控制逗號前後的空格
"comma-spacing": [2, {
"before": false,
"after": true
}],
// 控制逗號在行尾出現還是在行首出現 (預設行尾)
// http://eslint.org/docs/rules/comma-style
"comma-style": [2, "last"],
//"SwitchCase" (預設：0) 強制 switch 語句中的 case 子句的縮排水平
// 以方括號取物件屬性時，[ 後面和 ] 前面是否需要空格, 可選引數 never, always
"computed-property-spacing": [2, "never"],
// 用於指統一在回撥函式中指向this的變數名，箭頭函式中的this已經可以指向外層呼叫者，應該沒卵用了
// e.g [0,"that"] 指定只能 var that = this. that不能指向其他任何值，this也不能賦值給that以外的其他值
"consistent-this": [1, "that"],
// 強制使用命名的 function 表示式
"func-names": 0,
// 檔案末尾強制換行
"eol-last": 2,
"indent": [2, 4, {
"SwitchCase": 1
}],
// 強制在物件字面量的屬性中鍵和值之間使用一致的間距
"key-spacing": [2, {
"beforeColon": false,
"afterColon": true
}],
// 強制使用一致的換行風格
"linebreak-style": [1, "unix"],
// 要求在註釋周圍有空行 ( 要求在塊級註釋之前有一空行)
"lines-around-comment": [1, {
"beforeBlockComment": true
}],
// 強制一致地使用函式宣告或函式表示式，方法定義風格，引數：
// declaration: 強制使用方法宣告的方式，function f(){} e.g [2, "declaration"]
// expression：強制使用方法表示式的方式，var f = function() {} e.g [2, "expression"]
// allowArrowFunctions: declaration風格中允許箭頭函式。 e.g [2, "declaration", { "allowArrowFunctions": true }]
"func-style": 0,
// 強制回撥函式最大巢狀深度 5層
"max-nested-callbacks": [1, 5],
// 禁止使用指定的識別符號
"id-blacklist": 0,
// 強制識別符號的最新和最大長度
"id-length": 0,
// 要求識別符號匹配一個指定的正則表示式
"id-match": 0,
// 強制在 JSX 屬性中一致地使用雙引號或單引號
"jsx-quotes": 0,
// 強制在關鍵字前後使用一致的空格 (前後腰需要)
"keyword-spacing": 2,
// 強制一行的最大長度
"max-len": [1, 200],
// 強制最大行數
"max-lines": 0,
// 強制 function 定義中最多允許的引數數量
"max-params": [1, 7],
// 強制 function 塊最多允許的的語句數量
"max-statements": [1, 200],
// 強制每一行中所允許的最大語句數量
"max-statements-per-line": 0,
// 要求建構函式首字母大寫 （要求呼叫 new 操作符時有首字母大小的函式，允許呼叫首字母大寫的函式時沒有 new 操作符。）
"new-cap": [2, {
"newIsCap": true,
"capIsNew": false
}],
// 要求呼叫無參建構函式時有圓括號
"new-parens": 2,
// 要求或禁止 var 宣告語句後有一行空行
"newline-after-var": 0,
// 禁止使用 Array 建構函式
"no-array-constructor": 2,
// 禁用按位運算子
"no-bitwise": 0,
// 要求 return 語句之前有一空行
"newline-before-return": 0,
// 要求方法鏈中每個呼叫都有一個換行符
"newline-per-chained-call": 1,
// 禁用 continue 語句
"no-continue": 0,
// 禁止在程式碼行後使用內聯註釋
"no-inline-comments": 0,
// 禁止 if 作為唯一的語句出現在 else 語句中
"no-lonely-if": 0,
// 禁止混合使用不同的操作符
"no-mixed-operators": 0,
// 不允許空格和 tab 混合縮排
"no-mixed-spaces-and-tabs": 2,
// 不允許多個空行
"no-multiple-empty-lines": [2, {
"max": 2
}],
// 不允許否定的表示式
"no-negated-condition": 0,
// 不允許使用巢狀的三元表示式
"no-nested-ternary": 0,
// 禁止使用 Object 的建構函式
"no-new-object": 2,
// 禁止使用一元操作符 ++ 和 --
"no-plusplus": 0,
// 禁止使用特定的語法
"no-restricted-syntax": 0,
// 禁止 function 識別符號和括號之間出現空格
"no-spaced-func": 2,
// 不允許使用三元操作符
"no-ternary": 0,
// 禁用行尾空格
"no-trailing-spaces": 2,
// 禁止識別符號中有懸空下劃線_bar
"no-underscore-dangle": 0,
// 禁止可以在有更簡單的可替代的表示式時使用三元操作符
"no-unneeded-ternary": 2,
// 禁止屬性前有空白
"no-whitespace-before-property": 0,
// 強制花括號內換行符的一致性
"object-curly-newline": 0,
// 強制在花括號中使用一致的空格
"object-curly-spacing": 0,
// 強制將物件的屬性放在不同的行上
"object-property-newline": 0,
// 強制函式中的變數要麼一起宣告要麼分開宣告
"one-var": [2, {
"initialized": "never"
}],
// 要求或禁止在 var 宣告周圍換行
"one-var-declaration-per-line": 0,
// 要求或禁止在可能的情況下要求使用簡化的賦值操作符
"operator-assignment": 0,
// 強制操作符使用一致的換行符
"operator-linebreak": [2, "after", {
"overrides": {
"?": "before",
":": "before"
}
}],
// 要求或禁止塊內填充
"padded-blocks": 0,
// 要求物件字面量屬性名稱用引號括起來
"quote-props": 0,
// 強制使用一致的反勾號、雙引號或單引號
"quotes": [2, "double", "avoid-escape"],
// 要求使用 JSDoc 註釋
"require-jsdoc": 1,
// 要求或禁止使用分號而不是 ASI（這個才是控制行尾部分號的，）
"semi": [2, "always"],
// 強制分號之前和之後使用一致的空格
"semi-spacing": 0,
// 要求同一個宣告塊中的變數按順序排列
"sort-vars": 0,
// 強制在塊之前使用一致的空格
"space-before-blocks": [2, "always"],
// 強制在 function的左括號之前使用一致的空格
"space-before-function-paren": [0, "always"],
// 強制在圓括號內使用一致的空格
"space-in-parens": [2, "never"],
// 要求操作符周圍有空格
"space-infix-ops": 2,
// 強制在一元操作符前後使用一致的空格
"space-unary-ops": [2, {
"words": true,
"nonwords": false
}],
// 強制在註釋中 // 或 /* 使用一致的空格
"spaced-comment": [2, "always", {
"markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!"]
}],
// 要求或禁止 Unicode BOM
"unicode-bom": 0,
// 要求正則表示式被括號括起來
"wrap-regex": 0,

//////////////
// ES6.相關 //
//////////////

// 要求箭頭函式體使用大括號
"arrow-body-style": 2,
// 要求箭頭函式的引數使用圓括號
"arrow-parens": 2,
"arrow-spacing": [2, {
"before": true,
"after": true
}],
// 強制在子類建構函式中用super()呼叫父類建構函式，TypeScrip的編譯器也會提示
"constructor-super": 0,
// 強制 generator 函式中 * 號周圍使用一致的空格
"generator-star-spacing": [2, {
"before": true,
"after": true
}],
// 禁止修改類宣告的變數
"no-class-assign": 2,
// 不允許箭頭功能，在那裡他們可以混淆的比較
"no-confusing-arrow": 0,
// 禁止修改 const 宣告的變數
"no-const-assign": 2,
// 禁止類成員中出現重複的名稱
"no-dupe-class-members": 2,
// 不允許複製模組的進口
"no-duplicate-imports": 0,
// 禁止 Symbol 的建構函式
"no-new-symbol": 2,
// 允許指定模組載入時的進口
"no-restricted-imports": 0,
// 禁止在建構函式中，在呼叫 super() 之前使用 this 或 super
"no-this-before-super": 2,
// 禁止不必要的計算效能鍵物件的文字
"no-useless-computed-key": 0,
// 要求使用 let 或 const 而不是 var
"no-var": 0,
// 要求或禁止物件字面量中方法和屬性使用簡寫語法
"object-shorthand": 0,
// 要求使用箭頭函式作為回撥
"prefer-arrow-callback": 0,
// 要求使用 const 宣告那些聲明後不再被修改的變數
"prefer-const": 0,
// 要求在合適的地方使用 Reflect 方法
"prefer-reflect": 0,
// 要求使用擴充套件運算子而非 .apply()
"prefer-spread": 0,
// 要求使用模板字面量而非字串連線
"prefer-template": 0,
// Suggest using the rest parameters instead of arguments
"prefer-rest-params": 0,
// 要求generator 函式內有 yield
"require-yield": 0,
// enforce spacing between rest and spread operators and their expressions
"rest-spread-spacing": 0,
// 強制模組內的 import 排序
"sort-imports": 0,
// 要求或禁止模板字串中的嵌入表示式周圍空格的使用
"template-curly-spacing": 1,
// 強制在 yield* 表示式中 * 周圍使用空格
"yield-star-spacing": 2
}
}複製程式碼