关于vue的语法规则检测报错问题的解决


Posted in Javascript onMay 21, 2018

搭建了一个vue项目,在配置路有的时候,陆续出现了各种报错其中最多的是一些写法,例如空格,缩进,各种括号,结果我一句一句对照,修改相当之费时间,效率低,一上午,一个路由配置都没写好

主要报错如下:

关于vue的语法规则检测报错问题的解决

截取了一段常见报错,选取其中一个:

Expected indentation of 4 spaces but found 1 tab

翻译一下,意思是:预期缩进4个空格,但找到1个选项卡。意思是vue在检测写法规则的时候,只认空格,不认tab的缩进,这时你就要修改的页面内容,把tab换成空格,这样就比较麻烦,然鹅各种查找原因,找到了解决方案,如下:

一,找到目录build下的webpack.base.conf.js文件,把其中的rules里的这一段注销掉:

关于vue的语法规则检测报错问题的解决

关于vue的语法规则检测报错问题的解决

保存,然后重新npm run dev 一下:

关于vue的语法规则检测报错问题的解决

报错虽然不见了,但是这样做的弊端是,强行停止一切检错功能,很多语法错误检测不出,在初期,是不建议这么做的,更加不利于代码的可读行以及规范性。那么就要寻找另一个办法,只是更改一下规则里的配置。

二,这就用到了另一个配置文件:test目录下的.eslintrc.js文件(推荐)

关于vue的语法规则检测报错问题的解决

关于vue的语法规则检测报错问题的解决

添加你的自定义规则,然后推荐大家熟悉一下ESLint 规则

规则

在配置文件中可以设置一些规则。

规则的错误等级有三种:

  1. “off” 或者 0:关闭规则。“
  2. warn” 或者 1:打开规则,并且作为一个警告(不影响exit code)。
  3. “error” 或者 2:打开规则,并且作为一个错误(exit code将会是1)。

为了让你对规则有个更好的理解,ESLint 对其进行了分门别类。

所有的规则默认都是禁用的。在配置文件中,使用 “extends”: “eslint:recommended” 来启用推荐的规则,报告一些常见的问题,在下文中这些推荐的规则都带有一个标记。

Possible Errors对照着来自定义规则配置

以上面提到的报错为例,是跟空格缩进有关,找到相关规则提示:

关于vue的语法规则检测报错问题的解决 

然后到rules里,手动添加'no-mixed-spaces-and-tabs',然后定义为0,关闭规则

// 在这里添加自定义规则
 'rules': {
  // allow paren-less arrow functions
  'arrow-parens': 0,
  // allow async-await
  'generator-star-spacing': 0,
  // 禁止空格和 tab 的混合缩进
  'no-mixed-spaces-and-tabs':0,
  // allow debugger during development
  'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
 }

好了,保存刷新,你会发现报错不再提示,这样做的好处是,挑选需要忽略的规则

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
javascript时间函数基础介绍
Mar 28 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 Javascript
vue远程加载sfc组件思路详解
Dec 25 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
原生js实现弹幕效果
Nov 29 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 Javascript
js实现自动锁屏功能
Jun 02 Javascript
JS实现520 表白简单代码
May 21 #Javascript
了解ESlint和其相关操作小结
May 21 #Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 #Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 #Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 #Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 #Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 #Javascript
You might like
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
详细介绍Python函数中的默认参数
2015/03/30 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
python安装本地whl的实例步骤
2019/10/12 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
详解Python的三种拷贝方式
2020/02/11 Python
解决python 找不到module的问题
2020/02/12 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
党员个人自我剖析材料
2014/10/08 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
django上传文件的三种方式
2021/04/29 Python
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
PHP中多字节字符串操作实例详解
2021/08/23 PHP
MySql数据库 查询时间序列间隔
2022/05/11 MySQL
JAVA springCloud项目搭建流程
2022/05/11 Java/Android