vue项目中Eslint校验代码报错的解决方案

目录
  • vue Eslint校验代码报错
    • 1.空格缩进，不让使用tab
    • 2.未使用的变量报错
    • 3.分号和引号问题
  • vue使用Eslint报错
    • 解决办法很简单

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

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

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

赞 (0)

相关推荐

  • vue 卸载eslint方式

    vue 卸载eslint方式

    目录 vue卸载eslint 我的项目 卸载方法 去掉vue中万恶的eslint 解决方法 vue卸载eslint 我的项目 基于vue-cli4.0+ webpack 4 卸载方法 卸载的时候进入到你的项目目录中执行 npm uninstall eslint --save 然后 进入package.json中,删除残留信息. 否则在执行卸载后,运行会报错. 之后再起项目. 去掉vue中万恶的eslint 解决方法 在项目根目录中添加vue.config.js文件 编辑如下: module.ex

  • 解决vue eslint开发严格模式警告错误的问题

    解决vue eslint开发严格模式警告错误的问题

    目录 eslint开发严格模式警告错误 原因分析 解决办法 vue踩坑之eslint eslint开发严格模式警告错误 如果我们初次使用vue-cli来构建单页SPA应用,在撸代码的过程中有可能会遇到这种因为代码缩进导致 页面报错的问题,导致我们烦不胜烦.接下来我们就来看一看如何解决这个小问题... 原因分析 通过查看package.json文件我们可以发现,在文件中默认安装了eslint-loader模块,eslint-loader模块是目前相对比较流行的代码检测工具,可以检测书写的代码是否符

  • vue项目下,如何用命令直接修复ESLint报错

    vue项目下,如何用命令直接修复ESLint报错

    目录 如何用命令直接修复ESLint报错 怎么修复eslint报的错误? eslint报的错误 如何修复eslint报的错误? 如何用命令直接修复ESLint报错 在写mpvue(小程序框架,其实也算是vue项目)项目过程引入ESLint代码规范,出现很多规范问题. 首先在项目的根目录下找到package.json文件,找到下面的位置,也就是“lint”这一条指令,指令后面具体内容不用深究. 然后修改成: 接下来,运行npm run lint 可以自动解决绝大多数错误,应该有可能包含一些错误只能

  • vue cli2 和 cli3去掉eslint检查器报错的解决

    vue cli2 和 cli3去掉eslint检查器报错的解决

    目录 cli2去掉eslint检查器报错 cli3去掉eslint检查器报错 vue-cli3取消eslint检查 cli2去掉eslint检查器报错 eslint在编写过程中及其严格,甚至单引号和双引号或者空格注释都会引起报错,导致项目无法正常运行 因此,只需要在build文件夹下,找到webpack.base.conf.js文件 将下面一行代码注释掉,即可正常编译了 cli3去掉eslint检查器报错 vue-cli3取消eslint检查 实际上在学习过程中,你会发现eslint 检查特别讨

  • vue去掉严格开发,去掉vue-cli安装时的eslint或修改配置方式

    vue去掉严格开发,去掉vue-cli安装时的eslint或修改配置方式

    目录 直接上问题 问题原因 解决办法 vue-cli关闭eslint及配置eslint 关闭eslint的方法 配置eslint的方法 vuex自动修复的方法 直接上问题 当我运行vue项目时候:npm run dev 出现以下问题警告报错.(如下图) 问题原因 用vue-cli构建项目时安装了eslint选择了Y,这东西很蛋疼.tab键不能使用,必须换成两个空格.sublime可以选择tab键自动转换成空格键.要不你就不要安装eslint. 解决办法 只需要删掉 build/webpack.b

  • vue 如何配置eslint代码检查

    vue 如何配置eslint代码检查

    目录 1.安装依赖 2.webstorm代码格式化快捷键为win + alt + L 3.设置webstorm校验规则为本地项目安装的eslint 4.在项目本地新建.editorconfig文件 5.在项目本地新建.eslintrc.js文件 1.安装依赖 "eslint": "^5.12.0", "eslint-config-standard": "^12.0.0", "eslint-friendly-forma

  • vue-cli构建的项目如何手动添加eslint配置

    vue-cli构建的项目如何手动添加eslint配置

    目录 package.json里配置添加 根目录下添加检测配置js文件.eslintrc.js 添加忽略检测配置文件.eslintignore webpack.base.conf.js rules里添加eslint-loader配置 config->index.js的dev里添加 Eslint的一些规则说明 1.使用Eslint的时候如果出现未闭合标签会报红 2.需要在单行元素的内容之前和之后换行 package.json里配置添加 1.scripts里添加快捷eslint检查命令 "li

  • vue项目中Eslint校验代码报错的解决方案

    vue项目中Eslint校验代码报错的解决方案

    目录 vue Eslint校验代码报错 1.空格缩进,不让使用tab 2.未使用的变量报错 3.分号和引号问题 vue使用Eslint报错 解决办法很简单 vue Eslint校验代码报错 在使用脚手架创建Vue项目时,一般会安装Eslint插件,这个主要是校验代码格式和规范用的,但是它很有点让人抓狂,因为很多校验规则和代码规范,你只要不按照它的格式来,直接导致项目编译报错,运行不了项目,这个是非常令人讨厌的. 它不像idea里安装alibaba插件,校验代码规范只是会提示,并不会导致你项目都不

  • vue-cli创建项目时由esLint校验导致报错或警告的问题及解决

    目录 vue-cli创建项目时由esLint校验导致报错或警告 eslint语法限制项目报错解决 vue-cli创建项目时由esLint校验导致报错或警告 vue-cli创建项目后编写代码控制台一片黄 但不影响代码执行 但是看着就是很不爽啊 到网上搜索了一下这个问题,想起来初始化项目时安装了esLint校验工具 嗯,我看到了很多办法都是下面这样的 1.因为你设置了eslint,如果你不想有规范的js代码,可以重新初始化关掉eslint. Use ESLint to lint your code?

  • vscode下vue项目中eslint的使用方法

    前言 在vscode的vue项目中,关于代码检查和格式化,遇到各种各样的问题,比如: 不清楚安装的拓展的功能,导致安装了重复功能的拓展 右键格式化文档的时候,不是按eslint的规则来格式化,导致需要我再次手动调整 保存时不能自动修复代码 以下通过自己的实践,进行了相应配置,目前可以实现: 仅安装2个推荐的拓展 右键格式化文档按照eslint规则,不会产生错误 保存时自动修复代码 vscode 拓展安装 eslint 拓展 该拓展本身不带任何插件,当前项目要使用该拓展,需要安装相应的npm包(全

  • VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决

    问题现象 项目使用vue/cli3脚手架搭建的前端项目,vue版本为2.6.10. browserslist的配置如下: [ "> 1%", "last 2 versions"] 但开发环境的IE11打开显示白屏,F12打开显示: 分析过程 5306行显示 "./node_modules/_debug@4.1.1@debug/src/browser.js"这个路径报错,由于eval()包含的代码中有ES6的语法,IE不支持,查了网上很多资料

  • spring boot项目导入依赖后代码报错问题的解决方法

    代码截图如图所示(由于本人问题已经解决,没来得及截图,所以在网上找了一张图片) ​ 针对图中所示的情况,可参考一下解决方案: 方案一: 在 Idea 导入 Spring Boot 项目代码报红,试过更改maven配置,maven clean操作,执行-U idea:idea等命令还是提示:cannot resolve symbol 'SpringBootApplication' .我最终解决方法是导入要导入项目的pom.xml文件,而不是导入现有项目解决.选择pom.xml后会弹出提示框,选择a

  • 解决vue项目运行npm run serve报错的问题

    先来一张报错的截图 先去配置环境变量 C:\Users\lgd\AppData\Local\Programs\Microsoft VS Code\bin的后面配置 :%SystemRoot%\system32;一定要注意分号, 然后在path环境中配置C:\Windows\System32 最后去项目安装依赖 npm i 运行项目 npm run serve 如果这样子项目还是报同样的错误,那么就把node全局卸载,去控制面板卸载,然后安装,最后安装依赖,运行项目就可以成功了 补充知识:vue

  • 在Web项目中引入Jquery插件报错的完美解决方案(图解)

    在Web项目中引入Jquery插件报错的完美解决方案(图解)

    在学习Jquery插件的时候,遇到一个问题就是新建web工程后在WebRoot下引入Jquery插件的时候报错,不知道为什么好纠结,但是项目能正常运行,后来找到解决方案,在这里给大家分享一下. 解决方案如下所示: 1.在MyEclipse软件中找打-----windows----preferences,会出现一个如下图所示的界面: 2.在检索框输入一个validation----单击该validation节点,将对于JavaScript脚本的验证取消勾,然后点击Apply,一直yes就行. 3.

  • vue component 中引入less文件报错 Module build failed

    错误是这样发生的: //在vue component组件中引入less文件 <style lang="less"> @import '@/assets/css/public/layout.less'; </style> 然后就报错了: Module build failed: @import '@/assets/css/public/layout.less'; ^ Can't resolve './@/assets/css/public/layout.less'

  • Vue项目中ESlint规范示例代码

    前言 eslint是一种代码风格管理的工具,可以制定一些代码编写规范,在vue项目中经常用到,本文就给大家分享了开发项目中使用的eslint校验规范,供参考: 示例代码 module.exports = { root: true, parserOptions: { parser: 'babel-eslint', sourceType: 'module' }, env: { browser: true, node: true, es6: true, }, extends: ['plugin:vue

  • vue项目关闭eslint校验

    vue项目关闭eslint校验

    简介eslint eslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格. 官方文档:https://eslint.org 这篇文章总结了eslint的规则:Eslint规则说明 关闭eslint校验 有了eslint的校验,可以来规范开发人员的代码,是挺好的.但是有些像缩进.空格.空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了.所以,我还是会选择关闭eslint校验. 下面就介绍一下vue项目中如何关闭这个校验. 首先我们在创建一个vue项目的时候,会有一

随机推荐