溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“vue-cli創建項目時由esLint校驗導致報錯或警告怎么解決”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
vue-cli創建項目后編寫代碼控制臺一片黃
但不影響代碼執行
但是看著就是很不爽啊
到網上搜索了一下這個問題，想起來初始化項目時安裝了esLint校驗工具
嗯，我看到了很多辦法都是下面這樣的
1、因為你設置了eslint，如果你不想有規范的js代碼，可以重新初始化關掉eslint。
Use ESLint to lint your code? (Y/n) 這一步選no
在bulid/webpack.base.conf.js里面有配置如下：
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),點進config.dev.useEslint，發現在config/index.js里配置
useEslint: true, // 改為false即可。
2、萬能方法，就是在報錯的JS文件中第一行寫上
/* eslint-disable */ Use /* eslint-disable */ to ignore all warnings in a file.
簡單粗暴有效率
but 本著 既然人家說我錯了這個肯定是不好的啊我得改 這種良好覺悟
我覺得吧，還是應該直面錯誤勇于改正
so 針對所有的報錯信息，進行了一一修改，果然長知識啊，哈哈哈 那我按照他的規范來寫我豈不是enenenhahaha
我這是又在做什么夢[○?Д´? ○]
進入正題，將遇到的報錯信息整理了一下
1.ESLint：Strings must use single quote
字符串必須要用單引號引起來
2.Expected indentation of 2 spaces but found 4
eslint不喜歡tab縮進哦，縮進使用兩個空格就可以，好的，我現在已經開始要改了~
如果實在是改不了呢，可以↓↓
修改eslint 配置文件 .eslintrc.js
rules: {
...
// 縮進
// 'indent': 2,
// 'indent': [2, 2, {"SwitchCase": 1}],
"indent": [1, 2],
...
}3.Missing space before value for key 'components’
這個就是強制屬性值前也就是冒號后，習慣性的加一個空格，就可以避免這歌報錯提示啦~
4.Newline required at end of file but not found
單文件組件最后的</style>后面要換一行，且只能一行，多了也會報錯
其他的就不一一列舉的，但是還有些要注意的
{}，
{}
↓
{}, {
}
注意：逗號后面也要加一個空格
好啦，以上就是我對這個規范的一些小小心得，后面再碰到再補充~
自己從網上找來個實戰項目，npm install之后，啟動項目，出現了下面這么多的警告和報錯，一臉懵逼：
Windows PowerShell
版權所有 (C) Microsoft Corporation。保留所有權利。
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.經過百度查詢，原來eslint是一個語法檢查工具，但是限制很嚴格，在我的vue文件里面很多空格都會導致紅線(紅線可以關閉提示)，雖然可以關閉，但是在編譯的時候老是會跳出來，所以能關閉是最好的了。
關閉方法：在build/webpack.base.conf.js文件中，注釋或者刪除掉：module->rules中有關eslint的規則：
module: {
rules: [
//...(config.dev.useEslint ? [createLintingRule()] : []), // 注釋或者刪除
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
...
}
]
}然后再重新運行一下npm run dev或者構建命令 npm run build就可以啦。
“vue-cli創建項目時由esLint校驗導致報錯或警告怎么解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
