Skip to content

Latest commit

 

History

History
85 lines (67 loc) · 1.86 KB

README.md

File metadata and controls

85 lines (67 loc) · 1.86 KB

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