一. 安裝
npm install eslint
二. 配置
ESLint的配置有三種方式:
1、.eslintrc.*文件的配置 首先你需要初始化配置文件。
eslint init
這將會在你的當前目錄下生成一個.eslintrc.*文件。.eslintrc的後綴可以是.js、.yalm、.yml和.json中的任意一個。以.json格式爲例。
.eslintrc.json 文件的內容類似如下:
{
//extends用於引入某配置作爲基礎配置,然後再在後續的rules中對其進行擴展
"extends": "eslint:recommended",
//如果你想使用插件中的環境變量,請先把插件名寫入"plugins"數組中,然後再在"env":{}中以"插件名/插件中的需引入的環境名"的方式進行指定。
"plugins": ["example"],
"env": {
//An environment defines global variables that are predefined.
//定義env會帶進來一些全局變量
"browser": true,
"node": true,
"es6":true,
"mocha":"true",
"qunit":true,
"jquery":true,
"mongo":true,
//通過插件名命名空間引入插件中的環境
"example/custom": true
},
"globals": {
// globals are the additional global variables your script accesses during execution.
// 即插件在執行過程中用到的其它全局變量
"angular": true,
},
"rules": {
//which rules are enabled and at what error level.
//這裏指定用哪些規則進行eslint檢查以及每個規則的錯誤級別:0或者off表示規則關閉,出錯也被忽略;1或者warn表示如果出錯會給出警告;2或者error表示如果出錯會報出錯誤
"semi": ["error", "always"],
"quotes": ["error", "double"]
},
//parser指定解析器,默認的爲espree,可選的還有Esprima、Babel-ESLint。
//babel-eslint is a wrapper around the Babel parser that makes it compatible with ESLint.
//babel-eslint是一個Babel parser的包裝器,這個包裝器使得Babel parser可以和ESLint協調工作
"parser": "babel-eslint",
"parserOptions": {
//ecmaVersion指定ECMAScript的版本,可選值有3\5\6\7,默認是5
"ecmaVersion": 6,
//sourceType指定被檢查的文件是什麼擴展名的,可選項"script"和"module",默認是"script"。"module"是ES6的。
"sourceType": "module",
//ecmaFeatures指定你想使用哪些額外的語言特性
"ecmaFeatures": {
"jsx": true
}
},
}
“rules”中的每一項即是一條規則。其中,“:”之前的事規則的名稱(如上面的”semi” 和 “quotes”),“:”後面的數組中,第一個項用於指定規則的錯誤級別,它有 3 個可選的取值:
“off” 或者 0 - 關閉規則
“warn” or 1 - 不符合規則時作爲一個警告(不會影響退出碼)
“error” or 2 - 不符合規則時視作一個錯誤 (退出碼爲1)
在你的.eslintrc文件中包含這行代碼,可以使用推薦規則。
"extends": "eslint:recommended"
通過這行代碼,會開啓規則頁中標有對勾符號的規則。當然,你也可以到 npmjs.com 搜索 “eslint-config” 查找別人創建好的配置列表,並拿來直接使用。
.eslintrc.如果放在項目的根目錄中,則會作用於整個項目。如果在項目的子目錄中也包含着.eslintrc文件,則對於子目錄中文件的檢查會忽略掉根目錄中的配置,而直接採用子目錄中的配置,這就能夠在不同的目錄範圍內應用不同的檢查規則,顯得比較靈活。ESLint採用逐級向上查找的方式查找.eslintrc.文件,當找到帶有”root”: true配置項的.eslintrc.*文件時,將會停止向上查找。
“extends”除了可以引入推薦規則,還可以以文件形式引入其它的自定義規則,然後在這些自定義規則的基礎上用rules去定義個別規則,從而覆蓋掉”extends”中引入的規則。例如:
{
"extends": [
"./node_modules/coding-standard/eslintDefaults.js",
// Override eslintDefaults.js
"./node_modules/coding-standard/.eslintrc-es6",
// Override .eslintrc-es6
"./node_modules/coding-standard/.eslintrc-jsx",
],
"rules": {
// Override any settings from the "parent" configuration
"eqeqeq": "warn"
}
}
2、在 package.json 中加入 eslintConfig 配置塊進行配置
例如:
{
"name": "demo",
"version": "1.0.0",
"eslintConfig": {
"env": {
"browser": true,
"node": true
},
"rules": {
"eqeqeq": "warn"
}
}
}
3、直接在代碼文件中以註釋的方式定義 需要注意的是,代碼文件內以註釋配置的規則會覆蓋配置文件裏的規則,即優先級要更高。
臨時在一段代碼中取消eslint檢查,可以如下設置:
/* eslint-disable */
// Disables all rules between comments
alert(‘foo’);
/* eslint-enable */
臨時在一段代碼中取消個別規則的檢查(如no-alert, no-console):
/* eslint-disable no-alert, no-console */
// Disables no-alert and no-console warnings between comments
alert(‘foo’);
console.log(‘bar’);
/* eslint-enable no-alert, no-console */
在整個文件中取消eslint檢查:
/* eslint-disable */
// Disables all rules for the rest of the file
alert(‘foo’);
在整個文件中禁用某一項eslint規則的檢查:
/* eslint-disable no-alert */
// Disables no-alert for the rest of the file
alert(‘foo’);
針對某一行禁用eslint檢查:
alert(‘foo’); // eslint-disable-line
// eslint-disable-next-line
alert(‘foo’);
針對某一行的某一具體規則禁用eslint檢查:
alert(‘foo’); // eslint-disable-line no-alert
// eslint-disable-next-line no-alert
alert(‘foo’);
針對某一行禁用多項具體規則的檢查:
alert(‘foo’); // eslint-disable-line no-alert, quotes, semi
// eslint-disable-next-line no-alert, quotes, semi
alert(‘foo’);