eslint 靜態(tài)代碼檢測(cè)工具

ESLint最初是由Nicholas C. Zakas 于2013年6月創(chuàng)建的開(kāi)源項(xiàng)目。它的目標(biāo)是提供一個(gè)插件化的javascript代碼檢測(cè)工具阳液。對(duì)比于jshint顯著的特點(diǎn)就是支持插件拓展還有就是支持jsx語(yǔ)法(jshint并不支持jsx,react開(kāi)發(fā)老報(bào)錯(cuò)也是很頭疼ㄟ( ▔, ▔ )ㄏ )揣炕。

命令行

具體的可以參考這里 傳送門 或者 eslint -h帘皿, 這里給出幾個(gè)常用的。

安裝

使用npm安裝畸陡,沒(méi)有npm的點(diǎn)這里https://www.npmjs.com/

npm i -g eslint

生成配置

eslint --init
//回答問(wèn)題后生成eslint配置鹰溜。

運(yùn)行eslint

eslint [options] [file|dir|glob]*

//eslint file1.js file2.js
//eslint lib/**
//eslint "lib/**" glob模式要用引號(hào)

eslint配置

配置有這幾種方式:

  • 直接在代碼文件中定義,使用 JavaScript 注釋把配置信息直接嵌入到一個(gè)文件丁恭。
  • 使用 .eslintrc (json或者YAML)或者 .eslintrc.yml(YAML)或者 .eslintrc.js(javascript)或者 .eslintrc.json (JSON)曹动;
  • 在 package.json 中添加 eslintConfig 字段;

和jshint一樣有個(gè)忽略檢測(cè)文件的配置.eslintignore牲览。
eslintrc執(zhí)行時(shí)會(huì)從檢測(cè)的文件一層層往上找配置文件墓陈,但是離檢測(cè)文件最近的文件優(yōu)先級(jí)最高,會(huì)覆蓋父級(jí)的配置。所以一般會(huì)在根目錄的配置中加一個(gè):

# YAML
root: true

ESLint 一旦發(fā)現(xiàn)配置文件中有 "root": true贡必,它就會(huì)停止在父級(jí)目錄中尋找兔港。
如果項(xiàng)目?jī)?nèi)沒(méi)有配置文件,會(huì)退回到系統(tǒng) ~/.eslintrc 中自定義的默認(rèn)配置仔拟。

有很多信息可以被配置:

  • Environments - 指定腳本的運(yùn)行環(huán)境衫樊。每種環(huán)境都有一組特定的預(yù)定義全局變量。
  • Globals - 腳本在執(zhí)行期間訪問(wèn)的額外的全局變量利花。
  • Rules - 啟用的規(guī)則及各自的錯(cuò)誤級(jí)別科侈。

一個(gè)簡(jiǎn)單的例子(.eslintrc.yml):

# YAML 
env:
  browser: true
parserOptions: 
  ecmaVersion: 6
  ecmaFeatures:
    jsx: true
globals :
   angular: true 
rules:
  camelcase: 0
  curly: 2
  brace-style: 
    - 2 
    - 1tbs
  quotes: 
    - 2 
    - single
  semi: 
    - 2 
    - always
  space-in-brackets:
    - 2 
    - never
  space-infix-ops: 2

1.parserOptions 解析器選項(xiàng)

#YAML
parserOptions: 
  ecmaVersion: 6
  ecmaFeatures:
    jsx: true

parserOptions 屬性設(shè)置解析器選項(xiàng)〕词拢可用的選項(xiàng)有:

  • ecmaVersion - 設(shè)置為 3臀栈, 5 (默認(rèn)), 6羡洛、7 或 8 指定你想要使用的 ECMAScript 版本挂脑。你也可以指定為 2015(同 6),2016(同 7)欲侮,或 2017(同 8)使用年份命名
  • sourceType - 設(shè)置為 "script" (默認(rèn)) 或 "module"(如果你的代碼是 ECMAScript 模塊)崭闲。
  • ecmaFeatures - 這是個(gè)對(duì)象,表示你想使用的額外的語(yǔ)言特性:
    • globalReturn - 允許在全局作用域下使用 return 語(yǔ)句
    • impliedStrict - 啟用全局 strict mode (如果 ecmaVersion 是 5 或更高)
    • jsx - 啟用 JSX
    • experimentalObjectRestSpread - 啟用對(duì)實(shí)驗(yàn)性的 object rest/spread properties 的支持威蕉。(重要:這是一個(gè)實(shí)驗(yàn)性的功能,在未來(lái)可能會(huì)改變明顯刁俭。 建議你寫(xiě)的規(guī)則 不要依賴該功能,除非當(dāng)它發(fā)生改變時(shí)你愿意承擔(dān)維護(hù)成本韧涨。)

2.env 環(huán)境全局變量

# YAML
env:
  browser: true

環(huán)境定義了預(yù)定義的全局變量牍戚。可用的環(huán)境有:

  • browser - browser 全局變量虑粥。
  • node - Node.js 全局變量和 Node.js 作用域如孝。
  • commonjs - CommonJS 全局變量和 CommonJS 作用域 (僅為使用 Browserify/WebPack 寫(xiě)的只支持瀏覽器的代碼)。
  • shared-node-browser - Node 和 Browser 通用全局變量娩贷。
  • es6 - 支持除模塊外所有 ECMAScript 6 特性(該選項(xiàng)會(huì)自動(dòng)設(shè)置 ecmaVersion 解析器選項(xiàng)為 6)第晰。
  • worker - web workers 全局變量。
  • amd - 定義 require() 和 define() 作為像 amd 一樣的全局變量彬祖。
  • mocha - 添加所有的 Mocha 測(cè)試全局變量茁瘦。
  • jasmine - 添加所有的 Jasmine 版本 1.3 和 2.0 的測(cè)試全局變量。
  • jest - Jest 全局變量储笑。
  • phantomjs - PhantomJS 全局變量甜熔。
  • protractor - Protractor 全局變量。
  • qunit - QUnit 全局變量突倍。
  • jquery - jQuery 全局變量腔稀。
  • prototypejs - Prototype.js 全局變量盆昙。
  • shelljs - ShellJS 全局變量。
  • meteor - Meteor 全局變量烧颖。
  • mongo - MongoDB 全局變量弱左。
  • applescript - AppleScript 全局變量。
  • nashorn - Java 8 Nashorn 全局變量炕淮。
  • serviceworker - Service Worker 全局變量。
  • atomtest - Atom 測(cè)試全局變量跳夭。
  • embertest - Ember 測(cè)試全局變量涂圆。
  • webextensions - WebExtensions 全局變量。
  • greasemonkey - GreaseMonkey 全局變量币叹。

3.globals全局變量

# YAML
globals :
   angular: true 
   var1: true
   var2: false

當(dāng)訪問(wèn)未定義的變量時(shí)润歉,no-undef 規(guī)則將發(fā)出警告。如果你想在一個(gè)文件里使用全局變量颈抚,推薦你定義這些全局變量踩衩,這樣 ESLint 就不會(huì)發(fā)出警告了。你可以使用注釋或在配置文件中定義全局變量贩汉。

4.plugins 插件

ESLint 支持使用第三方插件驱富。在使用插件之前,你必須使用 npm 安裝它匹舞。
在配置文件里配置插件褐鸥,要使用 plugins ,其中包含插件名字的列表赐稽。插件名稱可以省略 eslint-plugin- 前綴叫榕。

# YAML
plugins:
    - plugin1
    - eslint-plugin-plugin2

注意:全局安裝的 ESLint 只能使用全局安裝的插件。本地安裝的 ESLint 不僅可以使用本地安裝的插件還可以使用全局安裝的插件姊舵。

5.Rules 規(guī)則

plugins:
  - plugin1
rules:
  curly: 2
  brace-style: 
    - 2 
    - 1tbs
  quotes: 
    - 2 
    - single
  plugin1/rule1 : error
  #配置定義在插件中的一個(gè)規(guī)則的時(shí)候晰绎,你必須使用 插件名/規(guī)則ID 的形式

ESLint 附帶有大量的規(guī)則。你可以使用注釋或配置文件修改你項(xiàng)目中要使用哪些規(guī)則括丁。改變一個(gè)規(guī)則設(shè)置荞下,你必須設(shè)置規(guī)則 ID 等于這些值之一:

  • "off" 或 0 - 關(guān)閉規(guī)則
  • "warn" 或 1 - 開(kāi)啟規(guī)則,使用警告級(jí)別的錯(cuò)誤:warn (不會(huì)導(dǎo)致程序退出)
  • "error" 或 2 - 開(kāi)啟規(guī)則躏将,使用錯(cuò)誤級(jí)別的錯(cuò)誤:error (當(dāng)被觸發(fā)的時(shí)候锄弱,程序會(huì)退出)

具體的規(guī)則太多了這一看這里 : 傳送門

6.共享設(shè)置

# YAML
settings:
    sharedData: "Hello"

ESLint 支持在配置文件添加共享設(shè)置。你可以添加 settings 對(duì)象到配置文件祸憋,它將提供給每一個(gè)將被執(zhí)行的規(guī)則会宪。如果你想添加的自定義規(guī)則而且使它們可以訪問(wèn)到相同的信息,這將會(huì)很有用蚯窥,并且很容易配置掸鹅。

*行內(nèi)配置

禁止eslint檢測(cè)

//1.禁止規(guī)則出現(xiàn)警告
/* eslint-disable */
alert('foo');
/* eslint-enable */

//.2或者對(duì)指定的規(guī)則啟用或禁用警告
/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-enable no-alert, no-console */

//3.整個(gè)文件范圍內(nèi)禁止規(guī)則出現(xiàn)警告,將 /* eslint-disable */ 塊注釋放在文件頂部

//4.你也可以對(duì)整個(gè)文件啟用或禁用警告:
/* eslint-disable no-alert */
// Disables no-alert for the rest of the file

//5.單行注釋
alert('foo'); // eslint-disable-line
// eslint-disable-next-line
alert('foo');

*配置文件的繼承

一個(gè)配置文件可以被基礎(chǔ)配置中的已啟用的規(guī)則繼承

1 eslint:recommended

值為 "eslint:recommended" 的 extends 屬性啟用一系列核心規(guī)則塞帐,這些規(guī)則報(bào)告一些常見(jiàn)問(wèn)題,在 規(guī)則頁(yè)面 中被標(biāo)記為 巍沙。這個(gè)推薦的子集只能在 ESLint 主要版本進(jìn)行更新葵姥。

# YAML
extends: eslint:recommended,
rules : 
  #enable additional rules
  indent: 
    - error
    - 4

2 extend npm包

繼承的可以是一個(gè) npm 包,它輸出一個(gè)配置對(duì)象句携。要確保這個(gè)包安裝在 ESLint 能請(qǐng)求到的目錄下榔幸。extends 屬性值可以省略包名的前綴 eslint-config-。

# YAML
extends: standard
rules:
  comma-dangle:
    - error
    - always
  no-empty: warn

3 plugins npm包

一些插件也可以輸出一個(gè)或多個(gè)命名的 配置矮嫉。要確保這個(gè)包安裝在 ESLint 能請(qǐng)求到的目錄下削咆。plugins 屬性值 可以省略包名的前綴 eslint-plugin-。
extends 屬性值可以由以下組成:

  • plugin:
  • 包名 (省略了前綴蠢笋,比如拨齐,react)
  • /
  • 配置名稱 (比如 recommended)
# JSON
{
    "plugins": [
        "react"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "rules": {
       "no-set-state": "off"
    }
}

4 繼承配置文件

extends 屬性值可以是基本配置文件的絕對(duì)路徑或相對(duì)路徑。

{
    "extends": [
        "./node_modules/coding-standard/eslintDefaults.js",
        "./node_modules/coding-standard/.eslintrc-es6",
        "./node_modules/coding-standard/.eslintrc-jsx"
    ],
    "rules": {
        "eqeqeq": "warn"
    }
}

參考
http://eslint.cn/
http://eslint.org/docs
https://csspod.com/getting-started-with-eslint/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末昨寞,一起剝皮案震驚了整個(gè)濱河市瞻惋,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌援岩,老刑警劉巖歼狼,帶你破解...
    沈念sama閱讀 216,372評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異窄俏,居然都是意外死亡蹂匹,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門凹蜈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)限寞,“玉大人,你說(shuō)我怎么就攤上這事仰坦÷闹玻” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,415評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵悄晃,是天一觀的道長(zhǎng)玫霎。 經(jīng)常有香客問(wèn)我,道長(zhǎng)妈橄,這世上最難降的妖魔是什么庶近? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,157評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮眷蚓,結(jié)果婚禮上鼻种,老公的妹妹穿的比我還像新娘。我一直安慰自己沙热,他們只是感情好叉钥,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布罢缸。 她就那樣靜靜地躺著,像睡著了一般投队。 火紅的嫁衣襯著肌膚如雪枫疆。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,125評(píng)論 1 297
  • 那天敷鸦,我揣著相機(jī)與錄音息楔,去河邊找鬼。 笑死轧膘,一個(gè)胖子當(dāng)著我的面吹牛钞螟,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播谎碍,決...
    沈念sama閱讀 40,028評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼洞焙!你這毒婦竟也來(lái)了蟆淀?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 38,887評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤澡匪,失蹤者是張志新(化名)和其女友劉穎熔任,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體唁情,經(jīng)...
    沈念sama閱讀 45,310評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡疑苔,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了甸鸟。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片惦费。...
    茶點(diǎn)故事閱讀 39,690評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖抢韭,靈堂內(nèi)的尸體忽然破棺而出薪贫,到底是詐尸還是另有隱情,我是刑警寧澤刻恭,帶...
    沈念sama閱讀 35,411評(píng)論 5 343
  • 正文 年R本政府宣布瞧省,位于F島的核電站,受9級(jí)特大地震影響鳍贾,放射性物質(zhì)發(fā)生泄漏鞍匾。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評(píng)論 3 325
  • 文/蒙蒙 一骑科、第九天 我趴在偏房一處隱蔽的房頂上張望橡淑。 院中可真熱鬧,春花似錦纵散、人聲如沸梳码。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)掰茶。三九已至暇藏,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間濒蒋,已是汗流浹背盐碱。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,812評(píng)論 1 268
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留沪伙,地道東北人瓮顽。 一個(gè)月前我還...
    沈念sama閱讀 47,693評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像围橡,于是被迫代替她去往敵國(guó)和親暖混。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • ESLint 配置 ESlint 被設(shè)計(jì)為完全可配置的翁授,這意味著你可以關(guān)閉每一個(gè)規(guī)則而只運(yùn)行基本語(yǔ)法驗(yàn)證拣播,或混合和...
    靜默虛空閱讀 41,282評(píng)論 3 14
  • EsLint入門學(xué)習(xí)整理 這兩天因?yàn)楣疽螅蛯?duì)ESLint進(jìn)行了初步的了解收擦,網(wǎng)上的內(nèi)容基本上都差不多贮配,但是內(nèi)容...
    點(diǎn)柈閱讀 26,021評(píng)論 3 42
  • 兩個(gè)月之前在項(xiàng)目中就開(kāi)始使用 Eslint ,當(dāng)時(shí)直接 copy 別人的 .eslintrc.js 文件塞赂,感覺(jué)好復(fù)...
    dkvirus閱讀 111,954評(píng)論 33 190
  • 前言 對(duì)于少量的代碼,我們通常能夠通過(guò)肉眼或者代碼編輯器,甚至控制臺(tái)出現(xiàn)的錯(cuò)誤,找出對(duì)應(yīng)有問(wèn)題的代碼行,可以進(jìn)行排...
    itclanCoder閱讀 1,436評(píng)論 1 2
  • ESLint簡(jiǎn)介 ESLint是一款代碼規(guī)格檢查工具泪勒,能夠有效的保證團(tuán)隊(duì)的代碼質(zhì)量,避免低級(jí)代碼。 ESlint特...
    Bilif閱讀 2,873評(píng)論 0 3