vue-cli創(chuàng)建項(xiàng)目時(shí)由esLint校驗(yàn)導(dǎo)致報(bào)錯(cuò)或警告的問題及解決
更新時(shí)間：2022年05月24日 09:53:02 作者：小雨繁星兒
這篇文章主要介紹了vue-cli創(chuàng)建項(xiàng)目時(shí)由esLint校驗(yàn)導(dǎo)致報(bào)錯(cuò)或警告的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue-cli創(chuàng)建項(xiàng)目時(shí)由esLint校驗(yàn)導(dǎo)致報(bào)錯(cuò)或警告
vue-cli創(chuàng)建項(xiàng)目后編寫代碼控制臺(tái)一片黃
但不影響代碼執(zhí)行
但是看著就是很不爽啊
到網(wǎng)上搜索了一下這個(gè)問題，想起來初始化項(xiàng)目時(shí)安裝了esLint校驗(yàn)工具
嗯，我看到了很多辦法都是下面這樣的
1、因?yàn)槟阍O(shè)置了eslint，如果你不想有規(guī)范的js代碼，可以重新初始化關(guān)掉eslint。
Use ESLint to lint your code? (Y/n) 這一步選no
在bulid/webpack.base.conf.js里面有配置如下：
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),點(diǎn)進(jìn)config.dev.useEslint，發(fā)現(xiàn)在config/index.js里配置
useEslint: true, // 改為false即可。
2、萬能方法，就是在報(bào)錯(cuò)的JS文件中第一行寫上
/* eslint-disable */ Use /* eslint-disable */ to ignore all warnings in a file.
簡單粗暴有效率
but 本著 既然人家說我錯(cuò)了這個(gè)肯定是不好的啊我得改 這種良好覺悟
我覺得吧，還是應(yīng)該直面錯(cuò)誤勇于改正
so 針對(duì)所有的報(bào)錯(cuò)信息，進(jìn)行了一一修改，果然長知識(shí)啊，哈哈哈 那我按照他的規(guī)范來寫我豈不是enenenhahaha
我這是又在做什么夢(mèng)[○?Д´? ○]
進(jìn)入正題，將遇到的報(bào)錯(cuò)信息整理了一下
1.ESLint：Strings must use single quote
字符串必須要用單引號(hào)引起來
2.Expected indentation of 2 spaces but found 4
eslint不喜歡tab縮進(jìn)哦，縮進(jìn)使用兩個(gè)空格就可以，好的，我現(xiàn)在已經(jīng)開始要改了~
如果實(shí)在是改不了呢，可以↓↓
修改eslint 配置文件 .eslintrc.js
rules: {
? ?...
? ? // 縮進(jìn)
? ? // 'indent': 2,
? ? // 'indent': [2, 2, {"SwitchCase": 1}],
? ? "indent": [1, 2],
? ?...
?}3.Missing space before value for key 'components’
這個(gè)就是強(qiáng)制屬性值前也就是冒號(hào)后，習(xí)慣性的加一個(gè)空格，就可以避免這歌報(bào)錯(cuò)提示啦~
4.Newline required at end of file but not found
單文件組件最后的</style>后面要換一行，且只能一行，多了也會(huì)報(bào)錯(cuò)
其他的就不一一列舉的，但是還有些要注意的
{}，
{}
↓
{}, {
}
注意：逗號(hào)后面也要加一個(gè)空格
好啦，以上就是我對(duì)這個(gè)規(guī)范的一些小小心得，后面再碰到再補(bǔ)充~
eslint語法限制項(xiàng)目報(bào)錯(cuò)解決
自己從網(wǎng)上找來個(gè)實(shí)戰(zhàn)項(xiàng)目，npm install之后，啟動(dòng)項(xiàng)目，出現(xiàn)了下面這么多的警告和報(bào)錯(cuò)，一臉懵逼：
Windows PowerShell
版權(quán)所有 (C) Microsoft Corporation。保留所有權(quán)利。
PS F:\vue.news-master> npm run dev
> vue.news@2.0.0 dev F:\vue.news-master
> webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js
95% emitting
WARNING Compiled with 2 warnings 15:04:08
? http://eslint.org/docs/rules/indent Expected indentation of 0 spaces but found 1
src\App.vue:15:1
/*全局引入VueAwesomeSwiper輪播圖插件*/
^
? http://eslint.org/docs/rules/spaced-comment Expected exception block, space or tab after '/*' in comment
src\App.vue:15:2
/*全局引入VueAwesomeSwiper輪播圖插件*/
^
? http://eslint.org/docs/rules/spaced-comment Expected space or tab before '*/' in comment
src\App.vue:15:2
/*全局引入VueAwesomeSwiper輪播圖插件*/
^
? http://eslint.org/docs/rules/no-unused-vars 'VueAwesomeSwiper' is defined but never used
src\App.vue:16:8
import VueAwesomeSwiper from 'vue-awesome-swiper';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:16:50
import VueAwesomeSwiper from 'vue-awesome-swiper';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:17:36
import 'swiper/dist/css/swiper.css';//這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
^
? http://eslint.org/docs/rules/spaced-comment Expected space or tab after '//' in comment
src\App.vue:17:37
import 'swiper/dist/css/swiper.css';//這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
^
? http://eslint.org/docs/rules/no-multiple-empty-lines More than 1 blank line not allowed
src\App.vue:18:1
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:20:47
import AppHead from '@/components/public/Head';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:21:47
import AppMenu from '@/components/public/Menu';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:22:45
import AppNav from '@/components/public/Nav';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:23:47
import AppFoot from '@/components/public/Foot';
^
? 12 problems (12 errors, 0 warnings)
Errors:
6 http://eslint.org/docs/rules/semi
3 http://eslint.org/docs/rules/spaced-comment
1 http://eslint.org/docs/rules/no-multiple-empty-lines
1 http://eslint.org/docs/rules/no-unused-vars
1 http://eslint.org/docs/rules/indent
? http://eslint.org/docs/rules/semi Extra semicolon
src\components\Select.vue:40:36
import 'swiper/dist/css/swiper.css';這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
^
? http://eslint.org/docs/rules/spaced-comment Expected space or tab after '///' in comment
src\components\Select.vue:40:37
import 'swiper/dist/css/swiper.css';這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\components\Select.vue:41:57
import { swiper, swiperSlide } from 'vue-awesome-swiper';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\components\Select.vue:43:58
import { mapState, mapMutations, mapActions } from 'vuex';
^
? 4 problems (4 errors, 0 warnings)
Errors:
3 http://eslint.org/docs/rules/semi
1 http://eslint.org/docs/rules/spaced-comment
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
WAIT Compiling... 15:05:01
95% emitting
WARNING Compiled with 2 warnings 15:05:02
? http://eslint.org/docs/rules/no-unused-vars 'VueAwesomeSwiper' is defined but never used
src\App.vue:16:8
import VueAwesomeSwiper from 'vue-awesome-swiper';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:16:50
import VueAwesomeSwiper from 'vue-awesome-swiper';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:17:36
import 'swiper/dist/css/swiper.css';//這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
^
? http://eslint.org/docs/rules/spaced-comment Expected space or tab after '//' in comment
src\App.vue:17:37
import 'swiper/dist/css/swiper.css';//這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
^
? http://eslint.org/docs/rules/no-multiple-empty-lines More than 1 blank line not allowed
src\App.vue:18:1
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:20:47
import AppHead from '@/components/public/Head';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:21:47
import AppMenu from '@/components/public/Menu';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:22:45
import AppNav from '@/components/public/Nav';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:23:47
import AppFoot from '@/components/public/Foot';
^
? 9 problems (9 errors, 0 warnings)
Errors:
6 http://eslint.org/docs/rules/semi
1 http://eslint.org/docs/rules/no-multiple-empty-lines
1 http://eslint.org/docs/rules/spaced-comment
1 http://eslint.org/docs/rules/no-unused-vars
? http://eslint.org/docs/rules/semi Extra semicolon
src\components\Select.vue:40:36
import 'swiper/dist/css/swiper.css';這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
^
? http://eslint.org/docs/rules/spaced-comment Expected space or tab after '///' in comment
src\components\Select.vue:40:37
import 'swiper/dist/css/swiper.css';這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\components\Select.vue:41:57
import { swiper, swiperSlide } from 'vue-awesome-swiper';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\components\Select.vue:43:58
import { mapState, mapMutations, mapActions } from 'vuex';
^
? 4 problems (4 errors, 0 warnings)
Errors:
3 http://eslint.org/docs/rules/semi
1 http://eslint.org/docs/rules/spaced-comment
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
WAIT Compiling... 15:05:05
95% emitting
WARNING Compiled with 2 warnings 15:05:06
? http://eslint.org/docs/rules/no-unused-vars 'VueAwesomeSwiper' is defined but never used
src\App.vue:16:8
import VueAwesomeSwiper from 'vue-awesome-swiper';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:16:50
import VueAwesomeSwiper from 'vue-awesome-swiper';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:17:36
import 'swiper/dist/css/swiper.css';//這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
^
? http://eslint.org/docs/rules/spaced-comment Expected space or tab after '//' in comment
src\App.vue:17:37
import 'swiper/dist/css/swiper.css';//這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
^
? http://eslint.org/docs/rules/no-multiple-empty-lines More than 1 blank line not allowed
src\App.vue:18:1
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:20:47
import AppHead from '@/components/public/Head';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:21:47
import AppMenu from '@/components/public/Menu';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:22:45
import AppNav from '@/components/public/Nav';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:23:47
import AppFoot from '@/components/public/Foot';
^
? 9 problems (9 errors, 0 warnings)
Errors:
6 http://eslint.org/docs/rules/semi
1 http://eslint.org/docs/rules/no-multiple-empty-lines
1 http://eslint.org/docs/rules/spaced-comment
1 http://eslint.org/docs/rules/no-unused-vars
? http://eslint.org/docs/rules/semi Extra semicolon
src\components\Select.vue:40:36
import 'swiper/dist/css/swiper.css';這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
^
? http://eslint.org/docs/rules/spaced-comment Expected space or tab after '///' in comment
src\components\Select.vue:40:37
import 'swiper/dist/css/swiper.css';這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\components\Select.vue:41:57
import { swiper, swiperSlide } from 'vue-awesome-swiper';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\components\Select.vue:43:58
import { mapState, mapMutations, mapActions } from 'vuex';
^
? 4 problems (4 errors, 0 warnings)
Errors:
3 http://eslint.org/docs/rules/semi
1 http://eslint.org/docs/rules/spaced-comment
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
WAIT Compiling... 15:05:07
95% emitting
WARNING Compiled with 2 warnings 15:05:08
? http://eslint.org/docs/rules/no-unused-vars 'VueAwesomeSwiper' is defined but never used
src\App.vue:16:8
import VueAwesomeSwiper from 'vue-awesome-swiper';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:16:50
import VueAwesomeSwiper from 'vue-awesome-swiper';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:17:36
import 'swiper/dist/css/swiper.css';//這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
^
? http://eslint.org/docs/rules/spaced-comment Expected space or tab after '//' in comment
src\App.vue:17:37
import 'swiper/dist/css/swiper.css';//這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
^
? http://eslint.org/docs/rules/no-multiple-empty-lines More than 1 blank line not allowed
src\App.vue:18:1
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:20:47
import AppHead from '@/components/public/Head';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:21:47
import AppMenu from '@/components/public/Menu';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:22:45
import AppNav from '@/components/public/Nav';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:23:47
import AppFoot from '@/components/public/Foot';
^
? 9 problems (9 errors, 0 warnings)
Errors:
6 http://eslint.org/docs/rules/semi
1 http://eslint.org/docs/rules/no-multiple-empty-lines
1 http://eslint.org/docs/rules/spaced-comment
1 http://eslint.org/docs/rules/no-unused-vars
? http://eslint.org/docs/rules/semi Extra semicolon
src\components\Select.vue:40:36
import 'swiper/dist/css/swiper.css';這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
^
? http://eslint.org/docs/rules/spaced-comment Expected space or tab after '///' in comment
src\components\Select.vue:40:37
import 'swiper/dist/css/swiper.css';這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\components\Select.vue:41:57
import { swiper, swiperSlide } from 'vue-awesome-swiper';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\components\Select.vue:43:58
import { mapState, mapMutations, mapActions } from 'vuex';
^
? 4 problems (4 errors, 0 warnings)
Errors:
3 http://eslint.org/docs/rules/semi
1 http://eslint.org/docs/rules/spaced-comment
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
WAIT Compiling... 15:05:09
95% emitting
WARNING Compiled with 2 warnings 15:05:09
? http://eslint.org/docs/rules/no-unused-vars 'VueAwesomeSwiper' is defined but never used
src\App.vue:16:8
import VueAwesomeSwiper from 'vue-awesome-swiper';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:16:50
import VueAwesomeSwiper from 'vue-awesome-swiper';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:17:36
import 'swiper/dist/css/swiper.css';//這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
^
? http://eslint.org/docs/rules/spaced-comment Expected space or tab after '//' in comment
src\App.vue:17:37
import 'swiper/dist/css/swiper.css';//這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
^
? http://eslint.org/docs/rules/no-multiple-empty-lines More than 1 blank line not allowed
src\App.vue:18:1
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:20:47
import AppHead from '@/components/public/Head';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:21:47
import AppMenu from '@/components/public/Menu';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:22:45
import AppNav from '@/components/public/Nav';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\App.vue:23:47
import AppFoot from '@/components/public/Foot';
^
? 9 problems (9 errors, 0 warnings)
Errors:
6 http://eslint.org/docs/rules/semi
1 http://eslint.org/docs/rules/no-multiple-empty-lines
1 http://eslint.org/docs/rules/spaced-comment
1 http://eslint.org/docs/rules/no-unused-vars
? http://eslint.org/docs/rules/semi Extra semicolon
src\components\Select.vue:40:36
import 'swiper/dist/css/swiper.css';這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
^
? http://eslint.org/docs/rules/spaced-comment Expected space or tab after '///' in comment
src\components\Select.vue:40:37
import 'swiper/dist/css/swiper.css';這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\components\Select.vue:41:57
import { swiper, swiperSlide } from 'vue-awesome-swiper';
^
? http://eslint.org/docs/rules/semi Extra semicolon
src\components\Select.vue:43:58
import { mapState, mapMutations, mapActions } from 'vuex';
^
? 4 problems (4 errors, 0 warnings)
Errors:
3 http://eslint.org/docs/rules/semi
1 http://eslint.org/docs/rules/spaced-comment
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.經(jīng)過百度查詢，原來eslint是一個(gè)語法檢查工具，但是限制很嚴(yán)格，在我的vue文件里面很多空格都會(huì)導(dǎo)致紅線(紅線可以關(guān)閉提示)，雖然可以關(guān)閉，但是在編譯的時(shí)候老是會(huì)跳出來，所以能關(guān)閉是最好的了。
關(guān)閉方法：在build/webpack.base.conf.js文件中，注釋或者刪除掉：module->rules中有關(guān)eslint的規(guī)則：
module: {
? rules: [
? ? //...(config.dev.useEslint ? [createLintingRule()] : []), // 注釋或者刪除
? ? {
? ? ? test: /\.vue$/,
? ? ? loader: 'vue-loader',
? ? ? options: vueLoaderConfig
? ? },
? ? ...
? ? }
? ]
}然后再重新運(yùn)行一下npm run dev或者構(gòu)建命令 npm run build就可以啦。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue axios跨域 Request Method: OPTIONS問題(預(yù)檢請(qǐng)求)
這篇文章主要介紹了解決vue axios跨域 Request Method: OPTIONS問題(預(yù)檢請(qǐng)求)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
解決vue組件中使用v-for出現(xiàn)告警問題及v for指令介紹
這篇文章主要介紹了解決vue組件中使用v-for出現(xiàn)告警問題,在文中給大家介紹了v for指令，需要的朋友可以參考下2017-11-11
解決vuex數(shù)據(jù)異步造成初始化的時(shí)候沒值報(bào)錯(cuò)問題
今天小編大家分享一篇解決vuex數(shù)據(jù)異步造成初始化的時(shí)候沒值報(bào)錯(cuò)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在本文中小編給大家分享的是關(guān)于vue引入子組件方法和先關(guān)注意點(diǎn)，有需要的朋友們可以學(xué)習(xí)下。2019-02-02
詳解@Vue/Cli 3 Invalid Host header 錯(cuò)誤解決辦法
這篇文章主要介紹了詳解@Vue/Cli 3 Invalid Host header 錯(cuò)誤解決辦法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
vue中利用mqtt服務(wù)端實(shí)現(xiàn)即時(shí)通訊的步驟記錄
前些日子了解到mqtt這樣一個(gè)協(xié)議,可以在web上達(dá)到即時(shí)通訊的效果,所以下面這篇文章主要給大家介紹了關(guān)于vue中如何利用mqtt服務(wù)端實(shí)現(xiàn)即時(shí)通訊的相關(guān)資料,需要的朋友可以參考下2021-07-07
Vue開發(fā)過程中遇到的疑惑知識(shí)點(diǎn)總結(jié)
vue是法語中視圖的意思，Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫，同時(shí)擁有非常容易上手的API。下面這篇文章主要給大家總結(jié)了Vue在開發(fā)過程中遇到的疑惑知識(shí)點(diǎn),有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
Vue動(dòng)態(tài)改變css樣式的3種方法總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)改變css樣式的3種方法,在Vue.js中我們經(jīng)常需要根據(jù)特定的條件或事件來動(dòng)態(tài)地修改CSS樣式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
postcss一種對(duì)css編譯的工具，類似babel對(duì)js的處理，postcss只是一個(gè)工具，本身不會(huì)對(duì)css一頓操作，它通過插件實(shí)現(xiàn)功能，autoprefixer就是其一2023-02-02
關(guān)于vue-admin-template模板連接后端改造登錄功能
這篇文章主要介紹了關(guān)于vue-admin-template模板連接后端改造登錄功能,登陸方法根據(jù)賬號(hào)密碼查出用戶信息，根據(jù)用戶id與name生成token并返回，userinfo則是對(duì)token進(jìn)行獲取，在查出對(duì)應(yīng)值進(jìn)行返回，感興趣的朋友一起看看吧2022-05-05