ESlint 配置從0到1 (一)

配置 ESlint 的兩種方式

• 配置註釋：經過在 js 文件中嵌入註釋的形式進行 ESlint 的配置；
• 配置文件：在當前工做目錄下使用一個 JS，JSON 或是 YAML文件來指定配置信息。這個文件能夠命名爲 .eslintrc.* ，或者是在 package.json 中 eslintConfig 屬性中配置。另外還能夠經過命令行指定配置。

配置 parser options

ESlint 默認解析 ES5 語法，經過配置 parser options，能夠覆蓋這個設置從而解析其餘 ES 版本 或者是 JSX 語法（注：支持 JSX 語法和支持 React 語法是兩個概念，使用 React 開發時推薦使用 eslint-plugin-react）。一樣，支持 ES6 語法和支持 ES6 中新增的數據類型好比 Set 等也略有不一樣，僅支持ES6語法可直接配置 {"parserOptions": {"ecmaVersion": 6}} ，若需支持新增的數據類型則配置爲 {"env": {"es6": true}}(自動支持ES6語法)。

parserOptions 可選的配置項有：

• ecmaVersion : 可配置爲 3，5（默認），6（2015），7（2017），8（2018），9（2019），10（2019）

• sourceType : 可配置爲 script 或 module

• ecmaFeatures : 用來配置一些語言其餘特性的對象

  • globalReturn : 是否容許 return 出如今全局做用域中
  • impliedStrict : 是否在全局打開嚴格模式
  • jsx : 是否容許 JSX 語法

配置 parser（解析器）

ESlint 默認使用Espree做爲解析器，也能夠指定知足如下條件的其餘解析器：

• 必須是一個被下載到本地的 npm 模塊
• 必須有 Esprima 兼容的接口
• 必須產生 Esprima 兼容的 tokens 和 AST

經常使用的可選項有：Esprima，Babel-ESlint，@typescript-eslint/parser

配置開發環境

env 決定了當前環境下可以使用的全局變量，它的可選項有：

• browser -瀏覽器全局對象
• node -Node.js 全局變量以及scoping
• commonjs -CommonJS 全局變量以及scoping
• shared-node-browser -Node.js 和瀏覽器公共的全局變量
• es6 -容許使用ES6中處理modules以外全部的新特性
• worker -web workers 的全局變量
• amd -引入 amd 規範中的 define 和 require
• mocha -引入Mocha中全部的全局變量
• jasmine -Jasmine v1.3 和 v2.0 中全部的全局變量
• jest -Jest 全局變量
• phantomjs -PhantomJS 全局變量 ...（還有不少，具體可查看官方文檔）

這些環境並非互斥的，你能夠一次定義多個，好比：

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

若是要使用一個插件中的環境，那要保證先將插件名定義的 plugins 數組中，好比：

{
  "plugins": ["example"]
  "env": {
    "browser": true,
    "node": true,
    "example/custom": true
  }
}
複製代碼

配置全局變量

若是在一個JS文件中使用到了這個文件內沒有定義的全局變量，ESlint 會進行報錯。要去掉這個報錯，能夠選擇在文件內部的註釋配置全局變量或是經過配置文件修改。

• 經過註釋配置：

/* global var1, var2 */
// 若要在當前文件修改var1值
/* global var1:writable, var2 */

複製代碼

• 經過配置文件：

{
  "globals": {
    "var1": "writable",
    "var2": "readonly"
  }
}
// 也能夠經過配置off去掉所有變量中某個變量的使用，好比在 es6 環境下去掉 Promise 的使用
{
  "globals": {
      "Promise": "off"
  }
}
複製代碼

配置規則

ESlint 提供了大量的規則，咱們一樣能夠經過使用註釋配置或配置文件來修改它們。要修改一個規則，就必須將將它的ID改成如下可選值：

• "off" 或 0 - 關閉這個規則檢查
• "warn" 或 1 - 開啓這個規則檢查並提示（不影響退出狀態）
• "error" 或 2 - 開啓規則檢查並報錯

經過配置文件修改：

// 此處注意 quotes 規則加入了附加選項，故用數組表示
/* eslint quotes: ["error", "double"], curly: 2 */
// 使用 eslint 插件中定義的規則
/* eslint "plugin1/rule1": "error" */
複製代碼

經過配置文件修改；

{
  "rules": {
    "eqeqeq": "off",
    "curly": "error",
    "quotes": ["error", "double"]
  }
}
// 使用插件中的規則
{
  "plugins": [
    "plugin1"
  ],
  "rules": {
    "eqeqeq": "off",
    "curly": "error",
    "quotes": ["error", "double"],
    "plugin1/rule1": "error"
  }
}
複製代碼

經過行內註釋屏蔽規則

若是要在代碼中暫時屏蔽掉某個規則，能夠在代碼中添加以下注釋:

// 屏蔽全部規則
/* eslint-disable */
alert('foo');
/* eslint-disable */

// 屏蔽特定規則
/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-disable no-alert, no-console */

// 只針對某一行作屏蔽（塊級註釋和行內註釋都可）
alert('foo'); // eslint-disable-line
/* eslint-disable-next-line */
alert('foo');
foo() // eslint-disable-line example/rule-name
複製代碼

對一組文件屏蔽規則

經過配置 overrides 屬性能夠對一組文件屏蔽某些規則：

{
  "rules": {...},
  "overrides": [
    {
      "files": ["*-test.js","*.spec.js"],
      "rules": {
        "no-unused-expressions": "off"
      }
    }
  ]
}
複製代碼

本系列文章主要是將ESlint的配置文檔翻譯組織了一遍，以供本身查閱，源文檔 Configuring ESlint。