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

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

主要报错如下：

截取了一段常见报错，选取其中一个：

Expected indentation of 4 spaces but found 1 tab

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

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

保存，然后重新npm run dev 一下：

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

二，这就用到了另一个配置文件：test目录下的.eslintrc.js文件（推荐）

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

规则

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

规则的错误等级有三种：

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

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

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

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

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

然后到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
 }

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue-cli中的ESlint配置文件eslintrc.js

    本文讲解vue-cli脚手架根目录文件.eslintrc.js,分享给大家,具体如下: 1.eslint简介 eslint是用来管理和检测js代码风格的工具,可以和编辑器搭配使用,如vscode的eslint插件.当有不符合配置文件内容的代码出现就会报错或者警告 2.安装exlint npm init -y npm install eslint --save-dev node_modules\.bin\eslint --init 初始化配置文件,此配置文件配置好之后,vscode编辑器自动识别

  • vue项目关闭eslint校验

    vue项目关闭eslint校验

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

  • Vue.js绑定HTML class数组语法错误的原因分析

    Vue.js绑定HTML class数组语法错误,详情如下所示: 昨天在官网教程上发现一个错误是这样的,下面看图 http://cn.vuejs.org/guide/class-and-style.html 当有多个条件class时这样写有些繁琐.在1.0.19+中,可以在数组语法中使用对象语法: 如果这样写是可以执行成功的,但有错误 data: { classA: 'class-a', classB: 'class-b', classC: 'class-c', isB: true, isC:

  • 给vue项目添加ESLint的详细步骤

    eslint配置方式有两种: 1.注释配置:使用js注释来直接嵌入ESLint配置信息到一个文件里 2.配置文件:使用一个js,JSON或者YAML文件来给整个目录和它的子目录指定配置信息.这些配置可以写在一个文件名为.eslintrc.*的文件或者在package.json文件里的eslintConfig项里,这两种方式ESLint都会自动寻找然后读取,或者你也可以在命令行里指定一个配置文件. 有几种东西是可以配置的: 环境:你的脚本会在哪种环境下运行.每个环境带来了一组特定的预定义的全局变量

  • Vue-cli Eslint在vscode里代码自动格式化的方法

    编辑器另外一个很重要的功能就是代码格式化了,VS Code默认提供常见文件的格式化,如.js,.html等. 添加对.vue文件的格式化支持 这里我们添加对 .vue 文件的格式化支持. 1. 安装 Vetur 插件 2. 在 VS Code 的设置中添加如下规则: { "vetur.format.defaultFormatter": { "html": "prettier", "css": "prettier&qu

  • vue-cli的eslint相关用法

    ESLint简介 关于ESLint的介绍网上很多,这里就简单说些有用的. ESLint的作用是检查代码错误和统一代码风格的.由于每个人写代码的习惯都会有所不同,所以统一代码风格在团队协作中尤为重要. vue-cli的eslint相关 vue-cli在init初始化时会询问是否需要添加ESLint,确认之后在创建的项目中就会出现.eslintignore和.eslintrc.js两个文件. .eslintignore类似Git的.gitignore用来忽略一些文件不使用ESLint检查. .esl

  • 去掉vue 中的代码规范检测两种方法(Eslint验证)

    我们在使用vue 脚手架时,为了规范团队的代码格式,会有一个代码规范检测,如果不符合规范就会报错,有时候我们不想按照他的规范去写.这时我们需要关闭.这里有两种方法. 1.在搭建vue脚手架时提示是否启用eslint检测的. Use ESLint to lint your code? 写 no; 2.如果项目已经生成,我们可以这样. 在项目中代开 bulid 文件夹下的 webpack.base.config.js 文件.将以下代码删掉或注销: { test: /\.(js|vue)$/, loa

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

    搭建了一个vue项目,在配置路有的时候,陆续出现了各种报错其中最多的是一些写法,例如空格,缩进,各种括号,结果我一句一句对照,修改相当之费时间,效率低,一上午,一个路由配置都没写好 主要报错如下: 截取了一段常见报错,选取其中一个: Expected indentation of 4 spaces but found 1 tab 翻译一下,意思是:预期缩进4个空格,但找到1个选项卡.意思是vue在检测写法规则的时候,只认空格,不认tab的缩进,这时你就要修改的页面内容,把tab换成空格,这样就比

  • vue安装node-sass和sass-loader报错问题的解决办法

    目录 可行版本(针对 node 16+ 版本) 问题描述 解决方法 补充知识:解决启动VUE项目时报node-sass不能运行问题 总结 可行版本(针对 node 16+ 版本) 不想浪费时间看的,可直接去尝试 npm install node-sass@6.0.1 -D npm install sass-loader@10.2.0 -D 问题描述 问题描述:在进行一个vue项目练习时需要导入node-sass.sass-loader这两个依赖,书本提供代码是npm install sass-l

  • Vue路由重复点击报错问题及解决

    目录 vue路由重复点击时会出现报错 局部处理 全局处理 vue 重复点击菜单,路由重复报错解决 报错原因 解决方法 总结 vue路由重复点击时会出现报错 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location:XXX 虽然不影响运行结果,但最好还是处理一下. 局部处理 局部处理是指对单个路由进行处理,其他的路由依旧报错. 在路由跳转的push语句中添加catch捕捉

  • 解决vue 项目引入字体图标报错、不显示等问题

    问题:在项目开发时使用字体图标,发现两个问题: 1.出现报错: 解决方法为:把字体引入方式改为绝对路径 2.不报错,但是不显示图标字体,出现方框 原因可能有两种: ①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件 ①的解决办法是在用到的地方引入字体的样式文件(全局引入的话需要从app.vue里引入) ②这个就是我遇到的问题,浪费了我好几分钟!!!微笑 解决办法是把font.styl改为font.css 记得在用到图标的地方引入 问题原理后续再写. 以上这篇解决vue 项目

  • 关于vue中使用three.js报错的解决方法

    关于vue中使用three.js报错的解决方法

    目录 前言 1.vue的问题? 2.Proxy的异常情况 3.Three.js的问题 4.defineProperty异常情况 5.解决 总结 前言 最近在学习three.js,同时也学习一下vue3,然后就出现问题了,报错直接用不了,错误信息如下: Uncaught TypeError: 'get' on proxy: property 'modelViewMatrix' is a read-only and non-configurable data property on the prox

  • react创建项目启动报错的完美解决方法

    react创建项目启动报错的完美解决方法

    目录 一.预备知识: 二.创建项目步骤: 三.启动项目时可能出现的报错: 四.Todolist项目相关库: 五.GitHub搜索案例相关库: 六.尚硅谷路由案例相关库: 七.UI库案例相关库: 八.redux相关库: 一.预备知识: npm (也可以用yarn,本文以npm为例) npm介绍 全称为Node Package Manager,是随同NodeJS一起安装的包管理工具. 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地

  • Oracle+Mybatis的foreach insert批量插入报错的快速解决办法

    最近做一个批量导入的需求,将多条记录批量插入数据库中. 解决思路:在程序中封装一个List集合对象,然后把该集合中的实体插入到数据库中,因为项目使用了MyBatis,所以打算使用MyBatis的foreach功能进行批量插入.期间遇到了"SQL 命令未正确结束 "的错误,最终解决,记录下来供以后查阅和学习. 首先,在网上参考了有关Mybatis的foreach insert的资料,具体如下: foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合. foreach

  • vscode编译运行c语言报错乱码的解决

    vscode编译运行c语言报错乱码的解决

    目录 在这里先展示我遇到的报错顺序: 解决报错的前提: 报错1和2: 报错3: 报错4: 在这里先展示我遇到的报错顺序: 1.运行后出现乱码(不论是输出中文还是英文) 2.检测到 #include 错误.请更新 includePath.已为此翻译单元(E:\abc.ino)禁用波形曲线.C/C++(1696) 3.无法将"g++"项识别为 cmdlet.函数.脚本文件或可运行程序的名称 4.输出中文出现乱码 解决报错的前提: 首先vscode必须安装有2个扩展才能编译运行C代码,如图:

  • Vue3刷新页面报错404的解决方法

    Vue3刷新页面报错404的解决方法

    vue-router历史模式 最近在学习Vue3的过程中遇到了一个问题,那就是在写代码的过程中,每当代码发生了变动,页面一刷新,原先的页面就会变成这个样子: 打开控制台一看: 这时候刷新.在浏览器地址栏直接输入地址也不管用. 每次写一点代码,都不能及时看到结果,需要从8080重新进入才可以,其中的崩溃可想而知. 此时判断应该是路由跳转的问题,于是来到router.js文件看一看: import { createRouter, createWebHistory } from 'vue-router

  • MySQL5.7 group by新特性报错1055的解决办法

    项目中本来使用的是mysql5.6进行开发,切换到5.7之后,突然发现原来的一些sql运行都报错,错误编码1055,错误信息和sql_mode中的"only_full_group_by"有关,到网上看了原因,说是mysql5.7中only_full_group_by这个模式是默认开启的 解决办法大致有两种: 一:在sql查询语句中不需要group by的字段上使用any_value()函数 当然,这种对于已经开发了不少功能的项目不太合适,毕竟要把原来的sql都给修改一遍 二:修改my.

随机推荐