本文是對vue項目中自帶文件eslintrc.js的內容解析,
介紹了各個eslint配置項的作用,以及爲什麼這樣設置。
比較詳細,看完能對eslint有較爲全面的瞭解,基本解除對該文件的疑惑。
/**
* 參考文檔
* 【eslint英文文檔】https://eslint.org/docs/user-guide/configuring
* 【eslint中文文檔】http://eslint.cn/docs/rules/
*/
/**
* eslint有三種使用方式
* 【1】js代碼中通過註釋的方式使用
* 【2】通過webpack的eslintConfig字段設置,eslint會自動搜索項目的package.json文件中的配置
* 【3】通過配置文件的方式使用,配置文件有多種文件方式,如JavaScript、JSON 或者 YAML等
*/
/**
* 文件忽略
* 【】讓eslint跳過特定文件的檢測
* 【】通過當前工作目錄下 「.eslintignore」 文件進行設置
* 其使用的是Glob路徑書寫方式,與「.gitignore」的使用方法相同
* 【】也可以在 package.json 文件中,通過 eslintIgnore 參數進行設置
*/
/**
* 文件內局部設置
* 【】eslint可以具體文件中設置特定代碼的規則,常用於跳過某條語句的檢測。
* 【】註銷全部規則,在代碼前新建一行,添加註銷 /* eslint-disable *\/ 。如果沒有恢復設置的語句,則下列全部代碼都會跳過檢測。
* 【】恢復eslint,在代碼前新建一行,添加註銷 /* eslint-enable *\/
* 【】指定忽略的規則,/* eslint-disable no-alert, no-console *\/
* 【】在特定行禁用,// eslint-disable-line
* 【】在下一行禁用,// eslint-disable-next-line
*/
module.exports = {
/**
* 根目錄標識
* http://eslint.cn/docs/user-guide/configuring#using-configuration-files
* http://eslint.cn/docs/user-guide/configuring#configuration-cascading-and-hierarchy
* 【】標識當前配置文件爲最底層的文件,無需往更上一級的文件目錄中進行搜索
* 【】默認eslint的配置文件搜索方式是,從目標文件夾進行搜索,遍歷內部每一個文件夾,找到配置文件並層疊使用。再跳出本項目,往祖先文件夾進行遍歷
* 【】注意「~/.eslintrc」的意義,「~」是指linux上的家目錄,「~/.eslintrc」是指家目錄下的eslint配置文件,用於私人開發者,用於整個電腦全局約束的。這個配置通過本配置項root去設置,設置了root,eslint檢測時將不會再往上搜索
* 【】eslint的生效規則是就近使用,越近的配置項優先級越高,覆蓋其他配置項。如一個項目中,可以在不同文件夾中都添加配置文件,這些規則將重疊組合生效
*/
root: true, // 標識當前配置文件爲eslint的根配置文件,讓其停止在父級目錄中繼續尋找。
/**
* 解析器
* http://eslint.cn/docs/user-guide/configuring#specifying-parser
* 【】ESLint 默認使用Espree作爲其解析器
* 【】解析器必須是本地安裝的一個 npm 模塊。即必須按照在本地的node_module中
* 【】解析器是用於解析js代碼的,怎麼去理解每一個表達式,有點C++中編譯器的概念,會對js進行一些語法分析,語義分析什麼的,才能判斷語句符不符合規範。而不是通過簡單的字符串對比。
* 【】解析器有很多,但兼容eslint的解析器有以下幾個
* Espree:默認解析器,一個從Esprima中分離出來的解析器,做了一些優化
* Esprima:js標準解析器
* Babel-ESLint: 一個對Babel解析器的包裝,babel本身也是js解析器的一種(不然怎麼能轉化爲兼容性代碼呢?首先需要進行js解析,才能轉化)。如果我們的代碼需要經過babel轉化,則對應使用這個解析器
* typescript-eslint-parser(實驗) - 一個把 TypeScript 轉換爲 ESTree 兼容格式的解析器
*/
parser: 'babel-eslint',
/**
* 解析器配置項
* http://eslint.cn/docs/user-guide/configuring#specifying-parser-options
* 【】這裏設置的配置項將會傳遞到解析器中,被解析器獲取到,進行一定的處理。具體被利用到,要看解析器的源碼有沒有對其進行利用。這裏僅僅做了參數定義,做了規定,告訴解析器的開發者可能有這些參數
* 【】配置項目有:
* "sourceType": "module", // 指定JS代碼來源的類型,script(script標籤引入?) | module(es6的module模塊),默認爲script。爲什麼vue的會使用script呢?因爲vue是通過babel-loader編譯的,而babel編譯後的代碼就是script方式
* "ecmaVersion": 6, // 支持的ES語法版本,默認爲5。注意只是語法,不包括ES的全局變量。全局變量需要在env選項中進行定義
* "ecmaFeatures": { // Features是特徵的意思,這裏用於指定要使用其他那些語言對象
"experimentalObjectRestSpread": true, //啓用對對象的擴展
"jsx": true, //啓用jsx語法
"globalReturn":true, //允許return在全局使用
"impliedStrict":true //啓用嚴格校驗模式
}
*/
parserOptions: {},
/**
* 運行環境
* http://eslint.cn/docs/user-guide/configuring#specifying-environments
* 【】一個環境定義了一組預定義的全局變量
* 【】獲得了特定環境的全局定義,就不會認爲是開發定義的,跳過對其的定義檢測。否則會被認爲改變量未定義
* 【】常見的運行環境有以下這些,更多的可查看官網
* browser - 瀏覽器環境中的全局變量。
* node - Node.js 全局變量和 Node.js 作用域。
* es6 - 啓用除了 modules 以外的所有 ECMAScript 6 特性(該選項會自動設置 ecmaVersion 解析器選項爲 6)。
* amd - 將 require() 和 define() 定義爲像 amd 一樣的全局變量。
* commonjs - CommonJS 全局變量和 CommonJS 作用域 (用於 Browserify/WebPack 打包的只在瀏覽器中運行的代碼)。
* jquery - jQuery 全局變量。
* mongo - MongoDB 全局變量。
* worker - Web Workers 全局變量。
* serviceworker - Service Worker 全局變量。
*/
env: {
browser: true, // 瀏覽器環境
},
/**
* 全局變量
* http://eslint.cn/docs/user-guide/configuring#specifying-globals
* 【】定義額外的全局,開發者自定義的全局變量,讓其跳過no-undef 規則
* 【】key值就是額外添加的全局變量
* 【】value值用於標識該變量能否被重寫,類似於const的作用。true爲允許變量被重寫
* 【】注意:要啓用no-global-assign規則來禁止對只讀的全局變量進行修改。
*/
globals: {
// gTool: true, // 例如定義gTool這個全局變量,且這個變量可以被重寫
},
/**
* 插件
* http://eslint.cn/docs/user-guide/configuring#configuring-plugins
* 【】插件同樣需要在node_module中下載
* 【】注意插件名忽略了「eslint-plugin-」前綴,所以在package.json中,對應的項目名是「eslint-plugin-vue」
* 【】插件的作用類似於解析器,用以擴展解析器的功能,用於檢測非常規的js代碼。也可能會新增一些特定的規則。
* 【】如 eslint-plugin-vue,是爲了幫助我們檢測.vue文件中 <template> 和 <script> 中的js代碼
*/
plugins: [
'vue'
],
/**
* 規則繼承
* http://eslint.cn/docs/user-guide/configuring#extending-configuration-files
*【】可繼承的方式有以下幾種
*【】eslint內置推薦規則,就只有一個,即「eslint:recommended」
*【】可共享的配置, 是一個 npm 包,它輸出一個配置對象。即通過npm安裝到node_module中
* 可共享的配置可以省略包名的前綴 eslint-config-,即實際設置安裝的包名是 eslint-config-airbnb-base
*【】從插件中獲取的規則,書寫規則爲 「plugin:插件包名/配置名」,其中插件報名也是可以忽略「eslint-plugin-」前綴。如'plugin:vue/essential'
*【】從配置文件中繼承,即繼承另外的一個配置文件,如'./node_modules/coding-standard/eslintDefaults.js'
*/
extends: [
'plugin:vue/essential', // 額外添加的規則可查看 https://vuejs.github.io/eslint-plugin-vue/rules/
/**
* 「airbnb,愛彼迎」
* 【】有兩種eslint規範,一種是自帶了react插件的「eslint-config-airbnb」,一種是基礎款「eslint-config-airbnb-base」,
* 【】airbnb-base 包括了ES6的語法檢測,需要依賴 「eslint-plugin-import」
* 【】所以在使用airbnb-base時,需要用npm額外下載 eslint-plugin-import
* 【】所以eslint實際上已經因爲 airbnb-base 基礎配置項目,添加上了 eslint-plugin-import 插件配置
* 【】所以在setting和rules裏,都有 'import/xxx' 項目,這裏修改的就是 eslint-plugin-import 配置
*/
'airbnb-base',
],
/**
* 規則共享參數
* http://eslint.cn/docs/user-guide/configuring#adding-shared-settings
* 【】提供給具體規則項,每個參數值,每個規則項都會被注入該變量,但對應規則而言,有沒有用,就看各個規則的設置了,就好比 parserOptions,解析器用不用它就不知道了。這裏只是提供這個方法
* 【】不用懷疑,經源碼驗證,這就是傳遞給每個規則項的,會當做參數傳遞過去,但用不用,就是具體規則的事情
*/
settings: {
/**
*
* 注意,「import/resolver」並不是eslint規則項,與rules中的「import/extensions」不同。它不是規則項
* 這裏只是一個參數名,叫「import/resolver」,會傳遞給每個規則項。
* settings並沒有具體的書寫規則,「import/」只是import模塊自己起的名字,原則上,它直接命名爲「resolver」也可以,加上「import」只是爲了更好地區分。不是強制設置的。
* 因爲「import」插件很多規則項都用的這個配置項,所以並沒有通過rules設置,而是通過settings共享
* 具體使用方法可參考https://github.com/benmosher/eslint-plugin-import
*/
'import/resolver': {
/**
* 這裏傳入webpack並不是import插件能識別webpack,而且通過npm安裝了「eslint-import-resolver-webpack」,
* 「import」插件通過「eslint-import-resolver-」+「webpack」找到該插件並使用,就能解析webpack配置項。使用裏面的參數。
* 主要是使用以下這些參數,共享給import規則,讓其正確識別import路徑
* extensions: ['.js', '.vue', '.json'],
* alias: {
* 'vue$': 'vue/dist/vue.esm.js',
* '@': resolve('src'),
* 'static': resolve('static')
* }
*/
webpack: {
config: 'build/webpack.base.conf.js'
}
}
},
/**
* 針對特定文件的配置
* 【】可以通過overrides對特定文件進行特定的eslint檢測
* 【】特定文件的路徑書寫使用Glob格式,一個類似正則的路徑規則,可以匹配不同的文件
* 【】配置幾乎與 ESLint 的其他配置相同。覆蓋塊可以包含常規配置中的除了 extends、overrides 和 root 之外的其他任何有效配置選項,
*/
overrides: [
{
'files': ['bin/*.js', 'lib/*.js'],
'excludedFiles': '*.test.js',
'rules': {
'quotes': [2, 'single']
}
}
],
/**
* 自定義規則
* http://eslint.cn/docs/user-guide/configuring#configuring-rules
* 【】基本使用方式
* "off" 或者0 關閉規則
* "warn" 或者1 將規則打開爲警告(不影響退出代碼)
* "error" 或者2 將規則打開爲錯誤(觸發時退出代碼爲1)
* 如:'no-restricted-syntax': 0, // 表示關閉該規則
* 【】如果某項規則,有額外的選項,可以通過數組進行傳遞,而數組的第一位必須是錯誤級別。如0,1,2
* 如 'semi': ['error', 'never'], never就是額外的配置項
*/
rules: {
/**
* 具體規則
* 【】具體的規則太多,就不做介紹了,有興趣的同學可以上eslint官網查
* 【】注意 xxx/aaa 這些規則是 xxx 插件自定的規則,在eslint官網是查不到的。需要到相應的插件官網中查閱
* 【】如 import/extensions,這是「eslint-plugin-import」自定義的規則,需要到其官網查看 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, // 不允許使用++符號
"object-shorthand": ["error", "always", { "avoidQuotes": false }], // 去除禁止'videoData.isPause'(newValue) 的命名
"no-lonely-if": 0, // 不允許給函數參數重新賦值
"no-param-reassign": 0, // 不允許給函數參數重新賦值
"no-mixed-operators": 0, // 不允許混合使用運算符
"no-underscore-dangle": 0, // 不允許下劃線作爲變量名之一
"no-under": 0, // 不允許混合使用運算符
'generator-star-spacing': 'off',
'no-console': 'off', // 禁用no-console規則
'semi': ['error', 'never'], // 行尾不使用分號
'comma-dangle': ['error'],
'eqeqeq': 0, // 不需要強制使用全等
'max-len': 0,
'radix': 0,// parseInt不需要傳第二個參數
'linebreak-style': 0, // 強制執行一致的換行樣式,windows和mac不一樣
'consistent-return': 0, // 箭頭函數最後不需要最後強制return值
'no-unused-expressions': ["error", { "allowShortCircuit": true, "allowTernary": true }], // 允許您在表達式中使用三元運算符
'no-multi-spaces': ['error', { "ignoreEOLComments": true }],
}
}
最後
爲了幫助大家讓學習變得輕鬆、高效,給大家免費分享一大批資料,幫助大家在成爲全棧工程師,乃至架構師的路上披荊斬棘。在這裏給大家推薦一個前端全棧學習交流圈:866109386.歡迎大家進羣交流討論,學習交流,共同進步。
當真正開始學習的時候難免不知道從哪入手,導致效率低下影響繼續學習的信心。
但最重要的是不知道哪些技術需要重點掌握,學習時頻繁踩坑,最終浪費大量時間,所以有有效資源還是很有必要的。
最後祝福所有遇到瓶疾且不知道怎麼辦的前端程序員們,祝福大家在往後的工作與面試中一切順利。