vue Eslint校验代码报错

在使用脚手架创建Vue项目时,一般会安装Eslint插件,这个主要是校验代码格式和规范用的,但是它很有点让人抓狂,因为很多校验规则和代码规范,你只要不按照它的格式来,直接导致项目编译报错,运行不了项目,这个是非常令人讨厌的。

它不像idea里安装alibaba插件,校验代码规范只是会提示,并不会导致你项目都不能编译和运行。尤其小白刚学习Vue和使用这插件时,那简直是痛苦不堪,深受其害(有人说不装那插件不就行了,但个人觉得,代码规范任何时候都很重要,装了是利大于弊),网上看过很多解决方法,零零散散有的也不好使,自己找了一套解决方法,挺好用的,记录一下。

说了这么多,总结一下我自己解决这些问题的办法。

1.空格缩进,不让使用tab

具体英语怎么表达忘记了,看到就知道了。这个错误不是一般的让人烦,简直有些让人无语,谁用谁知道,因为大多习惯用tab。

先在.eslintrc.js文件里配置rules(有的项目没有这个文件,具体为什么我还不清楚,没有的话就自己创建一个吧,按如下格式):我是直接把indent(缩进)给关掉了,也可以配置其他值,我没尝试,这种方式简单粗暴

然后,需要在package.json里配置rules,这个也要配置的,不然上面配置的rules不会生效:

2.未使用的变量报错

idea里这个问题一般只是变量灰色的提示未使用,但是Vue项目里Eslint编译不通过。

同上,先在.eslintrc.js文件里配置,然后在package.json里配置,配置项为:“no-unused-vars”:"off",需要注意的是两个文件里配置的格式不一样,一个是json格式,一个是单引号格式。

3.分号和引号问题

这个提示错误没法关掉,Eslint要求字符串使用单引号,行末不能有多余的分号,这个也很烦,与我们常用习惯相违背。

可以在项目目录下新建一个.prettierrc文件,这是一个json格式的文件,加上配置,项目启用它就可以生效。

这里我加了两项,第一个就是行末分号取消,第二个就是字符串默认使用单引号,当我们写好代码后,格式化代码(我之前用Eclipse,现在用的idea,格式化代码快捷键都是设置的ctrl shift F),idea就会帮你把分号自动去掉,把双引号替换为单引号。如果还有其他规则,也可以往这个文件里添加。

这只是我觉得几个比较常见又很烦的规则,配置后解决了写代码心情舒畅,其他还有什么自己不喜欢的校验规则可以用同样的方式配置重启即可解决。

vue使用Eslint报错

初始化Vue时,再删掉一些不必要的文件和代码时,因为装了eslint代码校验,有一些朋友同事还安装了代码自动格式化的插件,有时候就会出现如下的报错。

2 problems (2 errors, 0 warnings) 2 errors and 0 warnings potentially fixable with the --fix option.

在这里插入图片描述

此时,我们只需要关闭eslint的校验即可

解决办法很简单

① 项目的代码中找到.eslintrc.js 文件夹将extends中的’@vue/standard’注释掉

②在rules中添加’space-before-function-paren’: 0

如下图,修改完成后,关闭项目,重新启动项目即可解决问题!

在这里插入图片描述

以上为个人经验,希望能给大家一个参考,也希望大家多多支持Devmax。

vue项目中Eslint校验代码报错的解决方案的更多相关文章

  1. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  2. vue自定义加载指令v-loading占位图指令v-showimg

    这篇文章主要为大家介绍了vue自定义加载指令和v-loading占位图指令v-showimg的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  3. vue使用动画实现滚动表格效果

    这篇文章主要为大家详细介绍了vue使用动画实现滚动表格效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  4. 关于Vue 监控数组的问题

    这篇文章主要介绍了Vue 监控数组的示例,主要包括Vue 是如何追踪数据发生变化,Vue 如何更新数组以及为什么有些数组的数据变更不能被 Vue 监测到,对vue监控数组知识是面试比较常见的问题,感兴趣的朋友一起看看吧

  5. Vue子组件props从父组件接收数据并存入data

    这篇文章主要介绍了Vue子组件props从父组件接收数据并存入data的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  6. Vue h函数的使用详解

    本文主要介绍了Vue h函数的使用详解,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  7. VUE响应式原理的实现详解

    这篇文章主要为大家详细介绍了VUE响应式原理的实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

  8. vue+Element ui实现照片墙效果

    这篇文章主要为大家详细介绍了vue+Element ui实现照片墙效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. vue+elemet实现表格手动合并行列

    这篇文章主要为大家详细介绍了vue+elemet实现表格手动合并行列,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. iview+vue实现导入EXCEL预览功能

    这篇文章主要为大家详细介绍了iview+vue实现导入EXCEL预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部