vue中eslintrc.js配置最詳細(xì)介紹
本文是對(duì)vue項(xiàng)目中自帶文件eslintrc.js的內(nèi)容解析,
介紹了各個(gè)eslint配置項(xiàng)的作用,以及為什么這樣設(shè)置。
比較詳細(xì),看完能對(duì)eslint有較為全面的了解,基本解除對(duì)該文件的疑惑。
/**
* 參考文檔
* 【eslint英文文檔】https://eslint.org/docs/user-guide/configuring
* 【eslint中文文檔】http://eslint.cn/docs/rules/
*/
/**
* eslint有三種使用方式
* 【1】js代碼中通過(guò)注釋的方式使用
* 【2】通過(guò)webpack的eslintConfig字段設(shè)置,eslint會(huì)自動(dòng)搜索項(xiàng)目的package.json文件中的配置
* 【3】通過(guò)配置文件的方式使用,配置文件有多種文件方式,如JavaScript、JSON 或者 YAML等
*/
/**
* 文件忽略
* 【】讓eslint跳過(guò)特定文件的檢測(cè)
* 【】通過(guò)當(dāng)前工作目錄下 「.eslintignore」 文件進(jìn)行設(shè)置
* 其使用的是Glob路徑書(shū)寫(xiě)方式,與「.gitignore」的使用方法相同
* 【】也可以在 package.json 文件中,通過(guò) eslintIgnore 參數(shù)進(jìn)行設(shè)置
*/
/**
* 文件內(nèi)局部設(shè)置
* 【】eslint可以具體文件中設(shè)置特定代碼的規(guī)則,常用于跳過(guò)某條語(yǔ)句的檢測(cè)。
* 【】注銷全部規(guī)則,在代碼前新建一行,添加注銷 /* eslint-disable *\/ 。如果沒(méi)有恢復(fù)設(shè)置的語(yǔ)句,則下列全部代碼都會(huì)跳過(guò)檢測(cè)。
* 【】恢復(fù)eslint,在代碼前新建一行,添加注銷 /* eslint-enable *\/
* 【】指定忽略的規(guī)則,/* eslint-disable no-alert, no-console *\/
* 【】在特定行禁用,// eslint-disable-line
* 【】在下一行禁用,// eslint-disable-next-line
*/
module.exports = {
/**
* 根目錄標(biāo)識(shí)
* http://eslint.cn/docs/user-guide/configuring#using-configuration-files
* http://eslint.cn/docs/user-guide/configuring#configuration-cascading-and-hierarchy
* 【】標(biāo)識(shí)當(dāng)前配置文件為最底層的文件,無(wú)需往更上一級(jí)的文件目錄中進(jìn)行搜索
* 【】默認(rèn)eslint的配置文件搜索方式是,從目標(biāo)文件夾進(jìn)行搜索,遍歷內(nèi)部每一個(gè)文件夾,找到配置文件并層疊使用。再跳出本項(xiàng)目,往祖先文件夾進(jìn)行遍歷
* 【】注意「~/.eslintrc」的意義,「~」是指linux上的家目錄,「~/.eslintrc」是指家目錄下的eslint配置文件,用于私人開(kāi)發(fā)者,用于整個(gè)電腦全局約束的。這個(gè)配置通過(guò)本配置項(xiàng)root去設(shè)置,設(shè)置了root,eslint檢測(cè)時(shí)將不會(huì)再往上搜索
* 【】eslint的生效規(guī)則是就近使用,越近的配置項(xiàng)優(yōu)先級(jí)越高,覆蓋其他配置項(xiàng)。如一個(gè)項(xiàng)目中,可以在不同文件夾中都添加配置文件,這些規(guī)則將重疊組合生效
*/
root: true, // 標(biāo)識(shí)當(dāng)前配置文件為eslint的根配置文件,讓其停止在父級(jí)目錄中繼續(xù)尋找。
/**
* 解析器
* http://eslint.cn/docs/user-guide/configuring#specifying-parser
* 【】ESLint 默認(rèn)使用Espree作為其解析器
* 【】解析器必須是本地安裝的一個(gè) npm 模塊。即必須按照在本地的node_module中
* 【】解析器是用于解析js代碼的,怎么去理解每一個(gè)表達(dá)式,有點(diǎn)C++中編譯器的概念,會(huì)對(duì)js進(jìn)行一些語(yǔ)法分析,語(yǔ)義分析什么的,才能判斷語(yǔ)句符不符合規(guī)范。而不是通過(guò)簡(jiǎn)單的字符串對(duì)比。
* 【】解析器有很多,但兼容eslint的解析器有以下幾個(gè)
* Espree:默認(rèn)解析器,一個(gè)從Esprima中分離出來(lái)的解析器,做了一些優(yōu)化
* Esprima:js標(biāo)準(zhǔn)解析器
* Babel-ESLint: 一個(gè)對(duì)Babel解析器的包裝,babel本身也是js解析器的一種(不然怎么能轉(zhuǎn)化為兼容性代碼呢?首先需要進(jìn)行js解析,才能轉(zhuǎn)化)。如果我們的代碼需要經(jīng)過(guò)babel轉(zhuǎn)化,則對(duì)應(yīng)使用這個(gè)解析器
* typescript-eslint-parser(實(shí)驗(yàn)) - 一個(gè)把 TypeScript 轉(zhuǎn)換為 ESTree 兼容格式的解析器
*/
parser: 'babel-eslint',
/**
* 解析器配置項(xiàng)
* http://eslint.cn/docs/user-guide/configuring#specifying-parser-options
* 【】這里設(shè)置的配置項(xiàng)將會(huì)傳遞到解析器中,被解析器獲取到,進(jìn)行一定的處理。具體被利用到,要看解析器的源碼有沒(méi)有對(duì)其進(jìn)行利用。這里僅僅做了參數(shù)定義,做了規(guī)定,告訴解析器的開(kāi)發(fā)者可能有這些參數(shù)
* 【】配置項(xiàng)目有:
* "sourceType": "module", // 指定JS代碼來(lái)源的類型,script(script標(biāo)簽引入?) | module(es6的module模塊),默認(rèn)為script。為什么vue的會(huì)使用script呢?因?yàn)関ue是通過(guò)babel-loader編譯的,而babel編譯后的代碼就是script方式
* "ecmaVersion": 6, // 支持的ES語(yǔ)法版本,默認(rèn)為5。注意只是語(yǔ)法,不包括ES的全局變量。全局變量需要在env選項(xiàng)中進(jìn)行定義
* "ecmaFeatures": { // Features是特征的意思,這里用于指定要使用其他那些語(yǔ)言對(duì)象
"experimentalObjectRestSpread": true, //啟用對(duì)對(duì)象的擴(kuò)展
"jsx": true, //啟用jsx語(yǔ)法
"globalReturn":true, //允許return在全局使用
"impliedStrict":true //啟用嚴(yán)格校驗(yàn)?zāi)J?
}
*/
parserOptions: {},
/**
* 運(yùn)行環(huán)境
* http://eslint.cn/docs/user-guide/configuring#specifying-environments
* 【】一個(gè)環(huán)境定義了一組預(yù)定義的全局變量
* 【】獲得了特定環(huán)境的全局定義,就不會(huì)認(rèn)為是開(kāi)發(fā)定義的,跳過(guò)對(duì)其的定義檢測(cè)。否則會(huì)被認(rèn)為改變量未定義
* 【】常見(jiàn)的運(yùn)行環(huán)境有以下這些,更多的可查看官網(wǎng)
* browser - 瀏覽器環(huán)境中的全局變量。
* node - Node.js 全局變量和 Node.js 作用域。
* es6 - 啟用除了 modules 以外的所有 ECMAScript 6 特性(該選項(xiàng)會(huì)自動(dòng)設(shè)置 ecmaVersion 解析器選項(xiàng)為 6)。
* amd - 將 require() 和 define() 定義為像 amd 一樣的全局變量。
* commonjs - CommonJS 全局變量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在瀏覽器中運(yùn)行的代碼)。
* jquery - jQuery 全局變量。
* mongo - MongoDB 全局變量。
* worker - Web Workers 全局變量。
* serviceworker - Service Worker 全局變量。
*/
env: {
browser: true, // 瀏覽器環(huán)境
},
/**
* 全局變量
* http://eslint.cn/docs/user-guide/configuring#specifying-globals
* 【】定義額外的全局,開(kāi)發(fā)者自定義的全局變量,讓其跳過(guò)no-undef 規(guī)則
* 【】key值就是額外添加的全局變量
* 【】value值用于標(biāo)識(shí)該變量能否被重寫(xiě),類似于const的作用。true為允許變量被重寫(xiě)
* 【】注意:要啟用no-global-assign規(guī)則來(lái)禁止對(duì)只讀的全局變量進(jìn)行修改。
*/
globals: {
// gTool: true, // 例如定義gTool這個(gè)全局變量,且這個(gè)變量可以被重寫(xiě)
},
/**
* 插件
* http://eslint.cn/docs/user-guide/configuring#configuring-plugins
* 【】插件同樣需要在node_module中下載
* 【】注意插件名忽略了「eslint-plugin-」前綴,所以在package.json中,對(duì)應(yīng)的項(xiàng)目名是「eslint-plugin-vue」
* 【】插件的作用類似于解析器,用以擴(kuò)展解析器的功能,用于檢測(cè)非常規(guī)的js代碼。也可能會(huì)新增一些特定的規(guī)則。
* 【】如 eslint-plugin-vue,是為了幫助我們檢測(cè).vue文件中 <template> 和 <script> 中的js代碼
*/
plugins: [
'vue'
],
/**
* 規(guī)則繼承
* http://eslint.cn/docs/user-guide/configuring#extending-configuration-files
*【】可繼承的方式有以下幾種
*【】eslint內(nèi)置推薦規(guī)則,就只有一個(gè),即「eslint:recommended」
*【】可共享的配置, 是一個(gè) npm 包,它輸出一個(gè)配置對(duì)象。即通過(guò)npm安裝到node_module中
* 可共享的配置可以省略包名的前綴 eslint-config-,即實(shí)際設(shè)置安裝的包名是 eslint-config-airbnb-base
*【】從插件中獲取的規(guī)則,書(shū)寫(xiě)規(guī)則為 「plugin:插件包名/配置名」,其中插件報(bào)名也是可以忽略「eslint-plugin-」前綴。如'plugin:vue/essential'
*【】從配置文件中繼承,即繼承另外的一個(gè)配置文件,如'./node_modules/coding-standard/eslintDefaults.js'
*/
extends: [
'plugin:vue/essential', // 額外添加的規(guī)則可查看 https://vuejs.github.io/eslint-plugin-vue/rules/
/**
* 「airbnb,愛(ài)彼迎」
* 【】有兩種eslint規(guī)范,一種是自帶了react插件的「eslint-config-airbnb」,一種是基礎(chǔ)款「eslint-config-airbnb-base」,
* 【】airbnb-base 包括了ES6的語(yǔ)法檢測(cè),需要依賴 「eslint-plugin-import」
* 【】所以在使用airbnb-base時(shí),需要用npm額外下載 eslint-plugin-import
* 【】所以eslint實(shí)際上已經(jīng)因?yàn)?airbnb-base 基礎(chǔ)配置項(xiàng)目,添加上了 eslint-plugin-import 插件配置
* 【】所以在setting和rules里,都有 'import/xxx' 項(xiàng)目,這里修改的就是 eslint-plugin-import 配置
*/
'airbnb-base',
],
/**
* 規(guī)則共享參數(shù)
* http://eslint.cn/docs/user-guide/configuring#adding-shared-settings
* 【】提供給具體規(guī)則項(xiàng),每個(gè)參數(shù)值,每個(gè)規(guī)則項(xiàng)都會(huì)被注入該變量,但對(duì)應(yīng)規(guī)則而言,有沒(méi)有用,就看各個(gè)規(guī)則的設(shè)置了,就好比 parserOptions,解析器用不用它就不知道了。這里只是提供這個(gè)方法
* 【】不用懷疑,經(jīng)源碼驗(yàn)證,這就是傳遞給每個(gè)規(guī)則項(xiàng)的,會(huì)當(dāng)做參數(shù)傳遞過(guò)去,但用不用,就是具體規(guī)則的事情
*/
settings: {
/**
*
* 注意,「import/resolver」并不是eslint規(guī)則項(xiàng),與rules中的「import/extensions」不同。它不是規(guī)則項(xiàng)
* 這里只是一個(gè)參數(shù)名,叫「import/resolver」,會(huì)傳遞給每個(gè)規(guī)則項(xiàng)。
* settings并沒(méi)有具體的書(shū)寫(xiě)規(guī)則,「import/」只是import模塊自己起的名字,原則上,它直接命名為「resolver」也可以,加上「import」只是為了更好地區(qū)分。不是強(qiáng)制設(shè)置的。
* 因?yàn)椤竔mport」插件很多規(guī)則項(xiàng)都用的這個(gè)配置項(xiàng),所以并沒(méi)有通過(guò)rules設(shè)置,而是通過(guò)settings共享
* 具體使用方法可參考https://github.com/benmosher/eslint-plugin-import
*/
'import/resolver': {
/**
* 這里傳入webpack并不是import插件能識(shí)別webpack,而且通過(guò)npm安裝了「eslint-import-resolver-webpack」,
* 「import」插件通過(guò)「eslint-import-resolver-」+「webpack」找到該插件并使用,就能解析webpack配置項(xiàng)。使用里面的參數(shù)。
* 主要是使用以下這些參數(shù),共享給import規(guī)則,讓其正確識(shí)別import路徑
* extensions: ['.js', '.vue', '.json'],
* alias: {
* 'vue$': 'vue/dist/vue.esm.js',
* '@': resolve('src'),
* 'static': resolve('static')
* }
*/
webpack: {
config: 'build/webpack.base.conf.js'
}
}
},
/**
* 針對(duì)特定文件的配置
* 【】可以通過(guò)overrides對(duì)特定文件進(jìn)行特定的eslint檢測(cè)
* 【】特定文件的路徑書(shū)寫(xiě)使用Glob格式,一個(gè)類似正則的路徑規(guī)則,可以匹配不同的文件
* 【】配置幾乎與 ESLint 的其他配置相同。覆蓋塊可以包含常規(guī)配置中的除了 extends、overrides 和 root 之外的其他任何有效配置選項(xiàng),
*/
overrides: [
{
'files': ['bin/*.js', 'lib/*.js'],
'excludedFiles': '*.test.js',
'rules': {
'quotes': [2, 'single']
}
}
],
/**
* 自定義規(guī)則
* http://eslint.cn/docs/user-guide/configuring#configuring-rules
* 【】基本使用方式
* "off" 或者0 關(guān)閉規(guī)則
* "warn" 或者1 將規(guī)則打開(kāi)為警告(不影響退出代碼)
* "error" 或者2 將規(guī)則打開(kāi)為錯(cuò)誤(觸發(fā)時(shí)退出代碼為1)
* 如:'no-restricted-syntax': 0, // 表示關(guān)閉該規(guī)則
* 【】如果某項(xiàng)規(guī)則,有額外的選項(xiàng),可以通過(guò)數(shù)組進(jìn)行傳遞,而數(shù)組的第一位必須是錯(cuò)誤級(jí)別。如0,1,2
* 如 'semi': ['error', 'never'], never就是額外的配置項(xiàng)
*/
rules: {
/**
* 具體規(guī)則
* 【】具體的規(guī)則太多,就不做介紹了,有興趣的同學(xué)可以上eslint官網(wǎng)查
* 【】注意 xxx/aaa 這些規(guī)則是 xxx 插件自定的規(guī)則,在eslint官網(wǎng)是查不到的。需要到相應(yīng)的插件官網(wǎng)中查閱
* 【】如 import/extensions,這是「eslint-plugin-import」自定義的規(guī)則,需要到其官網(wǎng)查看 https://github.com/benmosher/eslint-plugin-import
*/
'import/extensions': ['error', 'always', {
js: 'never',
vue: 'never'
}],
'import/no-extraneous-dependencies': ['error', {
optionalDependencies: ['test/unit/index.js']
}],
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"no-restricted-syntax": 0, //
"guard-for-in": 0, //
"prefer-const": 0, //
"no-else-return": 0, //
"no-plusplus": 0, // 不允許使用++符號(hào)
"object-shorthand": ["error", "always", { "avoidQuotes": false }], // 去除禁止'videoData.isPause'(newValue) 的命名
"no-lonely-if": 0, // 不允許給函數(shù)參數(shù)重新賦值
"no-param-reassign": 0, // 不允許給函數(shù)參數(shù)重新賦值
"no-mixed-operators": 0, // 不允許混合使用運(yùn)算符
"no-underscore-dangle": 0, // 不允許下劃線作為變量名之一
"no-under": 0, // 不允許混合使用運(yùn)算符
'generator-star-spacing': 'off',
'no-console': 'off', // 禁用no-console規(guī)則
'semi': ['error', 'never'], // 行尾不使用分號(hào)
'comma-dangle': ['error'],
'eqeqeq': 0, // 不需要強(qiáng)制使用全等
'max-len': 0,
'radix': 0,// parseInt不需要傳第二個(gè)參數(shù)
'linebreak-style': 0, // 強(qiáng)制執(zhí)行一致的換行樣式,windows和mac不一樣
'consistent-return': 0, // 箭頭函數(shù)最后不需要最后強(qiáng)制return值
'no-unused-expressions': ["error", { "allowShortCircuit": true, "allowTernary": true }], // 允許您在表達(dá)式中使用三元運(yùn)算符
'no-multi-spaces': ['error', { "ignoreEOLComments": true }],
}
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
如何在Vue和Spring?boot之間實(shí)現(xiàn)前后端連接
最近搭建一個(gè)Springboot+vue前后端分離項(xiàng)目,真的很簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于如何在Vue和Spring?boot之間實(shí)現(xiàn)前后端連接的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
@vue/cli4.x版本的vue.config.js常用配置方式
這篇文章主要介紹了@vue/cli4.x版本的vue.config.js常用配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05
vue項(xiàng)目中openlayers繪制行政區(qū)劃
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目中openlayers繪制行政區(qū)劃,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12
vue 中使用 watch 出現(xiàn)了如下的報(bào)錯(cuò)的原因分析
這篇文章主要介紹了vue 中使用 watch 出現(xiàn)了如下的報(bào)錯(cuò)信息的原因分析及解決方法,本文附有代碼解決方案,非常不錯(cuò),需要的朋友可以參考下2019-05-05
vue-cli構(gòu)建的項(xiàng)目如何手動(dòng)添加eslint配置
這篇文章主要介紹了vue-cli構(gòu)建的項(xiàng)目如何手動(dòng)添加eslint配置,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
在Vue中實(shí)現(xiàn)文件預(yù)覽與打印的代碼示例
在Vue應(yīng)用中,有時(shí)我們需要實(shí)現(xiàn)文件預(yù)覽和打印的功能,比如,我們可能需要預(yù)覽并打印PDF文件、圖片文件等,本文將介紹如何在Vue中實(shí)現(xiàn)文件預(yù)覽和打印的功能,并提供相應(yīng)的代碼示例2023-06-06
vue3.0基于views批量實(shí)現(xiàn)動(dòng)態(tài)路由的方法(示例代碼)
以前vue項(xiàng)目中也有很多實(shí)現(xiàn)動(dòng)態(tài)路由的方法,比如有一些項(xiàng)目涉及權(quán)限的可能會(huì)使用api請(qǐng)求路由數(shù)據(jù)在來(lái)createRouter,或者本地構(gòu)建使用routes.push來(lái)動(dòng)態(tài)構(gòu)建路由, 今天介紹一種新的方式來(lái)基于某個(gè)文件夾批量構(gòu)建動(dòng)態(tài)路由的方法,感興趣的朋友一起看看吧2024-12-12
如何使用vue開(kāi)發(fā)公眾號(hào)網(wǎng)頁(yè)
因?yàn)轫?xiàng)目需要,近期做了一個(gè)公眾號(hào)網(wǎng)頁(yè)開(kāi)發(fā)。在此期間也踩了一些坑,解決這些坑之后,準(zhǔn)備對(duì)這個(gè)項(xiàng)目進(jìn)行復(fù)盤。記錄下項(xiàng)目從開(kāi)發(fā)到上線所解決的問(wèn)題,并對(duì)使用vue進(jìn)行公眾號(hào)開(kāi)發(fā)的步驟進(jìn)行一個(gè)總結(jié)。方便以后有問(wèn)題進(jìn)行查閱。希望對(duì)你有所幫助2021-05-05

