vue如何關(guān)閉eslint檢查

在實(shí)際開(kāi)發(fā)過(guò)程中，eslint的作用不可估量，諸如：

• 1.審查代碼是否符合編碼規(guī)范和統(tǒng)一的代碼風(fēng)格；
• 2.審查代碼是否存在語(yǔ)法錯(cuò)誤；

But，對(duì)于初學(xué)者來(lái)說(shuō)，這個(gè)功能極其不友好，各種問(wèn)題層出不窮，讓很多初學(xué)者頭疼不已，我們有沒(méi)有辦法關(guān)掉它，等適當(dāng)時(shí)機(jī)在啟用它呢，答案是肯定的。

不同vue cli版本創(chuàng)建工程的時(shí)候，稍微有些差別，要仔細(xì)甄別，我的vue cli v4.5.9

方案一

vue腳手架創(chuàng)建工程的時(shí)候，不要選擇Linter / Formatter選項(xiàng)，（那如何選擇啟用，請(qǐng)參照方案二）

方案二

假設(shè)我們已經(jīng)啟用了eslint，找到我們工程目錄下的package.json，將‘devDependencies’中的依賴(lài)刪掉（我的是eslint、eslint-plugin-vue、@vue/cli-plugin-eslint這三個(gè)），然后執(zhí)行npm install，然后重啟服務(wù)，你會(huì)發(fā)現(xiàn).eslintrc.js文件的作用已經(jīng)失效。

同樣，如果要啟用還得安裝上這幾個(gè)依賴(lài)包，顯然，并不是那么犀利順暢。

方案三

通過(guò)vue.config.js配置lintOnSave

先來(lái)看看vue.config.js是個(gè)啥，官網(wǎng)給的解釋是：

vue.config.js是一個(gè)可選的配置文件，如果項(xiàng)目的 (和package.json同級(jí)的) 根目錄中存在這個(gè)文件，那么它會(huì)被@vue/cli-service自動(dòng)加載。

vue.config.js官網(wǎng), 其中一條就關(guān)于配置eslint的。

lintOnSave

Type:boolean|'warning'|'default'|'error'

Default:'default'

是否在開(kāi)發(fā)環(huán)境下通過(guò)eslint-loader在每次保存時(shí) lint 代碼。

這個(gè)值會(huì)在@vue/cli-plugin-eslint被安裝之后生效。

如果你想關(guān)閉eslint，可以將之設(shè)置為false，重啟服務(wù)

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

設(shè)置為true或'warning'時(shí)，eslint-loader會(huì)將 lint 錯(cuò)誤輸出為編譯警告。

默認(rèn)情況下，警告僅僅會(huì)被輸出到命令行，且不會(huì)使得編譯失敗。

如果你希望讓 lint 錯(cuò)誤在開(kāi)發(fā)時(shí)直接顯示在瀏覽器中，你可以使用lintOnSave: 'default'。

這會(huì)強(qiáng)制eslint-loader將 lint 錯(cuò)誤輸出為編譯錯(cuò)誤，同時(shí)也意味著 lint 錯(cuò)誤將會(huì)導(dǎo)致編譯失敗。

設(shè)置為error將會(huì)使得eslint-loader把 lint 警告也輸出為編譯錯(cuò)誤，這意味著 lint 警告將會(huì)導(dǎo)致編譯失敗。

或者，你也可以通過(guò)設(shè)置讓瀏覽器 overlay 同時(shí)顯示警告和錯(cuò)誤：

// vue.config.js
module.exports = {
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  }
}

當(dāng)lintOnSave是一個(gè) truthy 的值時(shí)，eslint-loader在開(kāi)發(fā)和生產(chǎn)構(gòu)建下都會(huì)被啟用。如果你想要在生產(chǎn)構(gòu)建時(shí)禁用eslint-loader，你可以用如下配置：

// vue.config.js
module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production'
}

方案四

通過(guò)eslintrc.js控制，后續(xù)補(bǔ)充

其實(shí)這個(gè)并不能關(guān)閉檢測(cè)，只不過(guò)是讓你的eslint檢測(cè)更人性化一點(diǎn)，以什么樣的規(guī)則去檢測(cè)您的代碼，每個(gè)項(xiàng)目配置不盡相同，選擇適合自己的即可，可以參照官網(wǎng)的配置。

Introduction | eslint-plugin-vue (vuejs.org)

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論