配置文件 eslintrc.js 詳解
如果項(xiàng)目目錄下有多個(gè)配置文件苫幢，ESLint 只會(huì)使用一個(gè)访诱，優(yōu)先級(jí)為：.eslintrc.js > .eslintrc > package.json，一般我們都是在 .eslintrc.js 配置韩肝。
同時(shí)触菜，如果配置文件里沒有"root": true這個(gè)屬性，ESLint就會(huì)繼續(xù)向外尋找配置文件哀峻，直到找到有"root": true的為止涡相，所有這些配置文件的規(guī)則都會(huì)被層疊應(yīng)用。若有重復(fù)的屬性配置剩蟀，則離文件更近的配置文件具有更高的優(yōu)先級(jí)漾峡。
當(dāng)想要所有項(xiàng)目都遵循一個(gè)特定的約定時(shí)會(huì)很有用，但還是建議給項(xiàng)目根目錄的.eslintrc.js加上root: true
1. 配置文件相關(guān)屬性 Configuration Files
1.1 extends - Extending Configuration Files
一個(gè)ESLint配置文件喻旷，一旦擴(kuò)展了(即從外部引入了其他配置包)，就能繼承另一個(gè)配置文件的所有屬性(包括rules, plugins, and language option在內(nèi))牢屋，然后通過(guò)merge合并/覆蓋所有原本的配置且预。
extends屬性的值可以是：
- 定義一個(gè)配置的字符串(配置文件的路徑、可共享配置的名稱烙无，如eslint:recommended 或 eslint:all)
- 字符串?dāng)?shù)組锋谐，每個(gè)擴(kuò)展都會(huì)先繼承前面一個(gè)擴(kuò)展的配置
"eslint:recommended" 這個(gè)擴(kuò)展包幫我們啟用了一系列核心規(guī)則，這些規(guī)則是在 rules頁(yè)面 中被標(biāo)記為 ? 的常見問(wèn)題截酷。
1.1.1 用插件來(lái)擴(kuò)展ESLint配置
ESLint插件是可以給ESLint添加很多擴(kuò)展規(guī)則的npm包涮拗，它可以執(zhí)行很多方法，包括但不限于添加新規(guī)則和導(dǎo)出可共享配置迂苛。
在添加到配置文件 (如.eslintrc.js) 的 plugins 的 時(shí)候三热，可以省略插件包名的eslint-plugin-前綴
在extends中插件字符串值則可以是：
-
plugin: - 插件包名(同樣省略
eslint-plugin-前綴，如果有的話三幻。詳見下面注解①) /- 插件導(dǎo)出的模塊中
configs對(duì)象內(nèi)定義好的配置名稱就漾，如 下例中的recommended。詳見：configs-in-plugins
{
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
}
插件包名的格式一般是eslint-plugin-<plugin-name>念搬，就像 eslint-plugin-prettier抑堡；
也可能是含命名空間包的格式@<scope>/eslint-plugin-<plugin-name>摆出，例如 @vue/eslint-config-prettier；
甚至 @<scope>/eslint-plugin首妖，如@jquery/eslint-plugin偎漫。
1.1.2 插件具體是如何實(shí)現(xiàn)擴(kuò)展配置的
通過(guò)extends設(shè)置的配置包加載的時(shí)候，是遞歸的形式去查找配置文件(最終是一個(gè)導(dǎo)出的對(duì)象有缆，詳細(xì)看②)象踊，然后一步步派生繼承的。
例如： extends: ["foo"]妒貌，然后對(duì)應(yīng)的eslint-config-foo有plugins: ["bar"], ESLint 會(huì)先找到 ./node_modules/ 下的eslint-plugin-bar, (而不是 ./node_modules/eslint-config-foo/node_modules/)通危，更不會(huì)從祖先目錄去查找。配置文件和基本配置中的每個(gè)插件都會(huì)唯一地解析灌曙。
按照上述規(guī)則菊碟，我們來(lái)梳理下["plugin:vue/essential", "eslint:recommended", "@vue/prettier"](vue-cli4 + ESLint + prettier 的 默認(rèn)extends值)的配置文件分別在哪里。僅幫助加深理解在刺。
-
"plugin:vue/essential"：有 plugin: 前綴逆害，顯然要先去找./node_modules/eslint-plugin-vue，然后看它導(dǎo)出的配置里的essential屬性蚣驼。在./node_modules/eslint-plugin-vue/lib/index.js 里找到了魄幕。module.exports = { rules: {}, // 省略 configs: { 'base': require('./configs/base'), 'essential': require('./configs/essential'), // "plugin:vue/essential" 的配置就在這里 // 其余省略... }, processors: { '.vue': require('./processor') } } -
"eslint:recommended"： 沒有eslint-config-eslint插件，說(shuō)明是插件名/路徑颖杏，就直接到eslint的npm包下去找了(本來(lái)就是eslint自身??)纯陨。而且它封裝得比較復(fù)雜，沒找到在哪里導(dǎo)出配置和configs 關(guān)鍵字留储，只是能確認(rèn)"eslint:recommended" 的配置規(guī)則在./node_modules/eslint/conf/eslint-recommended.js -
"@vue/prettier"：同上直接到@vue包里找翼抠，先匹配eslint-config-變量名的原則，找到了eslint-config-prettier获讳；再到里面找到了導(dǎo)出模塊
module.exports = {
plugins: ['prettier'], // eslint-plugin-prettier 插件
extends: [
require.resolve('eslint-config-prettier'), // eslint-config-prettier 配置插件
require.resolve('eslint-config-prettier/vue')
],
rules: {
'prettier/prettier': 'warn' // 這里修改了 eslint-plugin-prettier 的配置
// 如果怕麻煩阴颖，親測(cè)默認(rèn)配置和 eslint 會(huì)有沖突(抱warning)，可以直接在這里修改
}
}
我們?cè)偃ロ?xiàng)目根目錄的./node_modules找 eslint-plugin-prettier 和 eslint-config-prettier 插件丐膝，然后得知量愧，@vue/prettier最終導(dǎo)入了./node_modules/eslint-config-prettier/index.js、./node_modules/eslint-config-prettier/vue.js和./node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js的規(guī)則
2. 語(yǔ)言相關(guān)屬性 Language Options
parserOptions - Specifying Parser Options
指定你想要支持的 JavaScript 語(yǔ)言選項(xiàng)帅矗。默認(rèn)支持 ECMAScript 5 語(yǔ)法偎肃。你可以覆蓋該設(shè)置，以啟用對(duì) ECMAScript 其它版本和 JSX 的支持浑此。
// eslintrc.js
{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"semi": "error"
}
}
3. 規(guī)則屬性 Rules
3.1 rules - Configuring Rules
ESLint 擁有大量的規(guī)則软棺。你可以通過(guò)配置插件添加更多規(guī)則。使用注釋或配置文件修改你項(xiàng)目中要使用的規(guī)則尤勋。要改變一個(gè)規(guī)則喘落，你必須將規(guī)則 ID 設(shè)置為下列值之一：
-
"off"或0- 關(guān)閉規(guī)則 -
"warn"或1- 開啟規(guī)則茵宪，使用警告級(jí)別的錯(cuò)誤：warn(不會(huì)導(dǎo)致程序退出) -
"error"或2- 開啟規(guī)則，使用錯(cuò)誤級(jí)別的錯(cuò)誤：error(當(dāng)被觸發(fā)的時(shí)候瘦棋，程序會(huì)退出)
3.1.1 在文件注釋里配置規(guī)則(只在當(dāng)前文件生效)
/* eslint eqeqeq: 0, curly: "error" */
上面的例子稀火，eqeqeq 規(guī)則被關(guān)閉，curly 規(guī)則被打開赌朋，且定義為錯(cuò)誤級(jí)別凰狞。出于便于理解的考慮，可以用字符串值沛慢，如果很熟悉的話用對(duì)應(yīng)的數(shù)字來(lái)定義也是一樣的赡若。
如果一個(gè)規(guī)則有額外的參數(shù)選項(xiàng)，你可以用數(shù)組字面量語(yǔ)法來(lái)指定它們团甲，比如：
/* eslint quotes: ["error", "double"], curly: 2 */
這條注釋為規(guī)則quotes指定了 “double”選項(xiàng)逾冬。數(shù)組的第一項(xiàng)總是規(guī)則的嚴(yán)重程度（數(shù)字/字符串）
3.1.2 在配置文件配置規(guī)則
要配置定義在插件中的一個(gè)規(guī)則，你必須使用 插件名/規(guī)則ID 的形式躺苦。比如：
{
"plugins": [
"plugin1",
"react" // 配置 eslint-plugin-react 插件
],
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"],
"plugin1/rule1": "error",
"react/jsx-boolean-value": 2 // 配置eslint-plugin-react 的 jsx-boolean-value 規(guī)則
}
}
規(guī)則 plugin1/rule1 表示來(lái)自插件 plugin1 的 rule1 規(guī)則身腻。當(dāng)指定來(lái)自插件的規(guī)則時(shí)，確保刪除 eslint-plugin- 前綴匹厘。ESLint 在內(nèi)部只使用沒有前綴的名稱去定位規(guī)則嘀趟。
4. 插件相關(guān)屬性 Plugins
4.1 parser - Specifying Parser
被指定的解析器必須是可以從它的配置文件中加載的Node模塊。這意味著應(yīng)該使用 npm 單獨(dú)安裝這個(gè)解析器包愈诚；它必須符合 parser interface她按。
{
"parser": "babel-eslint",
"rules": {
"semi": "error"
}
}
4.2 plugins - Configuring Plugins
ESLint支持使用第三方插件。要使用插件炕柔，必須先用npm進(jìn)行安裝酌泰。
要在配置文件中配置插件，可以用 plugins 屬性汗唱，它的值是包含插件名稱的列表(數(shù)組)。其中丈攒，插件名可以省略eslint-plugin-前綴(如果有的話)哩罪。
插件是根據(jù)配置文件(如eslintrc.js)解析的。換句話說(shuō)巡验，ESLint會(huì)像通過(guò)運(yùn)行 require('eslint-plugin-pluginname')一樣加載我們配置在eslintrc.js中的插件际插。所以要保證在這個(gè)包在當(dāng)前配置文件的./node_modules/下找得到。
連著extends屬性講比較清楚显设，因此其他已經(jīng)在上面 1.1.2 - 插件具體是如何實(shí)現(xiàn)擴(kuò)展配置的 講過(guò)了框弛。
常用規(guī)則和參數(shù)說(shuō)明
避免文章冗長(zhǎng)又礙可讀性又分篇了，指路：?? ESLint配置詳解(二) - 常用規(guī)則(Rules)集合
