Formats HTML within tagged template literals in Prettier which is useful for hyperHTML, lit-html, choo, hyperx, nanohtml, snabby, yo-yo, and others.
npm install prettier-plugin-html-template-literals
Formats HTML within tagged template literals in Prettier which is useful for hyperHTML, lit-html, choo, hyperx, nanohtml, snabby, yo-yo, and others. For example:
Input:
``javascript
html
;
`Output:
javascript
html;
`Why
Declaring HTML templates using tagged template literals is a nice alternative to JSX. It relies only on standard ES6+ and doesn't require a transpiling/preprocessing toolset, at least during development. hyperHTML and lit-html are nice lightweight libraries built on this idea and, more than that, provide the React-like experience without the bloat of Virtual DOM. There are also Virtual DOM-based libraries that consume HTML from tagged template literals: choo, hyperx, nanohtml, snabby, yo-yo, and others.
Warning
As HTML tagged template literals get more attention, no doubts Prettier will support them. You can track an open issue for this request. The problem is that the HTML parser within Prettier is not stable yet, and they haven't decided which tags should identify HTML templates. Also, at the moment, there is no API in Prettier to provide additional embedded languages from plugins. There is a feature request for this. This plugin provides a temporary 'hacky' solution until it will be implemented within Prettier. It uses Prettier's JSX parser and formats any tagged template literal (but not regular template literal) if it contains
or <.../>. It uses some dirty tricks under the hood, so be warned and report issues/PR.Usage
Install
prettier and prettier-plugin-html-template-literals using yarn:`shell
yarn add prettier prettier-plugin-html-template-literals
`Or using
:`shell
npm install prettier prettier-plugin-html-template-literals
`$3
replaces the prettier executable with its wrapped version. The original prettier executable will be restored if you delete this plugin. Use it as the regular prettier executable:`shell
echo 'html' | ./node_modules/.bin/prettier --stdin-filepath=test.js
`$3
Unfortunately, this plugin is actually ignored by the API exposed with the
module at the moment. Instead of require('prettier').format() you need to use the wrapper module with the same API:`javascript
require('prettier-plugin-html-template-literals/prettier').format(
'html',
{ parser: 'babylon' },
);
`Limitations
Because of this plugin relies on the JSX parser it has some limitations. Some of them may be addressed in future if it will be possible to find a workaround.
- Attribute values without quotes are not supported. Raises an exception:
- Contents of
- It's impossible to reliably eliminate whitespace between adjacent elements: May be wrapped on not to multiple lines:
- All empty elements are converted to self-closing (void) ones:
- Whitespace is not preserved within elements sensitive to it like or textarea. Contents will be collapsed to a single space: \n`