前言
ESLint 是一個(gè)廣泛使用的 JavaScript 代碼檢查工具档冬，可以幫助開(kāi)發(fā)者在編寫代碼時(shí)發(fā)現(xiàn)并修復(fù)潛在的問(wèn)題和錯(cuò)誤。
在 第一步 創(chuàng)建工程 時(shí)雖然已經(jīng)選擇了包含 ESLint 預(yù)設(shè)配置，但還需要做一些調(diào)整沾瓦，讓我們使用起來(lái)能夠更加的絲滑朱转。
vue.config.js 檢測(cè)開(kāi)關(guān)和模式
module.exports = {
// 是否每次保存時(shí) lint 代碼,可選值 (boolean | 'warning' | 'default' | 'error') 默認(rèn) 'default'
lintOnSave: 'default'
}
如不想使用 ESLint 將值設(shè)置為false即可。
具體可以參考 Vue CLI 官方文檔中的 vue.config.js lintOnSave 配置參考
配置方式1
1.1 package.json 中 eslintConfig 模塊說(shuō)明：
在你的項(xiàng)目根目錄下授翻，找到一個(gè)名為 package.json 的文件或悲，并找到文件中 eslintConfig 模塊塊孙咪，當(dāng)前版本內(nèi)容如下所示：
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
}
這個(gè)部分配置定義了一些ESLint的基本配置選項(xiàng)：
-
"root": true指定此配置文件為根配置文件，即停止在父級(jí)目錄中尋找其他配置文件巡语。 -
"env": {"node": true}指定代碼的環(huán)境為 Node.js 環(huán)境翎蹈，在 Node.js 項(xiàng)目中使用 ESLint 時(shí)需要設(shè)置。 -
"extends": ["plugin:vue/essential", "eslint:recommended"]繼承的 ESLint 配置男公。在此配置中荤堪，繼承了 Vue 的插件 plugin:vue/essential 和 ESLint 的推薦配置 eslint:recommended 。plugin:vue/essential 提供了一組用于 Vue.js 項(xiàng)目的 ESLint 規(guī)則枢赔，eslint:recommended 提供了一組廣泛認(rèn)可的通用規(guī)則澄阳。 -
"parserOptions": {"parser": "@babel/eslint-parser"}指定 ESLint 解析代碼的解析器。在這個(gè)例子中踏拜，使用了@babel/eslint-parser碎赢，它是一個(gè)基于 Babel 的解析器，可用于支持 ES6+ 語(yǔ)法特性速梗。 -
"rules": {}可以用于設(shè)置和自定義 ESLint 的規(guī)則肮塞。您可以在這里添加和修改規(guī)則以符合您的代碼風(fēng)格和要求。
1.2 配置忽略檢測(cè)
在 eslintConfig 模塊中添加以下內(nèi)容：
"eslintConfig": {
"ignorePatterns": [
"/node_modules/",
"/dist/",
"/public/",
"*.config.js"
]
}
通過(guò)這個(gè)配置姻锁，您可以告訴 ESLint 忽略這些文件和文件夾枕赵，避免對(duì)不需要進(jìn)行 ESLint 檢查的文件進(jìn)行無(wú)用的檢查，提高檢查效率屋摔。
以下是一些
.eslintignore文件的示例規(guī)則：
**/*.js 忽略所有的.js文件
/node_modules/ 忽略特定的目錄及其所有子目錄
filename.js 忽略特定的文件
path/to/filename.js 忽略某個(gè)具體路徑的文件
更多的細(xì)節(jié)和示例可以在 ESLint官方文檔 中找到.eslintignore的文檔
1.3 配置驗(yàn)證規(guī)則
在 eslintConfig 模塊中 找到 rules 模塊烁设，添加自己想要的規(guī)則：
"rules": {
"no-console": 1
}
規(guī)則配置用于定義代碼中的規(guī)則或約定，幫助開(kāi)發(fā)者編寫更具可讀性和可維護(hù)性的代碼钓试。在這里装黑， no-console 規(guī)則用于檢測(cè)代碼中是否使用了 console 對(duì)象的方法
對(duì)于規(guī)則的值，ESLint使用以下三種不同類型的配置：
"off" 或 0表示關(guān)閉該規(guī)則弓熏，不會(huì)對(duì)代碼進(jìn)行檢查恋谭。
"warn" 或 1表示開(kāi)啟該規(guī)則，并將違反規(guī)則的地方報(bào)告為警告挽鞠，但不會(huì)阻止代碼的執(zhí)行疚颊。
"error" 或 2表示開(kāi)啟該規(guī)則，并將違反規(guī)則的地方報(bào)告為錯(cuò)誤信认，會(huì)阻止代碼的執(zhí)行材义。
配置方式2（當(dāng)前deom采用的方式）
2.1 配置忽略檢測(cè)
在根目錄下創(chuàng)建 .eslintignore 文件
.eslintignore文件是用來(lái)配置ESLint忽略特定文件或目錄的配置文件。當(dāng)ESLint對(duì)代碼進(jìn)行靜態(tài)分析時(shí)嫁赏，它會(huì)檢查項(xiàng)目中的所有文件其掂，包括代碼中的所有目錄和文件。但是潦蝇，有時(shí)候我們可能希望ESLint忽略某些文件或目錄款熬，以避免對(duì)它們進(jìn)行規(guī)范檢查深寥。
.eslintignore文件基本上是一個(gè)包含忽略規(guī)則的文本文件。每一行表示一個(gè)忽略規(guī)則贤牛，規(guī)則可以是通配符模式或具體的文件路徑惋鹅。
以下是當(dāng)前demo工程的.eslintignore文件中的配置內(nèi)容,可作為參考：
/node_modules/
/dist/
/public/
*.config.js
以下是一些
.eslintignore文件的示例規(guī)則：
**/*.js忽略所有的.js文件
/node_modules/忽略特定的目錄及其所有子目錄
filename.js忽略特定的文件
path/to/filename.js忽略某個(gè)具體路徑的文件
更多的細(xì)節(jié)和示例可以在 ESLint官方文檔 中找到.eslintignore的文檔
無(wú)論是使用.eslintignore文件還是在eslintConfig中配置ignorePatterns，都可以指定要忽略的文件或目錄的路徑殉簸。這樣闰集，ESLint 將不會(huì)對(duì)這些文件進(jìn)行任何檢查。
請(qǐng)注意喂链，.eslintignore文件優(yōu)先于eslintConfig中的ignorePatterns返十，即如果兩者都存在妥泉，ESLint將優(yōu)先考慮.eslintignore文件中的配置椭微。
2.2 配置驗(yàn)證規(guī)則
在根目錄新建 .eslintrc.js 文件，添加以下代碼：
module.exports = {
// 指定此配置文件為根配置文件盲链，即停止在父級(jí)目錄中尋找其他配置文件蝇率。
root: true,
// 指定代碼的環(huán)境為 Node.js 環(huán)境，在 Node.js 項(xiàng)目中使用 ESLint 時(shí)需要設(shè)置刽沾。
env: {
node: true,
},
// 繼承的 ESLint 配置本慕。在此配置中，繼承了 Vue 的插件 plugin:vue/essential侧漓。它提供了一組用于 Vue.js 項(xiàng)目的 ESLint 規(guī)則锅尘。
extends: [
'plugin:vue/essential'
],
// 指定全局變量，以告訴 ESLint 在驗(yàn)證過(guò)程中這些變量已經(jīng)定義布蔗，從而避免產(chǎn)生未定義變量的警告
globals: {},
// 指定 ESLint 解析代碼的解析器
parserOptions: {
ecmaVersion: 2018,
sourceType: "module",
},
// 可以用于設(shè)置和自定義 ESLint 的規(guī)則藤违。您可以在這里添加和修改規(guī)則以符合您的代碼風(fēng)格和要求
rules: {
}
}
以下是當(dāng)前demo中的 .eslintrc.js 完整配置代碼，以供參考：
const msgType = process.env.NODE_ENV == "development" ? 1 : 2 // 規(guī)則提示類型
module.exports = {
// 指定此配置文件為根配置文件纵揍，即停止在父級(jí)目錄中尋找其他配置文件顿乒。
root: true,
// 指定代碼的環(huán)境為 Node.js 環(huán)境，在 Node.js 項(xiàng)目中使用 ESLint 時(shí)需要設(shè)置泽谨。
env: {
node: true,
},
// 繼承的 ESLint 配置璧榄。在此配置中，繼承了 Vue 的插件 plugin:vue/essential吧雹。它提供了一組用于 Vue.js 項(xiàng)目的 ESLint 規(guī)則骨杂。
extends: [
"plugin:vue/essential"
],
// 指定全局變量，以告訴 ESLint 在驗(yàn)證過(guò)程中這些變量已經(jīng)定義雄卷，從而避免產(chǎn)生未定義變量的警告
globals: {},
// 指定 ESLint 解析代碼的解析器
parserOptions: {
ecmaVersion: 2018,
sourceType: "module",
},
// 可以用于設(shè)置和自定義 ESLint 的規(guī)則搓蚪。您可以在這里添加和修改規(guī)則以符合您的代碼風(fēng)格和要求
rules: {
"vue/multi-word-component-names": 0, // 組件件名稱是否以駝峰格式命名
"strict": 2, // 使用嚴(yán)格模式
"no-alert": 2, // 禁止使用alert confirm prompt
"no-console": [process.env.ENV_KEY === "development" ? 0 : 1, { allow: ["warn", "error"] }], // 禁止使用console, 只能使用console.warn console.error
"no-debugger": process.env.NODE_ENV === "development" ? 0 : 2, // 禁止使用debugger
"prefer-arrow-callback": msgType, // 首選箭頭函數(shù)
"prefer-const": msgType, // 首選const
"prefer-spread": msgType, // 首選展開(kāi)運(yùn)算
"prefer-template": msgType, // 首選模板字符串
"quotes": [msgType, "single"], // 引號(hào)類型 `` "" ''
// "quote-props": [msgType, "always"], // 對(duì)象字面量中的屬性名是否強(qiáng)制雙引號(hào)
"jsx-quotes": [msgType, "prefer-double"], // 強(qiáng)制在 JSX 屬性中一致使用雙引號(hào)或單引號(hào)
"no-useless-concat": msgType, // 不允許兩個(gè)字符串連接在一起
"no-multi-str": msgType, // 字符串不能用\換行
"no-new": msgType, // 禁止在使用new構(gòu)造一個(gè)實(shí)例后不賦值
"no-new-func": msgType, // 禁止使用new Function
"no-new-object": msgType, // 禁止使用new Object()
"no-new-require": msgType, // 禁止使用new require
"no-new-wrappers": msgType, // 禁止使用new創(chuàng)建包裝實(shí)例，new String new Boolean new Number
"no-array-constructor": msgType, // 不允許使用Array構(gòu)造函數(shù)
"semi": [msgType, "never"], // 語(yǔ)句強(qiáng)制分號(hào)結(jié)尾
"semi-spacing": [msgType, { "before": false, "after": true }], // 分號(hào)前后空格
"no-extra-semi": msgType, // 禁止多余的分號(hào)
"func-style": [msgType, "expression"], // 使用函數(shù)表達(dá)式
"no-underscore-dangle": msgType, // 標(biāo)識(shí)符不能以_開(kāi)頭或結(jié)尾
"no-await-in-loop": msgType, // 不允許await在循環(huán)體內(nèi)使用
"no-bitwise": msgType, // 不允許按位運(yùn)算符
"no-buffer-constructor": msgType, // 不允許調(diào)用和構(gòu)造Buffer()構(gòu)造函數(shù)
"no-caller": msgType, // 阻止使用已棄用和次優(yōu)代碼
"no-catch-shadow": msgType, // 禁止catch子句參數(shù)與外部作用域變量同名
"no-cond-assign": msgType, // 禁止在條件表達(dá)式中使用賦值語(yǔ)句
"no-confusing-arrow": msgType, // 不在可能與比較運(yùn)算符混淆的地方使用箭頭函數(shù)語(yǔ)法
"no-const-assign": msgType, // 禁止修改const聲明的常量
"no-constant-condition": msgType, // 禁止在條件中使用常量表達(dá)式 if(true) if(1)
"no-continue": msgType, // 禁止使用continue
"no-control-regex": msgType, // 禁止在正則表達(dá)式中使用控制字符
"no-delete-var": msgType, // 不能對(duì)var聲明的變量使用delete操作符
"no-div-regex": msgType, // 不能使用看起來(lái)像除法的正則表達(dá)式/=foo/
"no-dupe-args": msgType, // 函數(shù)參數(shù)不能重復(fù)
"no-dupe-class-members": msgType, // 類成員中不能有相同名稱的聲明
"no-dupe-keys": msgType, // 在創(chuàng)建對(duì)象字面量時(shí)不允許鍵重復(fù) {a:1,a:1}
"no-duplicate-case": msgType, // switch中的case標(biāo)簽不能重復(fù)
"no-duplicate-imports": msgType, // 從單個(gè)模塊進(jìn)行的所有導(dǎo)入都以單一import語(yǔ)句存在
"no-empty": msgType, // 塊語(yǔ)句中的內(nèi)容不能為空
"no-empty-character-class": msgType, // 正則表達(dá)式中的[]內(nèi)容不能為空
"no-eq-null": 0, // 禁止對(duì)null使用==或!=運(yùn)算符
"no-eval": msgType, // 禁止使用eval
"no-ex-assign": msgType, // 禁止給catch語(yǔ)句中的異常參數(shù)賦值
"no-extend-native": msgType, // 禁止擴(kuò)展native對(duì)象
"no-extra-bind": msgType, // 禁止不必要的函數(shù)綁定
"no-extra-boolean-cast": msgType, // 禁止不必要的boolean轉(zhuǎn)換
"no-extra-label": msgType, // 消除不必要的標(biāo)簽
"no-extra-parens": msgType, // 禁止非必要的括號(hào)
"no-fallthrough": msgType, // 禁止switch穿透
"no-floating-decimal": msgType, // 禁止省略浮點(diǎn)數(shù)中的0 .5 3.
"no-func-assign": msgType, // 禁止重復(fù)的函數(shù)聲明
"no-global-assign": msgType, // 不允許修改只讀全局變量
"no-implicit-coercion": msgType, // 禁止隱式轉(zhuǎn)換
"no-implied-eval": msgType, // 禁止使用隱式eval
"no-inner-declarations": [msgType, "functions"], // 禁止在塊語(yǔ)句中使用聲明（變量或函數(shù)）
"no-invalid-regexp": msgType, // 禁止無(wú)效的正則表達(dá)式
"no-invalid-this": msgType, // 禁止無(wú)效的this龙亲，只能用在構(gòu)造器陕凹，類悍抑，對(duì)象字面量
"no-irregular-whitespace": msgType, // 不能有不規(guī)則的空格
"no-iterator": msgType, // 禁止使用__iterator__ 屬性
"no-label-var": msgType, // label名不能與var聲明的變量名相同
"no-labels": msgType, // 禁止標(biāo)簽聲明
"no-lone-blocks": msgType, // 禁止不必要的嵌套塊
"no-lonely-if": 0, // 將if語(yǔ)句作為else塊中的唯一語(yǔ)句
"no-mixed-operators": [msgType, {"groups": [["==","!=","===","!==",">",">=","<","<="], ["&&","||"]]}], // 復(fù)雜的表達(dá)式使用括號(hào)
"no-mixed-spaces-and-tabs": msgType, // 禁止混用tab和空格
"no-multi-spaces": msgType, // 不能用多余的空格
"no-multiple-empty-lines": [msgType, { "max": 1 }], // 空行最多不能超過(guò)1行
"no-negated-condition": msgType, // 禁止不必要的否定條件
"no-negated-in-lhs": msgType, // in 操作符的左邊不能有!
"no-nested-ternary": msgType, // 禁止使用嵌套的三目運(yùn)算
"no-obj-calls": msgType, // 不能調(diào)用內(nèi)置的全局對(duì)象，比如Math() JSON()
"no-octal": msgType, // 禁止使用八進(jìn)制數(shù)字
"no-octal-escape": msgType, // 禁止使用八進(jìn)制轉(zhuǎn)義序列
"no-param-reassign": msgType, // 禁止給參數(shù)重新賦值
"no-process-exit": msgType, // 禁止使用process.exit()
"no-proto": msgType, // 禁止使用__proto__屬性
"no-redeclare": msgType, // 禁止重復(fù)聲明變量
"no-regex-spaces": msgType, // 禁止在正則表達(dá)式字面量中使用多個(gè)空格 /foo bar/
"no-return-assign": msgType, // return 語(yǔ)句中不能有賦值表達(dá)式
"no-script-url": msgType, // 禁止使用javascript:void(0)
"no-self-compare": msgType, // 不能比較自身
"no-sequences": msgType, // 禁止使用逗號(hào)運(yùn)算符
"no-shadow": msgType, // 外部作用域中的變量不能與它所包含的作用域中的變量或參數(shù)同名
"no-shadow-restricted-names": msgType, // 嚴(yán)格模式中規(guī)定的限制標(biāo)識(shí)符不能作為聲明時(shí)的變量名使用
"no-spaced-func": msgType, // 函數(shù)調(diào)用時(shí) 函數(shù)名與()之間不能有空格
"no-sparse-arrays": msgType, // 禁止稀疏數(shù)組杜耙， [1,,2]
"no-trailing-spaces": msgType, // 一行結(jié)束后面不要有空格
"no-throw-literal": msgType, // 禁止拋出字面量錯(cuò)誤 throw "error";
"no-undef": msgType, // 不能有未定義的變量
"no-undef-init": msgType, // 變量初始化時(shí)不能直接給它賦值為undefined
"no-undefined": msgType, // 不能使用undefined
"no-unexpected-multiline": msgType, // 避免多行表達(dá)式
"no-unneeded-ternary": msgType, // 禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
"no-unreachable": msgType, // 不能有無(wú)法執(zhí)行的代碼
"no-unused-expressions": msgType, // 禁止無(wú)用的表達(dá)式
"no-unused-vars": [msgType, { "vars": "all", "args": "none" }], // 不能有聲明后未被使用的變量或參數(shù)
"no-use-before-define": msgType, // 未定義前不能使用
"no-useless-call": msgType, // 禁止不必要的call和apply
"no-void": msgType, // 禁用void操作符
"no-var": msgType, // 禁用var搜骡，用let和const代替
"no-with": msgType, // 禁用with
"array-bracket-spacing": [msgType, "never"], // 是否允許非空數(shù)組里面有多余的空格
"arrow-parens": [msgType, "always"], // 箭頭函數(shù)用小括號(hào)括起來(lái)
"arrow-spacing": [msgType, { "before": true, "after": true }], // =>的前/后括號(hào)
"block-scoped-var": msgType, // 塊語(yǔ)句中使用var
"brace-style": [msgType, "1tbs"], // 大括號(hào)風(fēng)格
"camelcase": msgType, // 強(qiáng)制駝峰法命名
"comma-dangle": [msgType, "never"], // 對(duì)象字面量項(xiàng)尾不能有逗號(hào)
"comma-spacing": [msgType, { "before": false, "after": true }], // 逗號(hào)前后的空格
"comma-style": [msgType, "last"], // 逗號(hào)風(fēng)格，換行時(shí)在行首還是行尾
"consistent-this": [msgType, "self"], // this別名
"curly": [msgType, "all"], // 必須使用 if(){} 中的{}
"default-case": msgType, // switch語(yǔ)句最后必須有default
"dot-location": [msgType, "object"], // 對(duì)象訪問(wèn)符的位置佑女，換行的時(shí)候在行首還是行尾
"eqeqeq": 0, // 必須使用全等
"func-names": [msgType, "never"], // 函數(shù)表達(dá)式必須有名字
"indent": [msgType, 2], // 縮進(jìn)風(fēng)格
"init-declarations": [msgType, "always"], // 聲明時(shí)必須賦初值
"key-spacing": [msgType, { "beforeColon": false, "afterColon": true }], // 對(duì)象字面量中冒號(hào)的前后空格
"max-depth": [msgType, 5], // 嵌套塊深度
"max-nested-callbacks": [msgType, 3], // 回調(diào)嵌套深度
"max-params": [msgType, 5], // 函數(shù)最多只能有幾個(gè)參數(shù)
"object-curly-spacing": [msgType, "always"], // 大括號(hào)內(nèi)是否允許不必要的空格
"object-shorthand": msgType, // 強(qiáng)制對(duì)象字面量縮寫語(yǔ)法
"one-var": [msgType, "never"], // 連續(xù)聲明
"operator-assignment": [msgType, "never"], // 賦值運(yùn)算符 += -=什么的
"operator-linebreak": [msgType, "after"], // 換行時(shí)運(yùn)算符在行尾還是行首
"padded-blocks": [msgType, "never"], // 塊語(yǔ)句內(nèi)行首行尾是否要空行
"radix": msgType, // parseInt必須指定第二個(gè)參數(shù)
"space-before-blocks": [msgType, "always"], // 不以新行開(kāi)始的塊{前面要不要有空格
"space-before-function-paren": [msgType, "never"], // 函數(shù)定義時(shí)括號(hào)前面要不要有空格
"space-in-parens": [msgType, "never"], // 小括號(hào)里面要不要有空格
"space-unary-ops": [msgType, { "words": true, "nonwords": false }], // 一元運(yùn)算符的前/后要不要加空格
"use-isnan": msgType, // 禁止比較時(shí)使用NaN记靡，只能用isNaN()
"spaced-comment": [msgType, "always"], // 注釋一致性
"no-path-concat": 0, // node中不能使用__dirname或__filename做路徑拼接
"no-process-env": 0, // 禁止使用process.env
"no-restricted-modules": 0, // 禁用指定node.js模塊，使用就會(huì)報(bào)錯(cuò)
"no-sync": 0, // nodejs 禁止同步方法
"newline-after-var": 0, // 變量聲明后是否需要空一行
}
}
最終根據(jù)當(dāng)前deom的最終配置可刪除以下內(nèi)容团驱，避免無(wú)用代碼導(dǎo)致維護(hù)成本增加：
-
package.json中@babel/eslint-parser開(kāi)發(fā)依賴摸吠。 -
package.json中eslintConfig代碼塊 。 - 如果
.eslintignore文件存在便刪除嚎花。
代碼中的忽略檢測(cè)
/* eslint-disable */ 在文件開(kāi)頭禁用 eslint 檢查
/* eslint-disable no-alert, quotes */ 在文件開(kāi)頭禁用 eslint 指定規(guī)則檢查
// eslint-disable-line 單行禁用eslint檢查
// eslint-disable-line no-alert, quotes 單行禁用指定規(guī)則檢查
// eslint-disable-next-line 禁用下一行eslint檢查
// eslint-disable-next-line no-alert, quotes 下一行禁用指定規(guī)則檢查
框架搭建整體流程
-
第一步 Vue2 使用 Vue 腳手架 Vue CLI 搭建一個(gè) Vue.js 前端項(xiàng)目框架
-
第二步 Vue2 vue.config.js 基礎(chǔ)配置寸痢，路徑別名alias
-
第三步 Vue2 vue.config.js 集成 Less 配置 sourceMap+全局變量
-
第四步 Vue2 配置ESLint
-
第五步 Vue2 vue.config.js 使用image-minimizer-webpack-plugin配置圖片壓縮
-
第六步 Vue2 集成全家桶 vue-router vuex axios 和 element-ui
-
第七步 Webpack 配置多環(huán)境和全局變量 cross-env 和 webpack.DefinePlugin
