ESLint - 簡介

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

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

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

可以被配置的信息主要分為3類:

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

安裝


  • 全局安裝
npm i -g eslint
  • 局部安裝(推薦)
npm i -D eslint

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

eslint --init

配置


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

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

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

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

指定全局變量

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

  • 使用注釋來配置:
/* global var1, var2 */
/* global var1:false, var2:false */
  • 使用配置文件來配置:
// .eslintrc.js
module.exports = {
  globals: {
    var1: true,
    var2: true,
  },
};

規(guī)則

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

這些規(guī)則的等級有三種:

  • "off" 或者 0:關(guān)閉規(guī)則。
  • "warn" 或者 1:打開規(guī)則,并且作為一個警告(不影響exit code)。
  • "error" 或者 2:打開規(guī)則,并且作為一個錯誤(exit code將會是1)。

例如:

  • 使用配置文件來配置
// .eslintrc.js
module.exports = {
  rules: {
    eqeqeq: 'off',
    curly: 'error',
  },
};
  • 使用注釋來配置
/* eslint eqeqeq: "off", curly: "error" */
/* eslint eqeqeq: 0, curly: 2 */

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

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

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

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

使用方法


命令行

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

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

編輯器

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

lint

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ESLint 配置 ESlint 被設(shè)計(jì)為完全可配置的,這意味著你可以關(guān)閉每一個規(guī)則而只運(yùn)行基本語法驗(yàn)證,或混合和...
    靜默虛空閱讀 41,834評論 3 14
  • EsLint入門學(xué)習(xí)整理 這兩天因?yàn)楣疽?,就對ESLint進(jìn)行了初步的了解,網(wǎng)上的內(nèi)容基本上都差不多,但是內(nèi)容...
    點(diǎn)柈閱讀 26,211評論 3 42
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,502評論 19 139
  • 兩個月之前在項(xiàng)目中就開始使用 Eslint ,當(dāng)時直接 copy 別人的 .eslintrc.js 文件,感覺好復(fù)...
    dkvirus閱讀 112,528評論 33 190
  • ESLint最初是由Nicholas C. Zakas 于2013年6月創(chuàng)建的開源項(xiàng)目。它的目標(biāo)是提供一個插件化的...
    gavinDu閱讀 1,950評論 1 1

友情鏈接更多精彩內(nèi)容