vue中eslint报Disallow self-closing on HTML void elements格式错误时的解决方案

已于 2022-09-23 23:12:27 修改
阅读量1.9k 收藏
点赞数
文章标签： 前端 vscode vue.js
于 2022-09-23 23:02:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40943266/article/details/127019227
版权

报错

当vue中eslint报Disallow self-closing on HTML void elements格式错误时，例如下图

 报错原因 

不允许对HTML void 标签自动闭合

HTML void标签即单标签

解决办法

我们需要在eslintrc.js文件的rules中配置

 rules: {
    "vue/html-self-closing": ["error", {
      "html": {
        "void": "always",
        "normal": "never",
        "component": "always"
      },
      "svg": "always",
      "math": "always"
    }]
 }

解决效果

报错提示消失了

 参考

参考链接

kkzzs
关注
warning: Require self-closing on Vue.js custom components
郭宝的博客
05-28 1万+
错误提示： 2 warnings found. 2 warnings potentially fixable with the `--fix` option. Module Warning (from ./node_modules/eslint-loader/index.js): warning: Require self-closing on Vue.js custom component...
eslint对html的检测,vue项目中使用eslint+prettier规范与检查代码的方法
weixin_36078354的博客
06-07 3811
1.前言在团队协作中，为避免低级 Bug、以及团队协作时不同代码风格对彼此造成的困扰与影响，会预先制定编码规范。使用 Lint 工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量。EsLint 则是其中一个很好的工具。EsLint 提供以下支持：ES6AngularJSJSXStyle 检查自定义错误和提示EsLint 提供以下几种校验：语法错误校验不重要或丢失的标点符号，如分号未被...
对于vue项目中报Disallow self-closing on HTML void elements格式错误时的解决方案
weixin_42466185的博客
12-12 2751
该错误为eslint自身所带规则，即虽然双标签和自闭合的单标签在项目中都是有效的，但是严格意义来说，在HTML的书写规范中是不支持的。找到.eslint.js文件，在rules规则中加入如下代码，来阻止报错。
Disallow self-closing on HTML void elements
xiaojinglyd的博客
12-16 5069
环境： vue cli 3.0初始化带有eslint项目 触发位置： <img class="avatar" :src="photoUrl" alt="avatar" /> 解决： 报错内容是：不允许对HTML void元素进行自动关闭 方法一： <img class="avatar" :src="photoUrl" alt="avatar"> 方法二： 修改文件.es...
vue项目报错：warning Disallow self-closing on HTML void elements (＜img/＞)
南北极之间
11-02 6472
在rule里面加一个规则： "vue/html-self-closing" rules: { "no-unused-vars":"off", "vue/html-self-closing": ["error", { "html": { "void": "always", "normal": "never", "component": "alw
eslint规则之vue/html-self-closing
最新发布
qq_44477160的博客
05-21 412
normal 除空元素之外的元素样式。always 没有内容的自我封闭。component 组件样式。nerver 禁止使用单标签。
【问题处理】warning Require self-closing on HTML elements (div) vue html-self-closing
且心的专栏
05-25 8144
问题（编译警告） [1] 101:7 warning Require self-closing on HTML elements (<div>) vue/html-self-closing 原因 格式问题 处理 <div ref="echart" class="chart" > </div> 改为 <div ref="echart" class="chart" /> ...
vue 使用 eslint 报错 [vue/no-parsing-error] Parsing error: x-invalid-end-tag.
热门推荐
Amy的博客
07-19 4万+
项目环境及编辑器 项目框架：vue iview 编辑器：vscode 错误提示 见下图：[vue/no-parsing-error] Parsing error: x-invalid-end-tag. 原因 Col components are wrong in eslint-plugin-vue 解决办法 以下三种办法都能搜出来，这里做个总结以及记录遇到的问题： 作者给出的办法 关闭...
ESLint 中的“ space-before-function-paren ”相关报错及其解决方案
酷爱前端的小陈博客
05-12 1万+
CSDN话题挑战赛第1期 活动详情地址：CSDN 参赛话题：前端学习记录 话题描述：记录前端学习过程中的某个知识点、解决方案等等 目录 出现的问题及其报错： 报错原因： 解决方案： 方案一： 方案二： 方案三： space-before-function-paren 规则: 规则细节 选项 “always” “never” {"anonymous": "always", "named": "never", "asyncArrow": "always"} {"an...
vue项目eslint格式化最全注释！拿走不谢
c1518589418的博客
12-11 5323
JavaScript语言因为其灵活，怎么写都不会错的特点深受开发人员喜爱，然而过于灵活也会导致一些难以排查的bug。好的代码风格能够帮我们解决这些问题（typeScript：没错，正是在下！）雾~~ 代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。eslint附有大量开箱即用的配置规则帮助我们检查代码，但每次需要翻阅长长的文档颇为麻烦，我根据网络把大部分能用...
iview中的Col在vue/html-self-closing中识别错误
weixin_34191845的博客
03-27 1256
eslint-plugin-vue v5.2.2 目前只能使用i-col替代 <Row> <!-- ----- fix before ----- --> <Col></Col> <!-- <= 被识别成了无内容的<col> 然后分别被fix成<Col/>和 </Col> -->...
self-closing
denghuocc
07-23 1001
错误提示 :warning: Require self-closing on Vue.js custom components (<el-input>) (vue/html-self-closing) at src\views\news\edit.vue:27:21: 错误代码<el-input v-model="postForm.imgUrl" placeholder=...
vue中Require self-closing on Vue.js custom components的解决方法
qq_39237850的博客
04-27 1万+
1、找到.eslintrc.js这个文件 2、然后再rules中添加如下配置 "vue/html-self-closing": ["error",{ "html": { "void": "never", "normal": "any", "component": "any" }, "svg": "always", ...
HTML自闭合(self-closing)标签
云淡风轻
03-07 2万+
<meta>标签:设置页面元信息的 <base>:设置网页所有链接的相对目录(如根目录)的 <br>:换行 <hr>:水平线 <img>:图像 <input>:表单元素 <col>:在表格table中定义一个或多个列的属性 <frame>:定义框架的一个窗口（已遗弃） <link>:定义文档与外部资源的关系的链接 <area>: 标签定义图像映射内部的区域（图像映射指的是带有可点击
Vue配置问题
qq_39262418的博客
11-24 4546
1.eslintrc配置 在根目录下添加.eslintrc.js文件（注意：前面有个点） 内容如下 /** * Eslint 检查规则（A） * "off" 或者 0 -- 关闭规则 * "warn" 或者 1 -- 将规则打开为警告（不影响退出代码） * "error" 或者 2 -- 将规则打开为错误（触发时退出代码为 1） */ module.exports = { root: true, // 禁用持续查找（root） env: { browser: true, /
vscode(^1.44.0)下vue-html代码格式化与eslint格式化冲突
fredricen的专栏
04-19 1279
vscode配置 { "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": [ "javascript", "javascriptreact", "html", ...
HTML5自闭合（self-closing）标签汇总、以及末尾的斜杠问题的官方说明
时间飞逝的博客
06-20 9727
HTML5规范声明： 在HTML5的规范中，自闭合标签不需要加斜杠，但是兼容加斜杠的写法； XHTML严格要求自闭合标签中必须加斜杠； 自闭标签及其官方说明： <br> 插入一个简单的换行符，标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。 <hr> 创建一条水平线，在HTML中，<hr> 没有结束标...
HTML(5) 不要求标签自闭合
大爱无疆的博客
11-30 2542
XHTML教导我们，标签都是要闭合的，不能包含子元素的标签需要自闭合。但HTML5是没有这个要求的，所有HTML中都没这个要求，是XHTML将这门松散的语言变得严格起来。XHTML诸多严格，包括标签都要闭合，包括tagName和属性都要小写等。 HTML 第一版 追溯HTML的元祖第一版，就是不要求自闭合的，如下的一段用法就表明了其的松散随意 1 2 3 4
'vue/html-self-closing': 0,
06-08
这也不是一个问题，而是一个 ESLint 的配置项。该配置项指示 ESLint 是否应该强制要求 HTML 标签自闭合。具体而言，该配置项的值为0表示禁用该规则，不会对自闭合标签进行任何检查。如果将该配置项的值设为1，则表示...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值