ESLint

ESLint是一個用來識別 ECMAScript 而且按照規則給出報告的代碼檢測工具，使用它能夠避免低級錯誤和統一代碼的風格。ESLint被設計爲徹底可配置的，主要有兩種方式來配置ESLint：

• 在註釋中配置：使用JavaScript註釋直接把配置嵌入到JS文件中。
• 配置文件：使用下面任一的文件來爲所有的目錄和它的子目錄指定配置信息。
  • javascript：使用.eslintrc.js文件並導出一個包含配置的對象。
  • YAML：.eslintrc.yaml或者.eslintrc.yml
  • JSON：.eslintrc.json，而且此文件容許使用JS形式的註釋
  • 廢棄的用法：.eslintrc，此文件能夠是JSON或者YAML
  • package.json：在package.json文件中建立eslintConfig屬性，全部的配置包含在此屬性中。

這些文件的優先級則是按照以上出現的順序（.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json）。

能夠被配置的信息主要分爲3類：

• Environments：你的 javascript 腳步將要運行在什麼環境（如：nodejs，browser，commonjs等）中。
• Globals：執行代碼時腳步須要訪問的額外全局變量。
• Rules：開啓某些規則，也能夠設置規則的等級。

安裝

---

• 全局安裝

npm i -g eslint

• 局部安裝（推薦）

npm i -D eslint

安裝完畢後，接下來新建一個配置文件.eslintrc.js，或者使用以下的命令行來自動生成。

eslint --init

配置

---

指定執行環境

JavaScript 代碼能夠運行在瀏覽器或 nodejs 等環境中，每一個環境的全局變量都不盡相同（如 nodejs 中沒有 DOM 相關的全局變量）。在配置文件中能夠自由的指定執行環境。

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

全部的環境能夠在官網上查詢。

指定全局變量

能夠在配置文件或註釋中指定額外的全局變量，false代表變量只讀：

• 註釋：

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

• js 文件：

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

規則

在配置文件中能夠設置一些規則。

這些規則的等級有三種：

• "off" 或者 0：關閉規則。
• "warn" 或者 1：打開規則，而且做爲一個警告（不影響exit code）。
• "error" 或者 2：打開規則，而且做爲一個錯誤（exit code將會是1）。

例如：

• js 文件

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

• 註釋文件

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

也能夠在註釋中關閉全部或者某個規則：

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

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

具體的規則能夠在官網上找到，或者使用別人寫好的配置，例如eslint-config-airbnb。

使用方法

---

經過命令行工具來使用 eslint 。

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

除了使用命令行還能夠配合 webpack 或者配合編輯器的插件（如vscode-eslint）來使用