vue-cli创建项目时由esLint校验导致报错或警告的问题及解决
作者：小雨繁星儿 发布时间：2024-05-29 22:23:42
标签：vue-cli,创建项目,esLint校验,警告
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>后面要换一行，且只能一行，多了也会报错
其他的就不一一列举的，但是还有些要注意的
{}，
{}
↓
{}, {
}
注意：逗号后面也要加一个空格
好啦，以上就是我对这个规范的一些小小心得，后面再碰到再补充~
eslint语法限制项目报错解决
自己从网上找来个实战项目，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就可以啦。
来源：https://blog.csdn.net/qq_41594043/article/details/91870472
0
投稿猜你喜欢
- Oracle中大文本数据类型Clob 长文本类型 （MySQL中不支持，使用的是text）Blob 二进
1. 基本使用remove() 函数可以删除列表中的指定元素语法list.remove( element )参数element：任意数据类型- 虽然不怎么新鲜，但相信还是有许多人不知道，好，不说废话，直接给方法：开始--->运行,输入cmd，接着输入以下内容加密：C:\WIND
- php数组中元素的存在方式是以键值对的方式（'key'=>'value'），有时候我们需要根据键删除数
- 第一章：基本的圆角框第二章：透明圆角化背景图片第三章：圆角化图片 第四章：CSS圆角框组件 V1.0在上面的案例中，我只给出最为原始的圆角框
- 参考官方文档 http://dev.mysql.com/doc/refman/5.7/en/select-into.htmlmysql>
- 交互设计是近几年流行的一个词语。现在市场上有许多资料来介绍什么是交互设计，如何做交互设计等。从场景，任务，用户，操作等分析。但由于受实际情况
- 1. 效果图自己画一张图，原图 VS 骨架效果图如下：opencv logo原图 VS 骨架化效果图如下：2. 源码# 图像骨架化~impo
- 前言Celery在python中的应用除了实现异步任务（async task)外也可以执行定时任务(beat)一、Celery定时任务是什么
- 问题描述本人pycharm使用anaconda创建的虚拟环境后，使用pycharm终端安装第三方库，但路径一直安装到磁盘下的系统路径中，如图
- 关于代码调试的技巧，我之前写过很多的文章，关注比较早的同学，也应该都有看过。还没看过的同学，欢迎前往查阅：更多Python代码调试技巧其中有
- 在前几章节中，我们已经学会了如果在一张表中读取数据，这是相对简单的，但是在真正的应用中经常需要从多个数据表中读取数据。本章节我们将向大家介绍
- 本文实例讲述了Python微信企业号文本消息推送功能。分享给大家供大家参考，具体如下：企业号的创建、企业号应用的创建、组、tag、part就
- 代码如下:<％ sBASE_64_CHARACTERS = "ABCDEFGHIJKLMNOP
- 虽然现在的GMail已经看不到这个效果，但之前那个可爱的深红色Loading仍然让许多人喜爱。我也将这款效果融入了我自己的WordPress
- 通常的情况是，我们一般会载入一个模板文件，然后用 Context渲染它，最后返回这个处理好的HttpResponse对象给用户。 我们已经优
- 在python中读取一个文本文件相信大家都比较熟悉了，但如果我们遇到一个二进制文件要读取怎么办呢？我们尝试使用 Python 中的内置 op
- Python转json时出现中文乱码设置报文头# -*- coding:gbk -*- 连接数据库设置编码mysql = MyS
- OCR of Hand-written Data using kNNOCR of Hand-written Digits我们的目标是构建一个
- IE下专属CSS：<![if !IE]><link rel="stylesheet" type=&qu
