關(guān)于vue的語(yǔ)法規(guī)則檢測(cè)報(bào)錯(cuò)問(wèn)題的解決
搭建了一個(gè)vue項(xiàng)目,在配置路有的時(shí)候,陸續(xù)出現(xiàn)了各種報(bào)錯(cuò)其中最多的是一些寫法,例如空格,縮進(jìn),各種括號(hào),結(jié)果我一句一句對(duì)照,修改相當(dāng)之費(fèi)時(shí)間,效率低,一上午,一個(gè)路由配置都沒(méi)寫好
主要報(bào)錯(cuò)如下:

截取了一段常見(jiàn)報(bào)錯(cuò),選取其中一個(gè):
Expected indentation of 4 spaces but found 1 tab
翻譯一下,意思是:預(yù)期縮進(jìn)4個(gè)空格,但找到1個(gè)選項(xiàng)卡。意思是vue在檢測(cè)寫法規(guī)則的時(shí)候,只認(rèn)空格,不認(rèn)tab的縮進(jìn),這時(shí)你就要修改的頁(yè)面內(nèi)容,把tab換成空格,這樣就比較麻煩,然鵝各種查找原因,找到了解決方案,如下:
一,找到目錄build下的webpack.base.conf.js文件,把其中的rules里的這一段注銷掉:


保存,然后重新npm run dev 一下:

報(bào)錯(cuò)雖然不見(jiàn)了,但是這樣做的弊端是,強(qiáng)行停止一切檢錯(cuò)功能,很多語(yǔ)法錯(cuò)誤檢測(cè)不出,在初期,是不建議這么做的,更加不利于代碼的可讀行以及規(guī)范性。那么就要尋找另一個(gè)辦法,只是更改一下規(guī)則里的配置。
二,這就用到了另一個(gè)配置文件:test目錄下的.eslintrc.js文件(推薦)


添加你的自定義規(guī)則,然后推薦大家熟悉一下ESLint 規(guī)則
規(guī)則
在配置文件中可以設(shè)置一些規(guī)則。
規(guī)則的錯(cuò)誤等級(jí)有三種:
- “off” 或者 0:關(guān)閉規(guī)則?!?/li>
- warn” 或者 1:打開(kāi)規(guī)則,并且作為一個(gè)警告(不影響exit code)。
- “error” 或者 2:打開(kāi)規(guī)則,并且作為一個(gè)錯(cuò)誤(exit code將會(huì)是1)。
為了讓你對(duì)規(guī)則有個(gè)更好的理解,ESLint 對(duì)其進(jìn)行了分門別類。
所有的規(guī)則默認(rèn)都是禁用的。在配置文件中,使用 “extends”: “eslint:recommended” 來(lái)啟用推薦的規(guī)則,報(bào)告一些常見(jiàn)的問(wèn)題,在下文中這些推薦的規(guī)則都帶有一個(gè)標(biāo)記。
Possible Errors對(duì)照著來(lái)自定義規(guī)則配置
以上面提到的報(bào)錯(cuò)為例,是跟空格縮進(jìn)有關(guān),找到相關(guān)規(guī)則提示:
然后到rules里,手動(dòng)添加'no-mixed-spaces-and-tabs',然后定義為0,關(guān)閉規(guī)則
// 在這里添加自定義規(guī)則
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// 禁止空格和 tab 的混合縮進(jìn)
'no-mixed-spaces-and-tabs':0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
好了,保存刷新,你會(huì)發(fā)現(xiàn)報(bào)錯(cuò)不再提示,這樣做的好處是,挑選需要忽略的規(guī)則
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
基于Vue3+TypeScript實(shí)現(xiàn)鼠標(biāo)框選功能
這篇文章主要介紹了基于Vue3+TypeScript實(shí)現(xiàn)鼠標(biāo)框選功能,文中通過(guò)代碼示例給大家講解的非常纖細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-07-07
使用vite創(chuàng)建vue3項(xiàng)目的詳細(xì)圖文教程
創(chuàng)建Vue3項(xiàng)目有兩種常見(jiàn)的方式,一種是想vue2版本一樣使用腳手架工具創(chuàng)建,創(chuàng)建vue3項(xiàng)目的腳手架必須是4版本以上的,另一種方法就是使用vite創(chuàng)建,這篇文章主要給大家介紹了關(guān)于如何使用vite創(chuàng)建vue3項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-11-11
解決vue 使用axios.all()方法發(fā)起多個(gè)請(qǐng)求控制臺(tái)報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了解決vue 使用axios.all()方法發(fā)起多個(gè)請(qǐng)求控制臺(tái)報(bào)錯(cuò)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03
Vue3集成Element-plus快速搭建頁(yè)面框架的過(guò)程
ElementPlus是一款基于Vue3的UI組件庫(kù),提供了豐富的組件和響應(yīng)式設(shè)計(jì),易于使用和主題定制,在Vue3項(xiàng)目中集成ElementPlus,需要通過(guò)npm安裝并引入組件,主題色可以通過(guò)修改樣式文件進(jìn)行全局設(shè)置,本文介紹Vue3集成Element-plus快速搭建頁(yè)面框架,感興趣的朋友一起看看吧2025-03-03
Vue中watch與watchEffect的區(qū)別詳細(xì)解讀
這篇文章主要介紹了Vue中watch與watchEffect的區(qū)別詳細(xì)解讀,watch函數(shù)與watchEffect函數(shù)都是監(jiān)聽(tīng)器,在寫法和用法上有一定區(qū)別,是同一功能的兩種不同形態(tài),底層都是一樣的,需要的朋友可以參考下2023-11-11
vue實(shí)現(xiàn)加載頁(yè)面自動(dòng)觸發(fā)函數(shù)(及異步獲取數(shù)據(jù))
這篇文章主要介紹了vue實(shí)現(xiàn)加載頁(yè)面自動(dòng)觸發(fā)函數(shù)(及異步獲取數(shù)據(jù)),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07
vue 組件之間事件觸發(fā)($emit)與event Bus($on)的用法說(shuō)明
這篇文章主要介紹了vue 組件之間事件觸發(fā)($emit)與event Bus($on)的用法說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07

