解决在Vue项目中时常因为代码缩进导致页面报错的问题

最新推荐文章于 2024-09-24 18:08:04 发布
最新推荐文章于 2024-09-24 18:08:04 发布
阅读量2.5w 收藏 7
点赞数 7
分类专栏： VUE 文章标签： VUE Node eslint
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhu1500527791/article/details/53445277
版权

前言

如果我们初次使用vue-cli来构建单页SPA应用，在撸代码的过程中有可能会遇到这种因为代码缩进导致

页面报错的问题，导致我们烦不胜烦。接下来我们就来看一看如何解决这个小问题。。。

erro

原因分析

通过查看package.json文件我们可以发现，在文件中默认安装了eslint-loader模块，eslint-loader模块是目前相对比较流行的代码检测工具，可以检测书写的代码是否符合统一规范，可以在一些比较大型的项目开发中统一开发人员的代码风格，这也就是为什么代码缩进有可能导致页面报错的原因（代码缩进不符合规范）。

解决办法

方法一：了解eslint-loader规则，严格按照规范书写代码（这是废话）
方法二：关闭eslint

如果实在普通的webpack项目中我们只需要打开webpack.config.js文件，然后去除ESlint在文件中的配置代码就可以了；

如果是在vue项目中，我们需要打开项目根目录下的build文件夹并且打开该文件夹下的webpack.base.conf.js文件，然后去除ESlint在文件中的配置代码就可以了。

查看更多文章请点击进入我的个人博客

Afeyer
关注
专栏目录
Vue中常见问题汇总及解决方案（三）
小刘哥的博客
07-31 290
如果项目中有较多的 DOM 操作、事件处理或需要集成依赖 jQuery 的第三方库,那么引入 jQuery 可能是一个不错的选择。在选择 CSS 预处理器时,SCSS (SASS)、Less 和 Stylus 都是不错的选择,每种都有自己的优缺点。通常来说,添加 setter 方法或修改属性的定义是常见的解决方法。需要注意的是,使用字面量值传递的是字符串类型的值,如果需要传递其他类型的值(如数字、布尔值等),仍然需要使用。这个别名通常在项目的构建配置中设置,比如在 Vue CLI 创建的项目中,可以在。
ESLint 开始，说透我如何在团队项目中基于 Vue 做代码校验
github_37759996的博客
07-21 434
最近遇到了一个老项目，比较有意思的是这个项目集前后端的代码于一起，而后端也会去修改前端代码，所以就出现了后端用 IntelliJ IDEA 来开发前端项目，而前端用 VSCode 来开发前端项目的情况。 于是乎，出现了代码规范的问题，所以就有了这篇文章，整理了一下前端代码校验以及在 Vue 项目中的实践。 阅读完这篇文章，你可以收获： 能够自己亲手写出一套 ESLint 配置； 会知道业界都有哪些著名的 JS 代码规范，熟读它们可以让你写出更规范的代码； vue-cli 在初始化一个包含代码校验的项目时都做
彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题（附图）
大道至简
12-08 7423
背景不多介绍了，直接上代码。 打开.eslintrc.js，将rules节点中添加以下配置项。 rules: { 'vue/script-indent': ['error', 2, {'baseIndent': 1}] } 其中第1个2是指统一缩进2个空格，第2个1是指1倍缩进。 ...
在vue项目中遇到“字符缩进问题出现的报错”
weixin_43267086的博客
07-18 475
"indent":["off",2]关掉字符缩进问题出现的报错，放在package.json的rules 下
git eslint扩展，解决git提交因为空格差异而报错
最新发布
weixin_44565776的博客
09-24 422
eslint扩展插件，解决代码过度严谨问题
vue缩进问题
qq_39085654的博客
06-11 884
Module build failed: ParseError,expected “indent”, got “outdent” 根据视频学习以前学习过的VUE碰到的大山 这TM是个啥？为什么报错？好奇怪。看看翻译。 奥，要缩进~ 应该没问题了，保存看看 好了。。。 原因是tab跟空格不能混用。嗯我记住了。。。诶。。。。 ...
解决vue代码缩进报错问题 关闭ESlint
hijk7的博客
05-24 387
解决vue代码缩进报错问题 关闭ESlint
vue eslint报错
weixin_43267086的博客
07-18 95
去掉package.json"extends"下的:"@vue/standard"，防止eslint报错
运行vue项目，eslint报错
m0_52043522的博客
04-01 3939
问题描述 在运行vue项目时，出现如下图所示的报错，比如：字符串必须用单引号，不能加分号等。 原因分析： 根据报错信息，可以看出是eslint的问题，eslint是一个非常严格的语法检查器，有很多规范，有一丁点的错误就会报错。 解决方案： 我们关闭它即可。找到build文件夹下的webpack.base.conf.js文件，注释掉如下框出来的那行代码。这样，再运行npm run dev，就不会出现这个报错了。 ...
vue项目流程demo示例
tang31415926的博客
03-07 1469
自己写从头做一个vue项目，没什么技术，主要是温故流程。 没写完，只写到创建完项目。
Vue常见问题汇总及解决方案
qq_15859173的博客
12-09 2465
Q1：安装超时(install timeout) 方案有这么些: cnpm : 国内对npm的镜像版本 /* cnpm website: https://npm.taobao.org/ */ npm install -g cnpm --registry=https://registry.npm.taobao.org // cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些 yarn 和 npm 改源大法 //使用 nrm 模块 : www.npmjs.com/package/nrm npm co
vue 创建项目
qq_49732089的博客
02-16 480
# 一、项目初始化 ## 使用 Vue CLI 创建项目 > 注意：不要使用 Git Bash 执行项目创建操作，使用 cmd 或者 powershell 之类的工具。 > 如果你还没有安装 VueCLI，或者版本低于 4，请执行下面的命令安装或是升级： > > ```shell > npm install --global @vue/cli > ``` 在命令行中输入以下命令创建 Vue 项目： ```shell vue create toutiao-pub
Vue中Eslint报错整理
weixin_34377919的博客
01-15 223
为什么80%的码农都做不了架构师？>>> ...
【vue】解决vue eslint语法报错问题
好学的小师弟的博客；华为云社区月度积极博主
12-19 936
【vue】解决vue eslint语法报错问题
创建vue项目后的常见ESLint(语法规则)报错
Chen__FY的博客
04-18 1067
解决方案：搜索eslint官方文档。把第4行空行删掉就好了。这样就能正常运行了！
解决Vue项目中Eslint校验代码报错的问题
cpsdyp的博客
06-19 1020
在使用脚手架创建Vue项目时，一般会安装Eslint插件，这个主要是校验代码格式和规范用的，但是它很有点让人抓狂，因为很多校验规则和代码规范，你只要不按照它的格式来，直接导致项目编译报错，运行不了项目，这个是非常令人讨厌的。这里我加了两项，第一个就是行末分号取消，第二个就是字符串默认使用单引号，当我们写好代码后，格式化代码（我之前用Eclipse，现在用的idea，格式化代码快捷键都是设置的ctrl+shift+F），idea就会帮你把分号自动去掉，把双引号替换为单引号。
idea编译器 vue缩进报错
weixin_44343812的博客
07-03 387
项目场景： 在运行Vue项目时，出现了缩进报错的问题，我是使用idea 的编译器，上网查了一下多数都是直接更改缩进的的数量，不过我觉得麻烦，就只是想要关掉验证。 问题描述： idea编译器出现Vue缩进报错 ✘ http://eslint.org/docs/rules/indent Expected indentation of 0 spaces but found 2 src\components\Home.vue:6:1 export default { ^ ✘ htt
vue eslint报错解决办法
weixin_30588729的博客
11-13 753
若提示入下图时，在build / webpack.base.conf.js中， 找到 // const createLintingRule = () => ({// test: /\.(js|vue)$/,// loader: 'eslint-loader',// enforce: 'pre',// include: [resolve('src'), resol...
vue项目因为eslint报错的原因及解决办法
grand_brol的博客
08-24 6014
一、报错：error Expected indentation of 2 spaces but found 3 indent 原因：像这种就是多或者少空格导致的，想上面一个就是多了一个空格。 解决：将多余（缺少）的空格删除（补全）即可 注意事项：如果使用过代码格式化工具，可能会很难调整对象中的参数，可以先将其禁用。 二、报错：Newline required at end of file but not found eol-last 原因：eslint需要文件最后有一个空号，而你没有 解决：在对应文件末
VSCode Vue项目中高效配置ESLint与Vetur解决代码规范
在VSCode开发Vue项目时，利用ESLint进行代码检查和格式化的最佳实践十分重要。...通过以上步骤，可以在VSCode的Vue项目中高效地使用ESLint进行代码检查和格式化，确保代码质量和一致性，同时减少手动调整的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值