eslint-plugin-vue

外观

vue/html-self-closing ​

强制使用自闭合样式

  • ⚙️ 此规则包含在所有 "plugin:vue/vue3-strongly-recommended"、*.configs["flat/strongly-recommended"]、"plugin:vue/strongly-recommended"、*.configs["flat/vue2-strongly-recommended"]、"plugin:vue/vue3-recommended"、*.configs["flat/recommended"]、"plugin:vue/recommended" 和 *.configs["flat/vue2-recommended"] 中。
  • 🔧 命令行 上的 --fix 选项可以自动修复此规则报告的一些问题。

📖 规则详细信息 ​

此规则旨在强制执行自闭合符号作为配置的样式。

在 Vue.js 模板中，我们可以对没有内容的元素使用两种样式。

  1. <YourComponent></YourComponent>
  2. <YourComponent/>（自闭合）

自闭合简单且更短，但 HTML 规范不支持它。

正在加载...

🔧 选项 ​

json
{
  "vue/html-self-closing": ["error", {
    "html": {
      "void": "never",
      "normal": "always",
      "component": "always"
    },
    "svg": "always",
    "math": "always"
  }]
}
  • html.void（默认值为 "never"）... 众所周知的 HTML 空元素的样式。
  • html.normal（默认值为 "always"）... 众所周知的 HTML 元素（除空元素外）的样式。
  • html.component（默认值为 "always"）... Vue.js 自定义组件的样式。
  • svg(默认值为 "always") .... 众所周知的 SVG 元素的样式。
  • math(默认值为 "always") .... 众所周知的 MathML 元素的样式。

每个选项都可以设置为以下值之一

  • "always" ... 要求对没有内容的元素进行自闭合。
  • "never" ... 禁止自闭合。
  • "any" ... 不强制执行自闭合样式。

html: {normal: "never", void: "always"} ​

正在加载...

📚 进一步阅读 ​

🚀 版本 ​

此规则在 eslint-plugin-vue v3.11.0 中引入

🔍 实现 ​