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 they will be "unwrapped" so that both the opening and closing tags are present.

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>

This package is tested against the following versions of Prettier (see test.js for details):

• v3.0.0
• v3.0.1
• v3.0.2
• v3.0.3
• v3.1.0
• v3.1.1
• v3.2.0
• v3.2.1
• v3.2.2

Note that the peerDependencies of this package allow installing newer patch versions of Prettier that may not be included in this list. This is for pragmatic reasons so that you can upgrade patched releases of Prettier without waiting for this package to update.

However, please note this disclaimer from the Prettier installation page:

Install an exact version of Prettier locally in your project. This makes sure that everyone in the project gets the exact same version of Prettier. Even a patch release of Prettier can result in slightly different formatting, so you wouldn’t want different team members using different versions and formatting each other’s changes back and forth.

If you wish to use a version of Prettier that is not supported by this package, then you will need to add an overrides rule. For example, to use an older version of Prettier:

{
  "overrides": {
    "@awmottaz/prettier-plugin-void-html": {
      "prettier": ">=2.8.8"
    }
  }
}

If you do this, please consider contributing to prettier-plugin-void-html by adding tests for that version or opening an issue. I am happy to expand support, but I also need to be pragmatic of my time.

• html

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

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