ESLint - 簡介

dav2100發表於2021-09-09

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.jsmodule.exports = {
  env: {
    browser: true,
    node: true,
  },
};

所有的環境可以在上查詢。

指定全域性變數

可以在配置檔案或註釋中指定額外的全域性變數,false表明變數只讀:

  • 使用註釋來配置:

/* global var1, var2 */
/* global var1:false, var2:false */
  • 使用配置檔案來配置:

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

規則

在配置檔案中可以設定一些規則。

這些規則的等級有三種:

  • "off" 或者 0:關閉規則。

  • "warn" 或者 1:開啟規則,並且作為一個警告(不影響exit code)。

  • "error" 或者 2:開啟規則,並且作為一個錯誤(exit code將會是1)。

例如:

  • 使用配置檔案來配置

// .eslintrc.jsmodule.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 。

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

編輯器

配合相應的,在中直接顯示錯誤和警告。

圖片描述

lint

除了上述,還可以配合、等工具來使用。



作者:給我一炷香的時間
連結:
來源:簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/4479/viewspace-2802544/,如需轉載,請註明出處,否則將追究法律責任。