vue-cli創(chuàng)建項(xiàng)目時由esLint校驗(yàn)導(dǎo)致報(bào)錯或警告的問題及解決
vue-cli創(chuàng)建項(xiàng)目時由esLint校驗(yàn)導(dǎo)致報(bào)錯或警告
vue-cli創(chuàng)建項(xiàng)目后編寫代碼控制臺一片黃
但不影響代碼執(zhí)行
但是看著就是很不爽啊
到網(wǎng)上搜索了一下這個問題,想起來初始化項(xiàng)目時安裝了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)錯的JS文件中第一行寫上
/* eslint-disable */ Use /* eslint-disable */ to ignore all warnings in a file.
簡單粗暴有效率
but 本著 既然人家說我錯了這個肯定是不好的啊我得改 這種良好覺悟
我覺得吧,還是應(yīng)該直面錯誤勇于改正
so 針對所有的報(bào)錯信息,進(jìn)行了一一修改,果然長知識啊,哈哈哈 那我按照他的規(guī)范來寫我豈不是enenenhahaha
我這是又在做什么夢[○?Д´? ○]
進(jìn)入正題,將遇到的報(bào)錯信息整理了一下
1.ESLint:Strings must use single quote
字符串必須要用單引號引起來
2.Expected indentation of 2 spaces but found 4
eslint不喜歡tab縮進(jìn)哦,縮進(jìn)使用兩個空格就可以,好的,我現(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’
這個就是強(qiáng)制屬性值前也就是冒號后,習(xí)慣性的加一個空格,就可以避免這歌報(bào)錯提示啦~
4.Newline required at end of file but not found
單文件組件最后的</style>后面要換一行,且只能一行,多了也會報(bào)錯
其他的就不一一列舉的,但是還有些要注意的
{},
{}
↓
{}, {
}
注意:逗號后面也要加一個空格
好啦,以上就是我對這個規(guī)范的一些小小心得,后面再碰到再補(bǔ)充~
eslint語法限制項(xiàng)目報(bào)錯解決
自己從網(wǎng)上找來個實(shí)戰(zhàn)項(xiàng)目,npm install之后,啟動項(xiàng)目,出現(xiàn)了下面這么多的警告和報(bào)錯,一臉懵逼:
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是一個語法檢查工具,但是限制很嚴(yán)格,在我的vue文件里面很多空格都會導(dǎo)致紅線(紅線可以關(guān)閉提示),雖然可以關(guān)閉,但是在編譯的時候老是會跳出來,所以能關(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就可以啦。
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中el-tree樹全部展開或收起的實(shí)現(xiàn)示例
本文主要介紹了Vue中el-tree樹全部展開或收起的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07Vue?設(shè)置圖片不轉(zhuǎn)為base64的方式
這篇文章主要介紹了Vue實(shí)現(xiàn)設(shè)置圖片不轉(zhuǎn)為base64的方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-02-02Element通過v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn)
日常業(yè)務(wù)開發(fā)中,form表單校驗(yàn)是一個很常見的問題,本文主要介紹了Element通過v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04