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 using your favorite package manager:

• npm

  npm install -D @awmottaz/prettier-plugin-void-html
• yarn

  yarn add -D @awmottaz/prettier-plugin-void-html
• pnpm

  pnpm 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

• area
• base
• br
• col
• embed
• hr
• img
• input
• link
• meta
• param
• source
• track
• wbr