本篇内容介绍了“Vue-cli创建项目时由esLint校验导致报错或警告怎么解决”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！vue-cli
本篇内容介绍了“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文件中第一行写上
Use 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 ^ ✘ http://eslint.org/docs/rules/spaced-comment Expected exception block, space or tab after ' ^ ✘ http://eslint.org/docs/rules/spaced-comment Expected space or tab before '*/' in comment src\App.vue:15:2 ^ ✘ 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-commentYou may use special comments to disable some warnings.Use // eslint-disable-next-line to ignore the next line.Use 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-commentYou may use special comments to disable some warnings.Use // eslint-disable-next-line to ignore the next line.Use 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-commentYou may use special comments to disable some warnings.Use // eslint-disable-next-line to ignore the next line.Use 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-commentYou may use special comments to disable some warnings.Use // eslint-disable-next-line to ignore the next line.Use 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-commentYou may use special comments to disable some warnings.Use // eslint-disable-next-line to ignore the next line.Use 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校验导致报错或警告怎么解决”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
--结束END--
本文标题: vue-cli创建项目时由esLint校验导致报错或警告怎么解决
本文链接: https://www.lsjlt.com/news/330029.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0