1. 通過(guò) vue.config.js 禁用

這是最直接且推薦的方式，因?yàn)樗苯釉赩ue CLI的配置中禁用ESLint。通過(guò)在項(xiàng)目根目錄下創(chuàng)建或修改 vue.config.js 文件，并設(shè)置 lintOnSave 為 false，可以徹底禁用保存時(shí)的ESLint檢查。

// vue.config.js 
module.exports = { 
lintOnSave: false 
};

2. 修改 .eslintrc.* 文件

雖然這種方法可以禁用所有ESLint規(guī)則，但它實(shí)際上并沒(méi)有從項(xiàng)目中移除ESLint，只是將其配置為不報(bào)告任何問(wèn)題。如果你只是想臨時(shí)禁用ESLint檢查，這可能是一個(gè)快速的方法，但通常不推薦這樣做，因?yàn)樗赡軙?huì)隱藏潛在的代碼問(wèn)題。

// .eslintrc.json  
{  
  "rules": {  
    "*": "off"  
  }  
}

注意：上面的配置實(shí)際上是無(wú)效的，因?yàn)镋SLint不支持使用通配符（ * ）來(lái)禁用所有規(guī)則。你需要明確指定每個(gè)規(guī)則或使用預(yù)設(shè)配置來(lái)禁用它們。

3. 修改 package.json 文件

通過(guò)在 scripts 部分添加 --no-lint 標(biāo)志到Vue CLI服務(wù)的命令中，可以繞過(guò)ESLint檢查。這種方法對(duì)于臨時(shí)禁用ESLint或在特定情況下很有用。

// package.json  
"scripts": {  
  "serve": "vue-cli-service serve --no-lint",  
  "build": "vue-cli-service build --no-lint",  
  "lint": "vue-cli-service lint" // 保留此命令以便將來(lái)需要時(shí)可以手動(dòng)運(yùn)行ESLint  
}

4. 在IDE中禁用ESLint插件

如果你的IDE（如VSCode、WebStorm等）集成了ESLint插件，并且你希望在該環(huán)境中禁用ESLint，你應(yīng)該在IDE的設(shè)置中查找并禁用ESLint插件或相關(guān)配置。

5. 使用環(huán)境變量

雖然Vue CLI沒(méi)有直接提供通過(guò)環(huán)境變量來(lái)禁用ESLint的官方方法，但你可以通過(guò)腳本或npm鉤子來(lái)間接實(shí)現(xiàn)。然而，ESLINT_NO_DEV_ERRORS 并不是Vue CLI識(shí)別的環(huán)境變量，所以這個(gè)方法可能不適用于Vue CLI項(xiàng)目。

注意事項(xiàng)

• 禁用ESLint會(huì)失去代碼質(zhì)量和風(fēng)格一致性的自動(dòng)檢查，這可能會(huì)在長(zhǎng)期內(nèi)導(dǎo)致代碼質(zhì)量下降。
• 在生產(chǎn)環(huán)境中，建議保持ESLint啟用，以確保代碼的質(zhì)量和可維護(hù)性。
• 如果你的團(tuán)隊(duì)決定禁用ESLint，請(qǐng)確保所有成員都了解這一決定，并采取其他措施來(lái)保持代碼質(zhì)量。

總之，禁用ESLint應(yīng)謹(jǐn)慎考慮，并根據(jù)項(xiàng)目的具體需求和團(tuán)隊(duì)的決策來(lái)做出決定。

拓展：Vue Eslint語(yǔ)法檢測(cè)工具

一、ESlint 簡(jiǎn)介

1. Lint 的含義

如果你寫(xiě)自己的項(xiàng)目怎么折騰都沒(méi)關(guān)系，但是在公司中老板希望每個(gè)人寫(xiě)出的代碼都要符合一個(gè)統(tǒng)一的規(guī)則，這樣別人看源碼就能夠看得懂，因?yàn)樵创a是符合統(tǒng)一的編碼規(guī)范制定的。

那么問(wèn)題來(lái)了，總不能每個(gè)人寫(xiě)的代碼老板都要一行行代碼去檢查吧，這是一件很蠢的事情。凡是重復(fù)性的工作，都應(yīng)該被制作成工具來(lái)節(jié)約成本。這個(gè)工具應(yīng)該做兩件事情：

• 提供編碼規(guī)范；
• 提供自動(dòng)檢驗(yàn)代碼的程序，并打印檢驗(yàn)結(jié)果：告訴你哪一個(gè)文件哪一行代碼不符合哪一條編碼規(guī)范，方便你去修改代碼。

Lint 因此而誕生。

Lint 是檢驗(yàn)代碼格式工具的一個(gè)統(tǒng)稱(chēng)，具體的工具有 Jslint 、 Eslint 等等。

2. ESlint 是什么

Eslint是一款前端VUE開(kāi)發(fā)語(yǔ)法檢測(cè)的工具，是用 JavaScript 語(yǔ)言編寫(xiě)的。

二、ESlint 的使用

1. 安裝依賴(lài)包

--save-dev 會(huì)把 eslint 安裝到 package.json 文件中的 devDependencies 屬性中，意思是只是開(kāi)發(fā)階段用到這個(gè)包，上線(xiàn)時(shí)就不需要這個(gè)包了。

$ npm install eslint --save-dev

2. 設(shè)置 package.json 文件

打開(kāi) package.json 文件，修改 script 屬性如下：

"scripts": {
    "test": "react-scripts test --env=jsdom",
    "lint": "eslint src",
    "lint:create": "eslint --init"
}

script 屬性的意思是腳本，使用方法是在 cmd 窗口中輸入 npm run 指令 的形式，如：npm run lint:create；
"lint:create": "eslint --init" 這個(gè)腳本是為了生成 .eslintrc.js 文件，在介紹 Lint 的時(shí)候說(shuō)到 Lint 應(yīng)該提供編碼規(guī)范，規(guī)范寫(xiě)在哪里，就寫(xiě)在這個(gè)文件，所以我們需要?jiǎng)?chuàng)建它；
"lint": "eslint src" 在介紹 Lint 的時(shí)候也說(shuō)到 Lint 應(yīng)該提供自動(dòng)校驗(yàn)代碼的程序，這個(gè)腳本是讓 Lint 自動(dòng)檢驗(yàn) src 目錄下所有的 .js 文件。

3. 創(chuàng)建 .eslint.js 文件

$ npm run lint:create

> 20170811@0.1.0 lint:create D:\code\test\20170811
> eslint --init

? How would you like to configure ESLint? Answer questions about your style // 以問(wèn)答的形式創(chuàng)建配置文件
? Are you using ECMAScript 6 features? Yes      // 是否校驗(yàn) Es6 語(yǔ)法
? Are you using ES6 modules? Yes                // 是否校驗(yàn) Es6 模塊語(yǔ)法
? Where will your code run? Browser             // 代碼運(yùn)行環(huán)境，Browser 指瀏覽器
? Do you use CommonJS? Yes                      // 是否校驗(yàn) CommonJs 語(yǔ)法
? Do you use JSX? Yes                           // 是否校驗(yàn) JSX 語(yǔ)法
? Do you use React? Yes                         // 是否校驗(yàn) React 語(yǔ)法
? What style of indentation do you use? Tabs    // 首行空白選擇 Tab 鍵還是 Space
? What quotes do you use for strings? Double    // 字符串使用單引號(hào) 'string' 還是雙引號(hào) "string"
? What line endings do you use? Windows         // 操作系統(tǒng)
? Do you require semicolons? Yes                // 每行代碼結(jié)尾是否校驗(yàn)加分號(hào) ;
? What format do you want your config file to be in? JavaScript     // 以 .js 格式生成配置文件
Installing eslint-plugin-react@latest   // 因?yàn)橐ｒ?yàn) Reac 語(yǔ)法，所以這里需要下載一個(gè) React 語(yǔ)法規(guī)則的包

創(chuàng)建完成后根目錄下應(yīng)該會(huì)出現(xiàn) .eslintrc.js 文件

4. 創(chuàng)建 index.js 文件

在根目錄下創(chuàng)建 src/index.js 文件，內(nèi)容如下，接下來(lái)就使用 Eslint 來(lái)檢驗(yàn)這個(gè) .js 文件是否符合編碼規(guī)范。

const lint = 'eslint'

此時(shí)的目錄結(jié)構(gòu)應(yīng)該為：

- test-eslint
    + .eslintrc.js
    + package.json
    - src
        + index.js

5. 校驗(yàn)代碼

$ npm run lint

    1:7   error  'lint' is assigned a value but never used  no-unused-vars
    1:14  error  Strings must use doublequote               quotes
    1:22  error  Missing semicolon                          semi

    3 problems (3 errors, 0 warnings)
    2 errors, 0 warnings potentially fixable with the `--fix` option.

這里報(bào)了三個(gè)錯(cuò)誤，分別是：

• index.js 第1行第7個(gè)字符，報(bào)錯(cuò)編碼規(guī)則為 no-unused-vars：變量 lint 只定義了，但是未使用；
• index.js 第1行第14個(gè)字符，報(bào)錯(cuò)編碼規(guī)則為 quotes：編碼規(guī)范字符串只能使用雙引號(hào)，這里卻使用了單引號(hào)；
• index.js 第1行第22個(gè)字符，報(bào)錯(cuò)編碼規(guī)則為 semi：編碼規(guī)范每行代碼結(jié)尾必須加分號(hào)，這里沒(méi)有加分號(hào)。

當(dāng)我們熟悉了編碼規(guī)范之后，只需進(jìn)行響應(yīng)的修改就可以使代碼形成統(tǒng)一的風(fēng)格。剛開(kāi)始如果對(duì)編碼規(guī)范具體某一條規(guī)則不了解的話(huà)，可以在 eslint規(guī)則表 查看用法。（不建議去背規(guī)則表，而是用到什么查什么，把它當(dāng)成字典來(lái)用，不那么累）

6. 自動(dòng)修正語(yǔ)法錯(cuò)誤

設(shè)置 --fix 參數(shù)可以自動(dòng)修正語(yǔ)法錯(cuò)誤

打開(kāi) package.json 文件，修改 script 屬性如下：

"scripts": {
    "test": "react-scripts test --env=jsdom",
    "lint": "eslint src --fix",
    "lint:create": "eslint --init"
}

說(shuō)明：這里給 "lint": "eslint src --fix", 加上 --fix 參數(shù)，是 Eslint 提供的自動(dòng)修復(fù)基礎(chǔ)錯(cuò)誤的功能。

此時(shí)運(yùn)行 npm run lint 會(huì)看到少了兩條報(bào)錯(cuò)信息，并不是說(shuō)編碼規(guī)范變了，而是 Eslint 自動(dòng)修復(fù)了基礎(chǔ)錯(cuò)誤，打開(kāi) index.js 文件，可看到字符串自動(dòng)變成了雙引號(hào)，并且代碼末尾也加上了分號(hào)?？上У氖?--fix 只能修復(fù)基礎(chǔ)的不影響代碼邏輯的錯(cuò)誤，像 no-unused-vars 這種錯(cuò)誤只能手動(dòng)修改。

三、ESlint 配置文件講解

按照上述操作，會(huì)在根目錄下面生成默認(rèn) .eslintrc.js 配置文件，內(nèi)容如下：

// .eslintrc.js 
module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

該文件導(dǎo)出一個(gè)對(duì)象，對(duì)象包含屬性 env、extends、parserOptions、plugins、rules 五個(gè)屬性，作為剛學(xué)習(xí) Eslint 的新手，我們總是想要竭盡所能的詳細(xì)了解每一個(gè)屬性是什么，干嘛用的，以獲取小小的安全感。

1. env、parserOptions、plugins

這三個(gè)放在一起將是因?yàn)槟阒恍枰浪鼈兪歉陕锏模何业某绦蚶镆玫?ES6 、React 、JSX 語(yǔ)法，這幾個(gè)屬性就是讓 Eslint 能夠檢驗(yàn)到這些語(yǔ)法的。其余的你不需要知道更多的哪怕一丟丟的東東了。

作者在學(xué)習(xí)之初在這塊浪費(fèi)了很多時(shí)間，官方文檔看了很多遍，大多不能理解什么意思，后來(lái)想它既然提供這么一個(gè)自動(dòng)生成配置文件的工具，并且是命令行交互的方式，我只需要告訴它我要用 ES6 、React 、JSX 語(yǔ)法，它會(huì)自動(dòng)進(jìn)行相關(guān)配置滿(mǎn)足我的要求即可。

2. extends

前面一直說(shuō)檢驗(yàn)代碼遵循編碼規(guī)范，那到底是什么規(guī)范呢。

值為 “eslint:recommended” 的 extends 屬性啟用一系列核心規(guī)則，這些規(guī)則是經(jīng)過(guò)前人驗(yàn)證的最佳實(shí)踐（所謂最佳實(shí)踐，就是大家伙都覺(jué)得應(yīng)該遵循的編碼規(guī)范），想知道最佳實(shí)踐具體有哪些編碼規(guī)范，可以在 eslint規(guī)則表 中查看被標(biāo)記為 √ 的規(guī)則項(xiàng)。

如果覺(jué)得官方提供的默認(rèn)規(guī)則不好用，可以自定義規(guī)則配置文件，然后發(fā)布成 Npm 包，eslint-config-airbnb 就是別人自定義的編碼規(guī)范，使用 npm 安裝后，在我們自己的 .eslintrc.js 中進(jìn)行配置 “extends”: “airbnb”，eslint-config 這個(gè)前綴可以省略不寫(xiě)，這樣我們就使用了 eslint-config-airbnb 中的規(guī)則，而不是官方的規(guī)則 “extends”:“eslint:recommended” 了。關(guān)于如何創(chuàng)建自定義規(guī)則配置并共享可以參考： 如何自定義規(guī)則配置

關(guān)于 “airbnb” 編碼規(guī)范說(shuō)兩句，在接觸到大多數(shù)開(kāi)源項(xiàng)目中，大多數(shù)的作者都會(huì)使用 “airbnb” 編碼規(guī)范而不是 官方的 “extends”: “eslint:recommended” 編碼規(guī)范。

如果我們覺(jué)得 eslint-config-airbnb 規(guī)則配置中個(gè)別規(guī)則并不符合當(dāng)前項(xiàng)目的要求，可以直接在 .eslintrc.js 配置 rules 屬性，優(yōu)先級(jí)高于共享規(guī)則 airbnb。

3. rules

配置文件也生成了，我們?cè)趺粗牢覀兊南到y(tǒng)會(huì)遵循什么規(guī)則呢？？

在前面的列子中，使用 npm run lint 校驗(yàn)出了三處錯(cuò)誤，假如我們的項(xiàng)目中字符串就是要使用單引號(hào)而不是雙引號(hào)，代碼結(jié)尾就是要不加分號(hào)才好看，變量就是定義了可能不會(huì)使用，我們可以通過(guò)設(shè)置 rules 來(lái)定義我們自己的編碼規(guī)范，即規(guī)則。

ESLint 附帶有大量的規(guī)則，修改規(guī)則應(yīng)遵循如下要求：

• “off” 或 0 - 關(guān)閉規(guī)則
• “warn” 或 1 - 開(kāi)啟規(guī)則，使用警告級(jí)別的錯(cuò)誤：warn (不會(huì)導(dǎo)致程序退出)
• “error” 或 2 - 開(kāi)啟規(guī)則，使用錯(cuò)誤級(jí)別的錯(cuò)誤：error (當(dāng)被觸發(fā)的時(shí)候，程序會(huì)退出)

有的規(guī)則沒(méi)有屬性，只需控制是開(kāi)啟還是關(guān)閉，像這樣：“eqeqeq”: “off”，有的規(guī)則有自己的屬性，使用起來(lái)像這樣：“quotes”: [“error”, “double”]，具體有沒(méi)有自帶屬性，可查看 eslint規(guī)則表。

修改 .eslintrc.js 文件中的 rules 屬性：

"rules": {
    "indent": [
        "error",
        "tab"
    ],
    "linebreak-style": [
        "error",
        "windows"
    ],
    "quotes": [
        "error",
        "single"        // 改成字符串必須由單引號(hào)括起來(lái)而不是雙引號(hào)，'string'不報(bào)錯(cuò)，"string"報(bào)錯(cuò)
    ],
    "semi": [
        "error",
        "never"         // 改成代碼結(jié)尾不再加分號(hào)，加了分號(hào)報(bào)錯(cuò)，不加分號(hào)不報(bào)錯(cuò)
    ],
    "no-unused-vars": 0 // 0 相當(dāng)于 off，表示關(guān)閉規(guī)則，相當(dāng)于不再校驗(yàn)這條規(guī)則：變量定義了必須使用
}

此時(shí)再使用 npm run lint 進(jìn)行代碼校驗(yàn)，沒(méi)有報(bào)錯(cuò)就說(shuō)明校驗(yàn)通過(guò)，代碼符合統(tǒng)一編碼規(guī)范。

D:\code\test\20170811>npm run lint

> 20170811@0.1.0 lint D:\code\test\20170811
> eslint src


D:\code\test\20170811>

4. 可能存在的疑問(wèn)

剛接觸 ESlint ，并不清楚有哪些規(guī)則怎么辦，要去 eslint規(guī)則表 一條條記憶嗎？答案是 no。

個(gè)人認(rèn)為 ESlint 的配置文件并不是一次性完成的，而是在項(xiàng)目過(guò)程中慢慢完善的。你可以放心大膽的先進(jìn)行編碼，然后使用 npm run lint 校驗(yàn)代碼的編碼規(guī)范，如果這時(shí)候報(bào)錯(cuò)，可以在報(bào)錯(cuò)信息中知道是哪一條編碼規(guī)范報(bào)錯(cuò)了，你可能并不認(rèn)識(shí)它們，此時(shí)去 eslint規(guī)則表 查詢(xún)相應(yīng)規(guī)則的使用方法，如：no-unused-vars，從而進(jìn)一步確定項(xiàng)目中是否需要這條編碼規(guī)范，如果需要，進(jìn)行局部調(diào)整即可。

$ npm run lint

    1:7   error  'lint' is assigned a value but never used  no-unused-vars
    1:14  error  Strings must use doublequote               quotes
    1:22  error  Missing semicolon                          semi

    3 problems (3 errors, 0 warnings)
    2 errors, 0 warnings potentially fixable with the `--fix` option.

四、ESlint 高級(jí)設(shè)置

1. 單行跳過(guò) lint 校驗(yàn)

在實(shí)際編碼時(shí)，可能會(huì)出現(xiàn)以下的代碼。

const apple = "apple";
const balana = "balana";

module.exports = {
    fruit: balana ;
}

在最上面定義了兩個(gè)變量，在底部的配置文件中只可能用到其中一個(gè)變量，另一個(gè)用不到的在 eslint 校驗(yàn)時(shí)就會(huì)報(bào)錯(cuò) no-unused-vars 的錯(cuò)誤，意思是變量定義了但是沒(méi)有被用到。

其中一種解決方案是在 .eslintrc 文件中配置 rules no-unused-vars: 0，意思是項(xiàng)目中不檢驗(yàn)變量定義未使用這條規(guī)則。強(qiáng)烈不建議這樣做，這個(gè)規(guī)則十分有用，可以規(guī)避編寫(xiě)代碼時(shí)遺漏的變量。

另一種解決方案就是使用行內(nèi)注釋跳過(guò)對(duì) apple 和 balana 兩個(gè)變量跳過(guò) eslint 校驗(yàn)，只影響這兩個(gè)變量，不影響外部。

const apple = "apple";  // eslint-disable-line
const balana = "balana";  // eslint-disable-line
  
module.exports = {
    fruit: balana ;
}

此時(shí)使用 eslint 校驗(yàn)時(shí)就不會(huì)再報(bào)錯(cuò)了。

2. 常見(jiàn)規(guī)則含義解釋

object-shorthand 設(shè)置該規(guī)則，表示對(duì)象屬性要簡(jiǎn)寫(xiě)

var foo = {x: x};    // 會(huì)報(bào)錯(cuò)
var bar = {a: function () {}};  // 會(huì)報(bào)錯(cuò)
var foo = {x};    // 不會(huì)報(bào)錯(cuò)
var bar = {a () {}};    // 不會(huì)報(bào)錯(cuò)

prefer-arrow-callback 要求回調(diào)函數(shù)使用箭頭函數(shù)

// 回調(diào)函數(shù)，函數(shù)的參數(shù)是個(gè)函數(shù)，這個(gè)參數(shù)函數(shù)就是回調(diào)函數(shù)
funciton bar () {}      // 不是回調(diào)函數(shù)，不會(huì)報(bào)錯(cuò)
// setTimeout 的第一個(gè)參數(shù)就是回調(diào)函數(shù)，不用箭頭函數(shù)會(huì)報(bào)錯(cuò)
setTimeout(() => {
    // .......
}, 1000)

no-param-reassign 禁止對(duì)函數(shù)的參數(shù)重新賦值

no-shadow 禁止變量聲明與外層作用域的變量同名

function sum (num) {
  let num = 2;    // 報(bào)錯(cuò)，因?yàn)?num 變量作為參數(shù)已經(jīng)申明過(guò)了
}

3. 常用的幾個(gè)規(guī)則

"quotes": [1, "single"],            # 單引號(hào)
"quote-props":[2, "as-needed"],     # 雙引號(hào)自動(dòng)變單引號(hào)
"semi": [2, "never"],               # 一行結(jié)尾不要寫(xiě)分號(hào)
"comma-dangle": [1,"always-multiline"]  # 對(duì)象或數(shù)組多行寫(xiě)法時(shí)，最后一個(gè)值加逗號(hào)

ESLint 官方文檔：https://eslint.bootcss.com/docs/rules/

五、VSCode 配置自動(dòng)ESLint自動(dòng)修復(fù)

1、打開(kāi)VSCode，搜索 ESLint 插件，并安裝，如下圖：

2、設(shè)置 VSCode 保存時(shí)，自動(dòng)進(jìn)行語(yǔ)法修復(fù)

(1) 按照如下所示，打開(kāi) settings.json 文件：

(2) 在 settings.json 文件最后加上保存自動(dòng)修復(fù)配置：

"editor.codeActionsOnSave": {
		"source.fixAll.eslint": true,
		"eslint.autoFixOnSave" : true,
}		

文件保存之后，就可以自動(dòng)修復(fù)代碼。

以上就是Vue項(xiàng)目中禁用ESLint的幾種常見(jiàn)方法小結(jié)的詳細(xì)內(nèi)容，更多關(guān)于Vue禁用ESLint的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論