Disallow self-closing on HTML void elements

最新推荐文章于 2022-12-12 16:36:58 发布

原创最新推荐文章于 2022-12-12 16:36:58 发布 · 5.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html

vue 同时被 2 个专栏收录

16 篇文章

订阅专栏

html

3 篇文章

订阅专栏

本文解决Vue CLI 3中带有ESLint的项目中，自动关闭HTML void元素如<img>的报错问题。通过修改.eslintrc.js配置文件，调整vue/html-self-closing规则，实现正确语法检查。

环境：

vue cli 3.0初始化带有eslint项目

触发位置：

<img class="avatar" :src="photoUrl" alt="avatar" />

解决：

报错内容是：不允许对HTML void元素进行自动关闭

方法一：

<img class="avatar" :src="photoUrl" alt="avatar">

方法二：

修改文件.eslintrc.js

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

详情：参考链接

配置1:

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

示例1:

<template>
  <!-- ✓ GOOD -->
  <div/>
  <img>
  <MyComponent/>
  <svg><path d=""/></svg>

  <!-- ✗ BAD -->
  <div></div>
  <img/>
  <MyComponent></MyComponent>
  <svg><path d=""></path></svg>
</template>

配置2：

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

示例2：

<template>
  <!-- ✓ GOOD -->
  <div></div>
  <img/>
  <MyComponent/>
  <svg><path d=""/></svg>

  <!-- ✗ BAD -->
  <div/>
  <img>
  <MyComponent></MyComponent>
  <svg><path d=""></path></svg>
</template>