vue Eslint校驗(yàn)代碼報(bào)錯

在使用腳手架創(chuàng)建Vue項(xiàng)目時，一般會安裝Eslint插件，這個主要是校驗(yàn)代碼格式和規(guī)范用的，但是它很有點(diǎn)讓人抓狂，因?yàn)楹芏嘈ｒ?yàn)規(guī)則和代碼規(guī)范，你只要不按照它的格式來，直接導(dǎo)致項(xiàng)目編譯報(bào)錯，運(yùn)行不了項(xiàng)目，這個是非常令人討厭的。

它不像idea里安裝alibaba插件，校驗(yàn)代碼規(guī)范只是會提示，并不會導(dǎo)致你項(xiàng)目都不能編譯和運(yùn)行。尤其小白剛學(xué)習(xí)Vue和使用這插件時，那簡直是痛苦不堪，深受其害（有人說不裝那插件不就行了，但個人覺得，代碼規(guī)范任何時候都很重要，裝了是利大于弊），網(wǎng)上看過很多解決方法，零零散散有的也不好使，自己找了一套解決方法，挺好用的，記錄一下。

說了這么多，總結(jié)一下我自己解決這些問題的辦法。

1.空格縮進(jìn)，不讓使用tab

具體英語怎么表達(dá)忘記了，看到就知道了。這個錯誤不是一般的讓人煩，簡直有些讓人無語，誰用誰知道，因?yàn)榇蠖嗔?xí)慣用tab。

先在.eslintrc.js文件里配置rules（有的項(xiàng)目沒有這個文件，具體為什么我還不清楚，沒有的話就自己創(chuàng)建一個吧，按如下格式）：我是直接把indent（縮進(jìn)）給關(guān)掉了，也可以配置其他值，我沒嘗試，這種方式簡單粗暴

然后，需要在package.json里配置rules，這個也要配置的，不然上面配置的rules不會生效：

2.未使用的變量報(bào)錯

idea里這個問題一般只是變量灰色的提示未使用，但是Vue項(xiàng)目里Eslint編譯不通過。

同上，先在.eslintrc.js文件里配置,然后在package.json里配置，配置項(xiàng)為：“no-unused-vars”:"off"，需要注意的是兩個文件里配置的格式不一樣，一個是json格式，一個是單引號格式。

3.分號和引號問題

這個提示錯誤沒法關(guān)掉，Eslint要求字符串使用單引號，行末不能有多余的分號，這個也很煩，與我們常用習(xí)慣相違背。

可以在項(xiàng)目目錄下新建一個.prettierrc文件，這是一個json格式的文件，加上配置，項(xiàng)目啟用它就可以生效。

這里我加了兩項(xiàng)，第一個就是行末分號取消，第二個就是字符串默認(rèn)使用單引號，當(dāng)我們寫好代碼后，格式化代碼（我之前用Eclipse，現(xiàn)在用的idea，格式化代碼快捷鍵都是設(shè)置的ctrl+shift+F），idea就會幫你把分號自動去掉，把雙引號替換為單引號。如果還有其他規(guī)則，也可以往這個文件里添加。

這只是我覺得幾個比較常見又很煩的規(guī)則，配置后解決了寫代碼心情舒暢，其他還有什么自己不喜歡的校驗(yàn)規(guī)則可以用同樣的方式配置重啟即可解決。

vue使用Eslint報(bào)錯

初始化Vue時，再刪掉一些不必要的文件和代碼時，因?yàn)檠b了eslint代碼校驗(yàn)，有一些朋友同事還安裝了代碼自動格式化的插件，有時候就會出現(xiàn)如下的報(bào)錯。

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

此時，我們只需要關(guān)閉eslint的校驗(yàn)即可

解決辦法很簡單

① 項(xiàng)目的代碼中找到.eslintrc.js 文件夾將extends中的’@vue/standard’注釋掉

②在rules中添加’space-before-function-paren’: 0

如下圖，修改完成后，關(guān)閉項(xiàng)目，重新啟動項(xiàng)目即可解決問題！

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