gitlub地址https://github.com/CodeMonkeyLin/eslint-demo

ESLint

它被設(shè)計(jì)的容易拓展、擁有大量的自定義規(guī)則、容易的通過插件來安裝。它給出準(zhǔn)確的輸出，而且包括規(guī)則名，這樣可以知道哪個(gè)規(guī)則造成了錯(cuò)誤。

ESLint文檔多少有些混亂。規(guī)則容易查找，以及被分為邏輯組，但是配置指南在有些地方容易弄混。然而它可以在一個(gè)地方提供鏈接去編輯集成、插件和樣例。

優(yōu)點(diǎn)

• 靈活：任何規(guī)則都可以開啟閉合，以及有些規(guī)則有些額外配置
• 很容易拓展和有需要可用插件
• 容易理解產(chǎn)出
• 包含了在其他檢查器中不可用的規(guī)則，使得ESLint在錯(cuò)誤檢查上更有用
• 支持ES6，支持JSX的工具
• 支持自定義報(bào)告

缺點(diǎn)

• 需要一些配置
• 速度慢

JSCS已經(jīng)合并到ESlint

ESLint

ESLint是JavaScript的linting實(shí)用程序。

ESLint不依賴于特定的編碼約定，用戶也可以自由地啟用或禁用各個(gè)編碼約定。從這個(gè)意義上講，它的一個(gè)主要特點(diǎn)是其高度可定制性。

用戶可以通過定義原始規(guī)則來靈活地設(shè)置編碼標(biāo)準(zhǔn)，這些規(guī)則是ESLint中默認(rèn)可用的編碼規(guī)則。此外，第三方共享的著名編碼約定，例如“Google JavaScript Style Guide”或“Airbnb JavaScript Style Guide”也可以重復(fù)使用。

您甚至可以在遵循這些編碼約定的同時(shí)啟用/禁用特定文件的特定規(guī)則。

如果您不知道要開始的設(shè)置，可以參考ESLint官方提供的“ 入門 ”指南，以使用建議的編碼約定。

核心概念：

• 配置文件：

  .eslintrc，.eslintrc.js，.eslintrc.yml

• Rules：

  • “off” 或 0 - 關(guān)閉規(guī)則
  • “warn” 或 1 - 開啟規(guī)則，使用警告級(jí)別的錯(cuò)誤：warn (不會(huì)導(dǎo)致程序退出)
  • “error” 或 2 - 開啟規(guī)則，使用錯(cuò)誤級(jí)別的錯(cuò)誤：error (當(dāng)被觸發(fā)的時(shí)候，程序會(huì)退出)

  看一個(gè)例子：

  {
      "rules": {
          "semi": ["error", "never"],
          "quotes": ["error", "single"]
      }
  }
  

  也可以寫成：

  {
      "rules": {
          "semi": [2, "never"],
          "quotes": [2, "single"]
      }
  }
  

• Extends：

  使用別人提供的包， 如google

  { 
      "extends"："google"，
  }
  

  通過使用上述說明，用戶可以輕松使用Google JavaScript樣式指南中的編碼約定，而無需從頭開始編寫設(shè)置。

• Plugins:

  ESLint提供的默認(rèn)規(guī)則涵蓋了基本規(guī)則，但JavaScript可以使用的范圍非常廣泛。因此，您可能希望規(guī)則不在默認(rèn)規(guī)則中。在這種情況下，可以在ESLint中開發(fā)自己的獨(dú)立規(guī)則。為了讓第三方開發(fā)自己的規(guī)則，ESLint允許使用插件。如果你在npm中搜索eslint-plugin- *，你可以找到第三方提供的大量自定義插件。

  如果ESLint的默認(rèn)規(guī)則未提供您要使用的規(guī)則，則建議您查找插件。

  與可共享配置類似，它很容易設(shè)置。例如，如果要對(duì)React代碼執(zhí)行靜態(tài)分析，可以安裝名為eslint-plugin-react的插件，并使用以下設(shè)置來執(zhí)行React語法特有的靜態(tài)分析。

  { 
      "extends": "google"，
      "plugins": [ 
          "react" 
      ]，
      "rules"": { 
          "semi": ["error", "never"],
          "quotes": ["error", "single"]
      } 
  }
  

起步與安裝

1. 在項(xiàng)目中去使用

   // npm init 指令會(huì)在項(xiàng)目根目錄下生成 package.json 文件。
   npm init
   
   // --save-dev 會(huì)把 eslint 安裝到 package.json 文件中的 devDependencies 屬性中，意思是只是開發(fā)階段用到這個(gè)包，上線時(shí)就不需要這個(gè)包了。
   npm install eslint --save-dev
   

   • 使用npm run

   新增package.json 腳本，或者使用 npx命令

"scripts": {
"lint": "eslint src",
"lint:create": "eslint --init"
}

然后使用`run`命令：

```bash
npm run lint

• 直接使用npx命令：

npx eslint --init

// 或者
./node_modules/.bin/eslint --init

2. 在全局使用

   npm install -g eslint
   

ESLint初始化

配置方法使用 eslint --init方法

? npx eslint --init
? How would you like to use ESLint? (Use arrow keys)
  To check syntax only 
? To check syntax and find problems 
  To check syntax, find problems, and enforce code style 
  
? What type of modules does your project use? (Use arrow keys)
? JavaScript modules (import/export) 
  CommonJS (require/exports) 
  None of these 
  
// 這里可以針對(duì)你的開發(fā)項(xiàng)目進(jìn)行配置
? Which framework does your project use? 
  React 
  Vue.js 
? None of these 

// 可以配置代碼運(yùn)行的地方，是瀏覽器還是Node環(huán)境？
? Where does your code run? 
?? Browser
 ? Node
 
// 最張?jiān)谀睦锞彺?? What format do you want your config file to be in? (Use arrow keys)
? JavaScript 
  YAML 
  JSON 

// 成功創(chuàng)建了配置文件
? What format do you want your config file to be in? JavaScript
Successfully created .eslintrc.js file in /Users/itheima/Downloads/Demo

配置文件.eslintrc.js：

廢棄的用法：.eslintrc，eslint使用配置的順序：.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json

.eslintrc.js文件：

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
    }
};

再來看看，yaml文件配置：

env:
  browser: true
  es6: true
  node: true
extends: 'eslint:recommended'
globals:
  Atomics: readonly
  SharedArrayBuffer: readonly
parserOptions:
  ecmaVersion: 2018
  sourceType: module
rules: {}

該文件導(dǎo)出一個(gè)對(duì)象，對(duì)象包含屬性 env、extends、parserOptions、plugins、rules 五個(gè)屬性：

• env：指定腳本的運(yùn)行環(huán)境。每種環(huán)境都有一組特定的預(yù)定義全局變量，（如：nodejs，browser，commonjs等）中。

• parserOptions：用于指定想要支持的JavaScript語言選項(xiàng)

  • ecmaVersion - 默認(rèn)設(shè)置為3，5（默認(rèn)）， 你可以使用 6、7、8 或 9 來指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本號(hào)指定為 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）

  • sourceType - 設(shè)置為 "script" (默認(rèn)) 或 "module"（如果你的代碼是 ECMAScript 模塊)。

  • ecmaFeatures
    

    - 這是個(gè)對(duì)象，表示你想使用的額外的語言特性:

    • globalReturn - 允許在全局作用域下使用 return 語句
    • impliedStrict - 啟用全局 strict mode (如果 ecmaVersion 是 5 或更高)
    • jsx - 啟用 JSX

• globals：執(zhí)行代碼時(shí)腳步需要訪問的額外全局變量。

• rules：開啟某些規(guī)則，也可以設(shè)置規(guī)則的等級(jí)。

• extends: 對(duì)默認(rèn)規(guī)則進(jìn)行擴(kuò)展，可以使用Airbnb，或者Standard規(guī)則。

.eslintignore

可以在項(xiàng)目根目錄創(chuàng)建，告訴ESLint忽略某些文件或者目錄。相當(dāng)于.gitignore都是純文本文件。
例如

# 注釋，忽略文件node_modules**/.jsbuild

常見的eslintignore內(nèi)容：

node_modules/*
**/node_modules/*
dist/*
/build/**
/coverage/**
/docs/**
/jsdoc/**
/templates/**
/tests/bench/**
/tests/fixtures/**
/tests/performance/**
/tmp/**
/lib/rules/utils/unicode/is-combining-character.js
test.js
!.eslintrc.js

ESLint的使用方法

• 本地使用方法：

  如果你想讓 ESLint 成為你項(xiàng)目構(gòu)建系統(tǒng)的一部分，我們建議在本地安裝。你可以使用 npm：

  $ npm install eslint --save-dev
  

  緊接著你應(yīng)該設(shè)置一個(gè)配置文件：

  $ ./node_modules/.bin/eslint --init
  

  之后，你可以在你項(xiàng)目根目錄運(yùn)行 ESLint：

  $ ./node_modules/.bin/eslint yourfile.js
  

  使用本地安裝的 ESLint 時(shí)，你使用的任何插件或可分享的配置也都必須在本地安裝。

• 全局使用

  如果你想使 ESLint 適用于你所有的項(xiàng)目，我們建議你全局安裝 ESLint。你可以使用 npm：

  $ npm install -g eslint
  

  緊接著你應(yīng)該設(shè)置一個(gè)配置文件：

  $ eslint --init
  

  之后，你可以在任何文件或目錄運(yùn)行 ESLint：

  $ eslint yourfile.js
  

常用ESlint配置

ESLint的規(guī)范：

Standard: https://github.com/standard/eslint-config-standard

具體地址：eslintrc.json

Airbnb: https://github.com/airbnb/javascript

1. comma逗號(hào)

   rules: {
    "comma-dangle": ["error", "never"],
   }
   

   Bad:

   var foo = {
    a: '123',
    b: '321', // wrong error
   }
   

   Right:

   var foo = {
    a: '123',
    b: '321'
   }
   

2. quotes引號(hào)

3. semi分號(hào)

4. 空行

5. 駝峰命名

6. 日志輸出

7. 強(qiáng)等判斷

8. 冗余的變量

9. 空格

   • 關(guān)鍵字后的空格
   • 函數(shù)名后的空格
   • 縮進(jìn)

在IDE中的配置

配置文件：

  "eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true,
  "eslint.validate": [
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ],
  "eslint.options": {
    "plugins": ["html"]
  },

快速修復(fù)配置：

打開 "editor.formatOnSave": true并且要打開eslint.validate如上面的配置，或者在UI界面里面設(shè)置。

[圖片上傳失敗...(image-4d8bb7-1591250318526)]

React中的配置資料

Configure ESLint, Prettier, and Flow in VS Code for React Development

React開發(fā)團(tuán)隊(duì)如何使用ESLint

完整的ESLint文件配置屬性的解釋

/*
 * ESLint的JSON文件是允許JavaScript注釋的，但在gist里顯示效果不好，所以我把.json文件后綴改為了.js
 */

/*
 * ESLint 配置文件優(yōu)先級(jí)：
 * .eslintrc.js(輸出一個(gè)配置對(duì)象)
 * .eslintrc.yaml
 * .eslintrc.yml
 * .eslintrc.json（ESLint的JSON文件允許JavaScript風(fēng)格的注釋）
 * .eslintrc（可以是JSON也可以是YAML）
 *  package.json（在package.json里創(chuàng)建一個(gè)eslintConfig屬性，在那里定義你的配置）
 */

/*
 * 你可以通過在項(xiàng)目根目錄創(chuàng)建一個(gè).eslintignore文件告訴ESLint去忽略特定的文件和目錄
 * .eslintignore文件是一個(gè)純文本文件，其中的每一行都是一個(gè)glob模式表明哪些路徑應(yīng)該忽略檢測
 */

{
  //ESLint默認(rèn)使用Espree作為其解析器
  //同時(shí)babel-eslint也是用得最多的解析器
  "parser": "espree",

  //parser解析代碼時(shí)的參數(shù)
  "parserOption": {
    //指定要使用的ECMAScript版本，默認(rèn)值5
    "ecmaVersion": 5,
    //設(shè)置為script(默認(rèn))或module（如果你的代碼是ECMAScript模塊)
    "sourceType": "script",
    //這是個(gè)對(duì)象，表示你想使用的額外的語言特性,所有選項(xiàng)默認(rèn)都是false
    "ecmafeatures": {
      //允許在全局作用域下使用return語句
      "globalReturn": false,
      //啟用全局strict模式（嚴(yán)格模式）
      "impliedStrict": false,
      //啟用JSX
      "jsx": false,
      //啟用對(duì)實(shí)驗(yàn)性的objectRest/spreadProperties的支持
      "experimentalObjectRestSpread": false
    }
  },

  //指定環(huán)境，每個(gè)環(huán)境都有自己預(yù)定義的全局變量，可以同時(shí)指定多個(gè)環(huán)境，不矛盾
  "env": {
    //效果同配置項(xiàng)ecmaVersion一樣
    "es6": true,
    "browser": true,
    "node": true,
    "commonjs": false,
    "mocha": true,
    "jquery": true,
     //如果你想使用來自某個(gè)插件的環(huán)境時(shí)，確保在plugins數(shù)組里指定插件名
     //格式為：插件名/環(huán)境名稱（插件名不帶前綴）
    "react/node": true
  },

  //指定環(huán)境為我們提供了預(yù)置的全局變量
  //對(duì)于那些我們自定義的全局變量，可以用globals指定
  //設(shè)置每個(gè)變量等于true允許變量被重寫，或false不允許被重寫
  "globals": {
    "globalVar1": true,
    "globalVar2": false
  },

  //ESLint支持使用第三方插件
  //在使用插件之前，你必須使用npm安裝它
  //全局安裝的ESLint只能使用全局安裝的插件
  //本地安裝的ESLint不僅可以使用本地安裝的插件還可以使用全局安裝的插件
  //plugin與extend的區(qū)別：extend提供的是eslint現(xiàn)有規(guī)則的一系列預(yù)設(shè)
  //而plugin則提供了除預(yù)設(shè)之外的自定義規(guī)則，當(dāng)你在eslint的規(guī)則里找不到合適的的時(shí)候
  //就可以借用插件來實(shí)現(xiàn)了
  "plugins": [
    "eslint-plugin-airbnb",
    //插件名稱可以省略eslint-plugin-前綴
    "react"
  ],

  //具體規(guī)則配置
  //off或0--關(guān)閉規(guī)則
  //warn或1--開啟規(guī)則，警告級(jí)別(不會(huì)導(dǎo)致程序退出)
  //error或2--開啟規(guī)則，錯(cuò)誤級(jí)別(當(dāng)被觸發(fā)的時(shí)候，程序會(huì)退出)
  "rules": {
    "eqeqeq": "warn",
    //你也可以使用對(duì)應(yīng)的數(shù)字定義規(guī)則嚴(yán)重程度
    "curly": 2,
    //如果某條規(guī)則有額外的選項(xiàng)，你可以使用數(shù)組字面量指定它們
    //選項(xiàng)可以是字符串，也可以是對(duì)象
    "quotes": ["error", "double"],
    "one-var": ["error", {
      "var": "always",
      "let": "never",
      "const": "never"
    }],
    //配置插件提供的自定義規(guī)則的時(shí)候，格式為：不帶前綴插件名/規(guī)則ID
    "react/curly": "error"
  },

  //ESLint支持在配置文件添加共享設(shè)置
  //你可以添加settings對(duì)象到配置文件，它將提供給每一個(gè)將被執(zhí)行的規(guī)則
  //如果你想添加的自定義規(guī)則而且使它們可以訪問到相同的信息，這將會(huì)很有用，并且很容易配置
  "settings": {
    "sharedData": "Hello"
  },

  //Eslint檢測配置文件步驟：
  //1.在要檢測的文件同一目錄里尋找.eslintrc.*和package.json
  //2.緊接著在父級(jí)目錄里尋找，一直到文件系統(tǒng)的根目錄
  //3.如果在前兩步發(fā)現(xiàn)有root：true的配置，停止在父級(jí)目錄中尋找.eslintrc
  //4.如果以上步驟都沒有找到，則回退到用戶主目錄~/.eslintrc中自定義的默認(rèn)配置
  "root": true,

  //extends屬性值可以是一個(gè)字符串或字符串?dāng)?shù)組
  //數(shù)組中每個(gè)配置項(xiàng)繼承它前面的配置
  //可選的配置項(xiàng)如下
  //1.字符串eslint：recommended，該配置項(xiàng)啟用一系列核心規(guī)則，這些規(guī)則報(bào)告一些常見問題，即在(規(guī)則頁面)中打勾的規(guī)則
  //2.一個(gè)可以輸出配置對(duì)象的可共享配置包，如eslint-config-standard
    //可共享配置包是一個(gè)導(dǎo)出配置對(duì)象的簡單的npm包，包名稱以eslint-config-開頭，使用前要安裝
    //extends屬性值可以省略包名的前綴eslint-config-
  //3.一個(gè)輸出配置規(guī)則的插件包，如eslint-plugin-react
    //一些插件也可以輸出一個(gè)或多個(gè)命名的配置
    //extends屬性值為，plugin：包名/配置名稱
  //4.一個(gè)指向配置文件的相對(duì)路徑或絕對(duì)路徑
  //5.字符串eslint：all，啟用當(dāng)前安裝的ESLint中所有的核心規(guī)則
    //該配置不推薦在產(chǎn)品中使用，因?yàn)樗S著ESLint版本進(jìn)行更改。使用的話，請自己承擔(dān)風(fēng)險(xiǎn)
  "extends": [
    "eslint:recommended",
    "standard",
    "plugin:react/recommended",
    "./node_modules/coding-standard/.eslintrc-es6",
    "eslint:all"
  ]
}