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/