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

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

1、關於eslint

ESLint屬於一種QA工具,是一個ECMAScript/JavaScript語法規則和代碼風格的檢查工具,能夠用來保證寫出語法正確、風格統一的代碼。javascript

ESLint旨在徹底可配置,它的目標是提供一個插件化的javascript代碼檢測工具。這意味着您能夠關閉每一個規則,只能使用基本語法驗證,或者混合並匹配捆綁的規則和自定義規則,使ESLint完美的適用於您的項目。java

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

能夠查看官網: eslint.org/

2、爲何要用eslint呢?

  1. 多人蔘與的項目中,常常會多人交叉編輯多個文件。這就致使了各個文件中充斥着各類編碼風格。最多見的就有:使用空格仍是Tab一次縮進是2個空格仍是4個空格仍是8個空格字符串使用單引號仍是雙引號JavaScript一行結尾到底要不要加分號關鍵字先後要不要加空格等等等等不一樣風格混雜在一塊兒極大的影響代碼的可讀性與質量。不一樣風格混雜在一塊兒極大的影響代碼的可讀性與質量。所以在多人項目中維護一致的代碼風格就很重要了。
  2.  JavaScript咱們知道這個語言比較靈活,除了基本的語法錯誤能在程序一啓動的時候被檢測到以外,不少隱含的錯誤都是在運行的時候才忽然地蹦出來。除非你的程序有着100%的測試覆蓋率,不然說不定哪天就會由於一個xxx is undefined而致使程序崩潰,而爲了不這樣的錯誤可能你只須要在提交代碼的時候用工具靜態分析一下,僅此而已。 ESLint是一個插件化的javascript代碼檢測工具,它能夠用於檢查常見的JavaScript代碼錯誤,也能夠進行代碼風格檢查,這樣咱們就能夠根據本身的喜愛指定一套ESLint配置,而後應用到所編寫的項目上,從而實現輔助編碼規範的執行,有效控制項目代碼的質量。 那麼,那如今有這麼多的靜態代碼檢測工具,咱們爲何要選擇Eslint呢? 主要緣由是他的靈活性比較高,易於擴展,因此有很是良好的生態,而且主流的編輯器均可以集成Eslint。

3、eslint有如下幾個特性?

  • 一、全部東西都是能夠插拔的。你能夠調用任意的rule api或者formatter api 去打包或者定義rule or formatter。 
  • 二、任意的rule 都是獨立的 
  • 三、沒有特定的coding style,你能夠本身配置


4、安裝

要在 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,在你配置中使用的任何插件都必須是全局安裝的。

5、關於eslint的配置

ESLint的設計是徹底可配置的,這意味着您能夠關閉每一個規則並僅經過基本的語法驗證來運行,或者將捆綁規則和自定義規則進行混合匹配,以使ESLint完美適合您的項目。

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

一、配置註釋 - 使用JavaScript註釋將配置信息直接嵌入到文件中。
react

二、配置文件 - 使用下面任一的文件來爲所有的目錄和它的子目錄指定配置信息。jquery

  • 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)。  webpack

從最高優先級到最低優先級的完整配置層次以下:git

 一、內聯配置 /*eslint-disable*/ /*eslint-enable*/ /*global*/ /*eslint*/ /*eslint-env*/ es6

二、命令行選項: --global --rule --env -c, --config web

三、項目級配置: .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 } }


6、規則

  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)。

例子:

 一、要使用配置註釋配置文件內部的規則,請使用如下格式的註釋:

  •  A、 /* eslint eqeqeq: "off", curly: "error" */ 在這個例子中,eqeqeq它被關閉並curly做爲錯誤打開。
  •  B、您也可使用等同於規則嚴重性的數字:/* eslint eqeqeq: 0, curly: 2 */ 
  • C、若是規則具備其餘選項,則可使用數組文字語法來指定它們,例如: /* eslint quotes: ["error", "double"], curly: 2 */ 

二、要在配置文件內部配置規則,請使用該rules鍵以及錯誤級別以及要使用的任何選項。

例如: 

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

 

 三、在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在內部僅使用前綴名來查找規則。 

四、經過內嵌評論禁用規則

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

五、使用配置文件  按圖解釋:

  •  一、"parserOptions"屬性配置解析器內容。其中「ecmaVersion」屬性配置JS的語法版本。「sourceType」屬性配置JS文件加載模式,值爲「script」或「module」。「ecmaFeatures」屬性配置想要使用的額外語言特性。 
  • 二、「env」屬性配置了預約義的全局環境。咱們當前開啓了「es6」、"node"、"amd"三個環境。 
  • 三、"plugins"屬性配置須要加載的第三方插件。這裏咱們須要先安裝對應插件才能使用。 四、「globals」屬性定義了全局變量集合,包含在這個集合中的屬性都會被工具認爲是全局變量,no-undef 規則就不會發出警告。
  • 五、"extends"屬性配置基礎規則,「rules」屬性中配置的規則都是基於這個規則之上配置的。 
  • 六、"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 

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

7、基本使用案例


根據案例來一步一步 看是怎麼使用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規則,會出現如此的錯誤。

如何不出現這個錯誤呢?

  • 一、將代碼中的console語句刪除,
  • 二、在.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-enableeslint-disable備註來禁用對某一段代碼的檢查,可是稍不當心少寫了一個eslint-disable就可能會致使後面全部文件的檢查都被禁用,因此我並不推薦使用。

8、使用共享的配置文件

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已經生效了。

9、忽略文件

咱們的整個項目中,有一些文件是不須要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/* 

 一、您能夠經過提供不一樣文件的路徑來覆蓋此行爲。--ignore-path

 

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

 二、--no-ignore 禁用從文件的排除.eslintignore,--ignore-path--ignore-pattern 

eslint --no-ignore file.js複製代碼

 好比,你已經在忽略文件.eslintignore中忽略了某文件,可是你用在命令行中執行了 eslint 該文件,則爲警告提示,您可使用--no-ignore忽略使用忽略規則。

 三、在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"]}
複製代碼

10、Webpack環境中使用ESLint 

  • 一、在webpack配置中使用eslint加載器了。 

    loaders: [
    {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loader: 'react-hot!babel'
    },
    {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'eslint-loader'
    }
    ]
    } 複製代碼
  • 二、也能夠建立文件.eslintrc 並引入 webpack.config.js 

    eslint:{ 
    configFile: './.eslintrc' 
    },複製代碼
  •  三、使用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'
    }
    ]
    } 複製代碼

11、編輯器上使用

咱們用編輯器上安裝eslint集成,能夠在編寫代碼時,就會出現錯誤或者警告提示,不用每次執行eslint 來知道是否有問題。
  •  一、visual code 在擴展中直接安裝eslint就可使用了,加載就能夠。


  • 二、WebStorm上的使用


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


12、規則表解釋

{
// 環境定義了預約義的全局變量。
"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、continuebreak語句以後出現不可達代碼
"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
}
}複製代碼
相關文章
相關標籤/搜索