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.
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
<.../>. It uses some dirty tricks under the hood, so be warned and report issues/PR.
yarn add prettier prettier-plugin-html-template-literals
npm install prettier prettier-plugin-html-template-literals
Usage from CLI
prettier-plugin-html-template-literals 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
echo 'html`<div><span>foo</span></div>`' | ./node_modules/.bin/prettier --stdin-filepath=test.js
Usage from API
Unfortunately, this plugin is actually ignored by the API exposed with the
prettier module at the moment. Instead of
require('prettier').format() you need to use the wrapper module with the same API:
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
<style>elements is ignored and not prettified. Style is not formatted:
- 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
textarea. Contents will be collapsed to a single space: