prettier-plugin-void-html

This is a Prettier plugin to format void HTML elements using the void tag syntax instead of self-closing syntax. Additionally, if self-closing syntax is used on non-void elements, then it will be "unwrapped" so that both the opening and closing tags are present.

Usage

Install this package from NPM.

# npm
npm install -D @awmottaz/prettier-plugin-void-html

# yarn
yarn add -D @awmottaz/prettier-plugin-void-html

Add the plugin to your Prettier config file.

{
  "plugins": ["@awmottaz/prettier-plugin-void-html"]
}

Then your HTML should format like so:

<!-- source -->
<meta charset="UTF-8">
<label for="my-input">Type something</label>
<input id="my-input" type="text" name="my-input">
<div />

<!-- Prettier default formatting -->
<meta charset="UTF-8" />
<label for="my-input">Type something</label>
<input id="my-input" type="text" name="my-input" />
<div />

<!-- Prettier + this plugin -->
<meta charset="UTF-8">
<label for="my-input">Type something</label>
<input id="my-input" type="text" name="my-input">
<div></div>

Compatibility

Prettier

v3.0.0
v3.0.1
v3.0.2
v3.0.3
v3.1.0

Languages

html

Void elements

https://developer.mozilla.org/en-US/docs/Glossary/Void_element