关于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 相关文章推荐
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
用JQUERY增删元素的代码
Feb 14 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
vue实现中部导航栏布局功能
Jul 30 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异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
php静态文件生成类实例分析
2015/01/03 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
详解用vue编写弹出框组件
2017/07/04 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
python实现停车管理系统
2018/11/30 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
代领毕业证委托书
2014/08/02 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
保研专家推荐信范文
2015/03/25 职场文书
参加招聘会后的感想
2015/08/10 职场文书
2016五一手机促销广告语
2016/01/28 职场文书