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

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

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

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

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

方案一

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

方案二

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

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

方案三

通過vue.config.js配置lintOnSave

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

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

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

lintOnSave

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

Default:'default'

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

這個值會在@vue/cli-plugin-eslint被安裝之后生效。

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

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

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

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

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

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

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

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

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

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

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

方案四

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

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

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

總結(jié)

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

最新評論