目录

• vue-cli创建项目时由esLint校验导致报错或警告
• 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
单文件组件最后的后面要换一行，且只能一行，多了也会报错
其他的就不一一列举的，但是还有些要注意的

{}，
{}
↓
{},{
}

注意：逗号后面也要加一个空格
好啦，以上就是我对这个规范的一些小小心得，后面再碰到再补充~

eslint语法限制项目报错解决 【vue-cli创建项目时由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 WARNINGCompiled with 2 warnings15:04:08?http://eslint.org/docs/rules/indentExpected indentation of 0 spaces but found 1src\App.vue:15:1/*全局引入VueAwesomeSwiper轮播图插件*/^?http://eslint.org/docs/rules/spaced-commentExpected exception block, space or tab after '/*' in commentsrc\App.vue:15:2/*全局引入VueAwesomeSwiper轮播图插件*/^?http://eslint.org/docs/rules/spaced-commentExpected space or tab before '*/' in commentsrc\App.vue:15:2/*全局引入VueAwesomeSwiper轮播图插件*/^?http://eslint.org/docs/rules/no-unused-vars'VueAwesomeSwiper' is defined but never usedsrc\App.vue:16:8import VueAwesomeSwiper from 'vue-awesome-swiper'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:16:50import VueAwesomeSwiper from 'vue-awesome-swiper'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:17:36import 'swiper/dist/css/swiper.css'; //这里注意具体看使用的版本是否需要引入样式，以及具体位置。^?http://eslint.org/docs/rules/spaced-commentExpected space or tab after '//' in commentsrc\App.vue:17:37import 'swiper/dist/css/swiper.css'; //这里注意具体看使用的版本是否需要引入样式，以及具体位置。^?http://eslint.org/docs/rules/no-multiple-empty-linesMore than 1 blank line not allowedsrc\App.vue:18:1^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:20:47import AppHead from '@/components/public/Head'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:21:47import AppMenu from '@/components/public/Menu'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:22:45import AppNav from '@/components/public/Nav'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:23:47import AppFoot from '@/components/public/Foot'; ^? 12 problems (12 errors, 0 warnings)Errors:6http://eslint.org/docs/rules/semi3http://eslint.org/docs/rules/spaced-comment1http://eslint.org/docs/rules/no-multiple-empty-lines1http://eslint.org/docs/rules/no-unused-vars1http://eslint.org/docs/rules/indent?http://eslint.org/docs/rules/semiExtra semicolonsrc\components\Select.vue:40:36import 'swiper/dist/css/swiper.css'; 这里注意具体看使用的版本是否需要引入样式，以及具体位置。^?http://eslint.org/docs/rules/spaced-commentExpected space or tab after '///' in commentsrc\components\Select.vue:40:37import 'swiper/dist/css/swiper.css'; 这里注意具体看使用的版本是否需要引入样式，以及具体位置。^?http://eslint.org/docs/rules/semiExtra semicolonsrc\components\Select.vue:41:57import { swiper, swiperSlide } from 'vue-awesome-swiper'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\components\Select.vue:43:58import { mapState, mapMutations, mapActions } from 'vuex'; ^? 4 problems (4 errors, 0 warnings)Errors:3http://eslint.org/docs/rules/semi1http://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 /* eslint-disable */ to ignore all warnings in a file. WAITCompiling...15:05:01 95% emitting WARNINGCompiled with 2 warnings15:05:02?http://eslint.org/docs/rules/no-unused-vars'VueAwesomeSwiper' is defined but never usedsrc\App.vue:16:8import VueAwesomeSwiper from 'vue-awesome-swiper'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:16:50import VueAwesomeSwiper from 'vue-awesome-swiper'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:17:36import 'swiper/dist/css/swiper.css'; //这里注意具体看使用的版本是否需要引入样式，以及具体位置。^?http://eslint.org/docs/rules/spaced-commentExpected space or tab after '//' in commentsrc\App.vue:17:37import 'swiper/dist/css/swiper.css'; //这里注意具体看使用的版本是否需要引入样式，以及具体位置。^?http://eslint.org/docs/rules/no-multiple-empty-linesMore than 1 blank line not allowedsrc\App.vue:18:1^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:20:47import AppHead from '@/components/public/Head'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:21:47import AppMenu from '@/components/public/Menu'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:22:45import AppNav from '@/components/public/Nav'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:23:47import AppFoot from '@/components/public/Foot'; ^? 9 problems (9 errors, 0 warnings)Errors:6http://eslint.org/docs/rules/semi1http://eslint.org/docs/rules/no-multiple-empty-lines1http://eslint.org/docs/rules/spaced-comment1http://eslint.org/docs/rules/no-unused-vars?http://eslint.org/docs/rules/semiExtra semicolonsrc\components\Select.vue:40:36import 'swiper/dist/css/swiper.css'; 这里注意具体看使用的版本是否需要引入样式，以及具体位置。^?http://eslint.org/docs/rules/spaced-commentExpected space or tab after '///' in commentsrc\components\Select.vue:40:37import 'swiper/dist/css/swiper.css'; 这里注意具体看使用的版本是否需要引入样式，以及具体位置。^?http://eslint.org/docs/rules/semiExtra semicolonsrc\components\Select.vue:41:57import { swiper, swiperSlide } from 'vue-awesome-swiper'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\components\Select.vue:43:58import { mapState, mapMutations, mapActions } from 'vuex'; ^? 4 problems (4 errors, 0 warnings)Errors:3http://eslint.org/docs/rules/semi1http://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 /* eslint-disable */ to ignore all warnings in a file. WAITCompiling...15:05:05 95% emitting WARNINGCompiled with 2 warnings15:05:06?http://eslint.org/docs/rules/no-unused-vars'VueAwesomeSwiper' is defined but never usedsrc\App.vue:16:8import VueAwesomeSwiper from 'vue-awesome-swiper'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:16:50import VueAwesomeSwiper from 'vue-awesome-swiper'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:17:36import 'swiper/dist/css/swiper.css'; //这里注意具体看使用的版本是否需要引入样式，以及具体位置。^?http://eslint.org/docs/rules/spaced-commentExpected space or tab after '//' in commentsrc\App.vue:17:37import 'swiper/dist/css/swiper.css'; //这里注意具体看使用的版本是否需要引入样式，以及具体位置。^?http://eslint.org/docs/rules/no-multiple-empty-linesMore than 1 blank line not allowedsrc\App.vue:18:1^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:20:47import AppHead from '@/components/public/Head'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:21:47import AppMenu from '@/components/public/Menu'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:22:45import AppNav from '@/components/public/Nav'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:23:47import AppFoot from '@/components/public/Foot'; ^? 9 problems (9 errors, 0 warnings)Errors:6http://eslint.org/docs/rules/semi1http://eslint.org/docs/rules/no-multiple-empty-lines1http://eslint.org/docs/rules/spaced-comment1http://eslint.org/docs/rules/no-unused-vars?http://eslint.org/docs/rules/semiExtra semicolonsrc\components\Select.vue:40:36import 'swiper/dist/css/swiper.css'; 这里注意具体看使用的版本是否需要引入样式，以及具体位置。^?http://eslint.org/docs/rules/spaced-commentExpected space or tab after '///' in commentsrc\components\Select.vue:40:37import 'swiper/dist/css/swiper.css'; 这里注意具体看使用的版本是否需要引入样式，以及具体位置。^?http://eslint.org/docs/rules/semiExtra semicolonsrc\components\Select.vue:41:57import { swiper, swiperSlide } from 'vue-awesome-swiper'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\components\Select.vue:43:58import { mapState, mapMutations, mapActions } from 'vuex'; ^? 4 problems (4 errors, 0 warnings)Errors:3http://eslint.org/docs/rules/semi1http://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 /* eslint-disable */ to ignore all warnings in a file. WAITCompiling...15:05:07 95% emitting WARNINGCompiled with 2 warnings15:05:08?http://eslint.org/docs/rules/no-unused-vars'VueAwesomeSwiper' is defined but never usedsrc\App.vue:16:8import VueAwesomeSwiper from 'vue-awesome-swiper'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:16:50import VueAwesomeSwiper from 'vue-awesome-swiper'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:17:36import 'swiper/dist/css/swiper.css'; //这里注意具体看使用的版本是否需要引入样式，以及具体位置。^?http://eslint.org/docs/rules/spaced-commentExpected space or tab after '//' in commentsrc\App.vue:17:37import 'swiper/dist/css/swiper.css'; //这里注意具体看使用的版本是否需要引入样式，以及具体位置。^?http://eslint.org/docs/rules/no-multiple-empty-linesMore than 1 blank line not allowedsrc\App.vue:18:1^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:20:47import AppHead from '@/components/public/Head'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:21:47import AppMenu from '@/components/public/Menu'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:22:45import AppNav from '@/components/public/Nav'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:23:47import AppFoot from '@/components/public/Foot'; ^? 9 problems (9 errors, 0 warnings)Errors:6http://eslint.org/docs/rules/semi1http://eslint.org/docs/rules/no-multiple-empty-lines1http://eslint.org/docs/rules/spaced-comment1http://eslint.org/docs/rules/no-unused-vars?http://eslint.org/docs/rules/semiExtra semicolonsrc\components\Select.vue:40:36import 'swiper/dist/css/swiper.css'; 这里注意具体看使用的版本是否需要引入样式，以及具体位置。^?http://eslint.org/docs/rules/spaced-commentExpected space or tab after '///' in commentsrc\components\Select.vue:40:37import 'swiper/dist/css/swiper.css'; 这里注意具体看使用的版本是否需要引入样式，以及具体位置。^?http://eslint.org/docs/rules/semiExtra semicolonsrc\components\Select.vue:41:57import { swiper, swiperSlide } from 'vue-awesome-swiper'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\components\Select.vue:43:58import { mapState, mapMutations, mapActions } from 'vuex'; ^? 4 problems (4 errors, 0 warnings)Errors:3http://eslint.org/docs/rules/semi1http://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 /* eslint-disable */ to ignore all warnings in a file. WAITCompiling...15:05:09 95% emitting WARNINGCompiled with 2 warnings15:05:09?http://eslint.org/docs/rules/no-unused-vars'VueAwesomeSwiper' is defined but never usedsrc\App.vue:16:8import VueAwesomeSwiper from 'vue-awesome-swiper'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:16:50import VueAwesomeSwiper from 'vue-awesome-swiper'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:17:36import 'swiper/dist/css/swiper.css'; //这里注意具体看使用的版本是否需要引入样式，以及具体位置。^?http://eslint.org/docs/rules/spaced-commentExpected space or tab after '//' in commentsrc\App.vue:17:37import 'swiper/dist/css/swiper.css'; //这里注意具体看使用的版本是否需要引入样式，以及具体位置。^?http://eslint.org/docs/rules/no-multiple-empty-linesMore than 1 blank line not allowedsrc\App.vue:18:1^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:20:47import AppHead from '@/components/public/Head'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:21:47import AppMenu from '@/components/public/Menu'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:22:45import AppNav from '@/components/public/Nav'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\App.vue:23:47import AppFoot from '@/components/public/Foot'; ^? 9 problems (9 errors, 0 warnings)Errors:6http://eslint.org/docs/rules/semi1http://eslint.org/docs/rules/no-multiple-empty-lines1http://eslint.org/docs/rules/spaced-comment1http://eslint.org/docs/rules/no-unused-vars?http://eslint.org/docs/rules/semiExtra semicolonsrc\components\Select.vue:40:36import 'swiper/dist/css/swiper.css'; 这里注意具体看使用的版本是否需要引入样式，以及具体位置。^?http://eslint.org/docs/rules/spaced-commentExpected space or tab after '///' in commentsrc\components\Select.vue:40:37import 'swiper/dist/css/swiper.css'; 这里注意具体看使用的版本是否需要引入样式，以及具体位置。^?http://eslint.org/docs/rules/semiExtra semicolonsrc\components\Select.vue:41:57import { swiper, swiperSlide } from 'vue-awesome-swiper'; ^?http://eslint.org/docs/rules/semiExtra semicolonsrc\components\Select.vue:43:58import { mapState, mapMutations, mapActions } from 'vuex'; ^? 4 problems (4 errors, 0 warnings)Errors:3http://eslint.org/docs/rules/semi1http://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 /* 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就可以啦。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

推荐阅读

• 

  都市快节奏白领如何过慢生活，快节奏都市生活状态
• 

  家里防蛇的最好办法 家蛇
• 

  怎么杀老鼠
• 

  房屋拆迁是否有强制性 强制拆迁的性质
• 

  王者荣耀瑶攻略 原来是这样玩的
• 

  ios 谷歌分析 集成
• 

  8种养在花盆里可以多年生长的草本蔬菜, 不养几盆就,常见多年生蔬菜有哪些
• 

  手机|华为nova9系列再次破局，让我们重拾了我们对于华为的信心
• 

  车厘子可以每天吃吗
• 

  澄清石灰水怎么做
• 

  芋头蒸不软是怎么回事
• 

  2015年我国网民数量和上网时间统计数据分析
• 

  信用卡变成呆账了怎么办 信用卡变成呆账了怎么办多还了怎么办
• 

  mongodb怎么连接服务器 mongodb的当前连接
• 

  双系统安装步骤及遇到问题的解决方式
• 

  wil源代码分析,gcc源代码分析
• 

  2023年长沙城区普通高中特长招生项目一览
• 

  佳能单反最好的相机 佳能相机单反哪款轻便
• 

  千锋培训机构靠谱吗，请问要选择UI培训班的话千锋靠谱吗谢谢
• 

  面包机第一次使用要怎样清洗，烤面包机第一次使用怎么清洗

• 相关行知03--项目类型
• 我如何为每个WooCommerce产品类别创建不同的菜单（）
• 如何在WordPress页面中创建不同的可编辑section（）
• 如何恢复wordpress备份（）
• Eclipse创建Springboot聚合项目(方式二)
• 什么是可靠性，测试的项目有什么
• 基于Spark+Grafana可视化电商项目实战，好文收藏~
• 预期下一个功能是转义功能（WordPress）
• {调取该文章的TAG关键词}|优客工场与华为全国性定制办公合作，首个城市办公室标准项目已落地北京副中心
• 2021年项目实战-升级项目实战