ESLint是一個(gè)用來(lái)識(shí)別 ECMAScript 并且按照規(guī)則給出報(bào)告的代碼檢測(cè)工具，使用它可以避免低級(jí)錯(cuò)誤和統(tǒng)一代碼的風(fēng)格。ESLint被設(shè)計(jì)為完全可配置的，主要有兩種方式來(lái)配置ESLint：

• 在注釋中配置：使用JavaScript注釋直接把配置嵌入到JS文件中。
• 配置文件：使用下面任一的文件來(lái)為全部的目錄和它的子目錄指定配置信息。
  • javascript：使用.eslintrc.js文件并導(dǎo)出一個(gè)包含配置的對(duì)象。
  • YAML：.eslintrc.yaml或者.eslintrc.yml
  • JSON：.eslintrc.json，并且此文件允許使用JS形式的注釋
  • 廢棄的用法：.eslintrc，此文件可以是JSON或者YAML
  • package.json：在package.json文件中創(chuàng)建eslintConfig屬性，所有的配置包含在此屬性中。

這些文件的優(yōu)先級(jí)則是按照以上出現(xiàn)的順序（.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json）。

可以被配置的信息主要分為3類(lèi)：

• Environments：你的 javascript 腳步將要運(yùn)行在什么環(huán)境（如：nodejs，browser，commonjs等）中。
• Globals：執(zhí)行代碼時(shí)腳步需要訪問(wèn)的額外全局變量。
• Rules：開(kāi)啟某些規(guī)則，也可以設(shè)置規(guī)則的等級(jí)。

安裝

• 全局安裝

npm i -g eslint

• 局部安裝（推薦）

npm i -D eslint

安裝完畢后，接下來(lái)新建一個(gè)配置文件.eslintrc.js，或者使用如下的命令行來(lái)自動(dòng)生成。

eslint --init

配置

指定執(zhí)行環(huán)境

JavaScript 代碼可以運(yùn)行在瀏覽器或 nodejs 等環(huán)境中，每個(gè)環(huán)境的全局變量都不盡相同（如 nodejs 中沒(méi)有 DOM 相關(guān)的全局變量）。在配置文件中可以自由的指定執(zhí)行環(huán)境。

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    node: true,
  },
};

所有的環(huán)境可以在官網(wǎng)上查詢(xún)。

指定全局變量

可以在配置文件或注釋中指定額外的全局變量，false表明變量只讀：

• 使用注釋來(lái)配置：

/* global var1, var2 */
/* global var1:false, var2:false */

• 使用配置文件來(lái)配置：

// .eslintrc.js
module.exports = {
  globals: {
    var1: true,
    var2: true,
  },
};

規(guī)則

在配置文件中可以設(shè)置一些規(guī)則。

這些規(guī)則的等級(jí)有三種：

• "off" 或者 0：關(guān)閉規(guī)則。
• "warn" 或者 1：打開(kāi)規(guī)則，并且作為一個(gè)警告（不影響exit code）。
• "error" 或者 2：打開(kāi)規(guī)則，并且作為一個(gè)錯(cuò)誤（exit code將會(huì)是1）。

例如：

• 使用配置文件來(lái)配置

// .eslintrc.js
module.exports = {
  rules: {
    eqeqeq: 'off',
    curly: 'error',
  },
};

• 使用注釋來(lái)配置

/* eslint eqeqeq: "off", curly: "error" */
/* eslint eqeqeq: 0, curly: 2 */

也可以在注釋中關(guān)閉所有或者某個(gè)規(guī)則：

/* eslint-disable */
/* eslint-enable */

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

具體的規(guī)則可以在官網(wǎng)上找到，或者使用別人寫(xiě)好的配置，例如eslint-config-airbnb。

使用方法

命令行

通過(guò)命令行工具來(lái)使用 eslint 。

eslint [options] file.js [file.js] [dir]

編輯器

配合相應(yīng)的插件，在vscode中直接顯示錯(cuò)誤和警告。

lint

除了上述，還可以配合gulp、webpack等工具來(lái)使用。