vue/html-self-closing

强制自闭样式

• ⚙️ 此规则包含在 "plugin:vue/strongly-recommended"、*.configs["flat/strongly-recommended"]、"plugin:vue/vue2-strongly-recommended"、*.configs["flat/vue2-strongly-recommended"]、"plugin:vue/recommended"、*.configs["flat/recommended"]、"plugin:vue/vue2-recommended" 和 *.configs["flat/vue2-recommended"] 中。

• 🔧命令行 上的 --fix 选项可以自动修复此规则报告的一些问题。

  ¥🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 规则详情

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

¥This rule aims to enforce the self-closing sign as the configured style.

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

¥In Vue.js template, we can use either two styles for elements which don't have their content.

1. <YourComponent></YourComponent>

2. <YourComponent/>（自动关闭）

   ¥<YourComponent/> (self-closing)

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

¥Self-closing is simple and shorter, but it's not supported in the HTML spec.

Now loading...

🔧选项

¥🔧 Options

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

• html.void（默认为 "never"）...知名 HTML void 元素的样式。

  ¥html.void ("never" by default) ... The style of well-known HTML void elements.

• html.normal（默认为 "always"）...除 void 元素之外的知名 HTML 元素的样式。

  ¥html.normal ("always" by default) ... The style of well-known HTML elements except void elements.

• html.component（默认为 "always"）...Vue.js 自定义组件的样式。

  ¥html.component ("always" by default) ... The style of Vue.js custom components.

• svg（默认为 "always"）....知名 SVG 元素的样式。

  ¥svg("always" by default) .... The style of well-known SVG elements.

• math（默认为 "always"）....知名 MathML 元素的样式。

  ¥math("always" by default) .... The style of well-known MathML elements.

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

¥Every option can be set to one of the following values:

• "always" ...要求在没有内容的元素处自动关闭。

  ¥"always" ... Require self-closing at elements which don't have their content.

• "never" ...不允许自动关闭。

  ¥"never" ... Disallow self-closing.

• "any" ...不强制自动关闭样式。

  ¥"any" ... Don't enforce self-closing style.

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

Now loading...

📚扩展阅读

¥📚 Further Reading

• 样式指南 - 自关闭组件

  ¥Style guide - Self closing components

🚀版本

¥🚀 Version

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

¥This rule was introduced in eslint-plugin-vue v3.11.0

🔍代码实现

¥🔍 Implementation

• 规则源

  ¥Rule source

• 测试源

  ¥Test source