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 */
  • 使用配置文件來配置:
// .eslintrc.js
module.exports = {
  globals: {
    var1: true,
    var2: true,
  },
};

規則

在配置文件中可以設置一些規則。

這些規則的等級有三種:

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

例如:

  • 使用配置文件來配置
// .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]

編輯器

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

lint

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,882評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,208評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,746評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,666評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,477評論 6 407
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,960評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,047評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,200評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,726評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,617評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,807評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,327評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,049評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,425評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,674評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,432評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,769評論 2 372

推薦閱讀更多精彩內容

  • ESLint 配置 ESlint 被設計為完全可配置的,這意味著你可以關閉每一個規則而只運行基本語法驗證,或混合和...
    靜默虛空閱讀 41,413評論 3 14
  • EsLint入門學習整理 這兩天因為公司要求,就對ESLint進行了初步的了解,網上的內容基本上都差不多,但是內容...
    點柈閱讀 26,043評論 3 42
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,781評論 18 139
  • 兩個月之前在項目中就開始使用 Eslint ,當時直接 copy 別人的 .eslintrc.js 文件,感覺好復...
    dkvirus閱讀 112,055評論 33 190
  • ESLint最初是由Nicholas C. Zakas 于2013年6月創建的開源項目。它的目標是提供一個插件化的...
    gavinDu閱讀 1,812評論 1 1