在vue项目中＜template＞中的div不能缩进问题

原创于 2022-10-01 11:55:27 发布 · 561 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了解决 ESLint 报告使用制表符缩进问题的方法。通过在 .eslintrc.js 文件中将 'no-tabs' 规则设置为 'off'，可以关闭对制表符的检查。

问题如图：

解决办法：

在项目的资源管理器中找到配置文件： .eslintrc.js 加一个 'no-tabs': 'off' 保存

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Js_WEB

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue 命名出错 ESLint的语法校验空格缩进项目创建

sinat_29326171的博客

04-18

391

Vue报错：Expected indentation of 4 spaces but found 6 ESLint的语法校验空格缩进数量的问题更改后，重启服务

【Vue】使用Vue实现div收缩效果

MicroAnswer的博客

09-10

1万+

重要声明：本文章仅仅代表了作者个人对此观点的理解和表述。读者请查阅时持自己的意见进行讨论。本文原文地址：Microanswer的博客【Vue】使用Vue实现div收缩效果。一、效果展示你看到的边框只是为了演示效果需要，实际组件是不会有任何内容的，它只提供收缩功能。此处内容可以是任何内容，组件会自动根据内容高度进行展开，需要用户关心的是否开还是关的状态。开发者也只需关心此状态，故此可以放心...

参与评论您还未登录，请先登录后发表或查看评论

解决Vue空格和缩进报错问题 Mixed spaces and tabs no-mixed-spaces-and-tabs

m0_51392380的博客

10-16

1085

1.找到根目录下的package.json文件： 2.找到"eslintConfig"配置，修改里面的rules，添加"no-mixed-spaces-and-tabs":0重新运行项目即可

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

最新发布

06-25

--唯一根元素--><div>...</div><div>...</div></div></template>```>注意：Vue3支持多个根元素（Fragment），但某些IDE设置可能仍要求单一根元素。###3.**检查IDE的Vue插件**红色波浪线可能是IDE的Vue插件（如Vetur...

修改改正这段代码： <template> <div id="app"> {{ message }} </div> <div class="hello"> <img src="../assets/logo.png"> <h1>{{ msg }}</h1> </div> </template> <script> var exampleData = { message: "Hello World! " }; var vm=new Vue({ el: '#app', data: exampleData }); </script>

07-11

<template> <div id="app"> <div>{{ message }}</div> <div class="hello"> ...在修改后的代码中，主要是将`{{ message }}`包裹在一个`<div>`标签中，保持代码的结构清晰。同时，调整了缩进，使代码更易读。

为什么我的details标签中的代码单独出来了，不在标签里面。下边是我的代码 <details> <summary>📜 完整炼成阵代码（点击展开）</summary> ```html <!DOCTYPE html> <html> <head> </head> <body> <div class="container"> <div class="taiji"></div> </div> </body> </html> ``` </details>

04-28

<think>好的，用户的问题是HTML details标签中的内容未正确显示，代码部分单独出来了。我需要先分析可能的原因。通常，代码在HTML中需要使用pre和code标签来正确格式化，同时保留缩进和换行。如果用户没有正确使用...

``` <template> <div> <router-view></router-view> <ul class="nav"> <li><router-link to="/">首页</rou4ter-link></li> <li><router-link to="/about">关于</router-l22ink></li> </ul> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .nav { display: flex; } .nav li { width: 100px; list-style: none; } </style>```检查错误并改正

03-22

<think>嗯，我现在需要检查用户提供的这段Vue.js代码，找出其中的错误并改正。让我仔细看一下代码的结构和内容。首先看模板部分。用户有一个包含`<router-view>`和导航列表的`div`。导航部分有一个`ul`，里面有两...

``` <template> <div> <ul class="nav"> <li><router-l1ink to="/">Home</router-link></li> <li><router-link to="/about">About</router-link></li> <li><router-link to="/other">Other111</router-link></li> 此处加入自己的名字 </ul> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .nav { display: flex; } .nav li { width: 100px; list-style: none; } </style>```检查代码错误并改正

03-22

<think>好的，我现在需要帮助用户检查并修正他们提供的Vue.js代码中的错误。首先，我会仔细阅读用户提供的代码，逐行分析可能存在的问题。首先看模板部分。用户有一个包含导航链接的`<ul>`列表，里面有几个`<li>`...

为什么template必须有且只能有一个div呢？

weixin_43258184的博客

08-24

8896

单文件组件　　当我们在vue-cli脚手架搭建的vue开发环境下使用单文件组件时，一般会这么写： <template> <div class="box"> 这里是页面内容 </div> </template> 如果我们尝试在template标签下写两个div，那么编辑器会提示我们***The template root requires exactly one element。***那这里为什么template下也必须有且只能有一个div呢

vue-element-admin配置

sinat_41883985的博客

10-11

835

启动时只开启一个页面注释vue.config.js文件里面devServer下面的 open:true 在package.json文件中修改为 “scripts”: { “dev”: “vue-cli-service serve --open”, 发送请求是表单校验错误在utils文件夹下的request.js文件 service.interceptors.request.use( con...

Day5——代码缩进规范以及webstorm自定义template快捷键

Android_la的博客

07-16

473

文章目录一. 回顾二. 问题背景三. 步骤一. 回顾前面学习了Day4——vue的生命周期，今天设置一下代码的缩进以及定义template模板，使得后面书写例子能够更加快速。二. 问题背景前端代码一般的缩进是2个空格，vue源码项目的缩进也是2个空格，因此我也设置缩进为2个空格。后面的学习会经常用到一些重复的代码，为了能快速的书写出来，这里自定义template。三. 步骤首先是设置缩进空格，如下：接下来自定义template，如下：贴出自定义的template代码，其

vue 保存自动格式化, html自动缩进双引号变为单引号注释加空格 html标签属性设置不换行亲测有效！

zxydxq的博客

04-16

3648

设置vscode自动格式化开启语法检查（安装ESLint，检查语法保证代码的规范性）安装Vetur插件打开vscode的setting.js文件（文件–>首选项–>输入vetur搜索，往下找到在setting.js文件中编辑）将如下代码复制到setting.js文件中覆盖 // setting.js { // "workbench.iconTheme": "vscode...

解决vue项目中缩进不一致的问题

upStar1的博客

05-12

4561

在vue项目中，有时候会碰到这个文件的缩进是两格，另一个文件的缩进是四格。但是vue的eslint格式是默认两格，所以调整缩进四格的文件就很不方便。碰到这种情况是因为vue文件默认缩进四格。所以我们更改一下vue设置。打开vscode，打开文件，选择首选项，点开设置，把缩进改为2 修改默认缩进（默认为4） ...

vue文件代码缩进以及格式化代码 [自定义]

qq_43294510的博客

04-15

2653

文件->首选项->设置->文本编辑器-> 找到setting.json 替换以下内容. { "files.autoSave": "afterDelay", "files.autoSaveDelay": 3000, "files.associations": { "vue-html": "html", "vue": "h...

vue---设置缩进为4个空格

weixin_33910385的博客

11-01

3347

在使用vue-cli的时候，我们发现，默认编辑的时候，使用的缩进都是2个空格，即使是是编辑器设置了4个空格，在编译的时候，还是以2个空格进行缩进，那么如果将vue设置为4个空格呢？具体方法在根目录找到：.editorconfig 进行配置：转载于:https://www.cnblogs.com/e0yu/p/9888519.html...

字符串模板、模板字符串、Vue中使用template等等。

WARGON的博客

09-27

9030

1：模板字符串传统的JS语言，输出模板是这样写的： $('#result').append( 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' + '<em>' + basket.onSale + '</em> are on ...

在vue项目中 ＜template＞中的div不能缩进问题

在vue项目中＜template＞中的div不能缩进问题