require-closing-tags

This rule enforces closing tag.

How to use

.eslintrc.js 
module.exports = {
  rules: {
    "@html-eslint/require-closing-tags": "error",
  },
};

Rule Details

Examples of incorrect code for this rule:

<div>

Examples of correct code for this rule:

<div></div>

Options

This rule has an object option for Void Elements and custom element patterns.

  1. "selfClosing": "never": (default) disallow using self closing tag on Void Elements.

  2. "selfClosing": "always": enforce using self closing tag on Void Elements.

  3. "selfClosingCustomPatterns": []: (default) disallow self-closing for custom tags.

  4. "selfClosingCustomPatterns": ["-"]: enforce self-closing for tags matching any of an array of strings representing regular expression pattern (e.g. tags including - in the name).

selfClosing : "never"

Examples of incorrect code for the { "selfClosing": "never"} option:

<img />
<base />

Examples of correct code for the { "selfClosing": "never"} option:

<img>
<base>

selfClosing : "always"

Examples of incorrect code for the { "selfClosing": "always" } option:

<img>
<base>

Examples of correct code for the { "selfClosing": "always" } option:

<img />
<base />

selfClosingCustomPatterns: ["-"]

Examples of incorrect code for the { "selfClosingCustomPatterns": ["-"] } option:

<custom-tag> </custom-tag>

Examples of correct code for the { "selfClosingCustomPatterns": ["-"] } option:

<custom-tag>children</custom-tag>
<custom-tag />

selfClosingCustomPatterns: []

Examples of incorrect code for the { "allowSelfClosingCustom": [] } option:

<custom-tag />

Examples of correct code for the { "allowSelfClosingCustom": [] } option:

<custom-tag> </custom-tag>

Further Reading

  1. Void Elements