Repository files navigation

Opinionated general formatter for your Angular, Vue, Svelte or pure HTML5 templates. Try it on theplayground.

Project status: Unfortunately, This project lacks maintainers. Prettier has landed HTML support in 1.15.0. I recommend it to use it if it matches your requirements. If you want to contribute to this project, feel free to create a PR/Issue.

• Indentation based primary on node-level + tag length, not content.
• Can parse Angular, Vue or HTML5 templates.
• Formats embedded content withprettier with respect to your local settings.
• Doesn't change the behaviour of your attributes and tags.
• Remove all superfluous white-space. There are two additional rules:
  • Collapses multiple blank lines into a single blank line.
  • Empty lines at the start and end of blocks are removed. (Files always end with a single newline, though.)
• Enforce consistent output of your HTML.
• Follows the same optionphilosophy as prettier.

• prettyhtml CLI and API.
• prettyhtml-formatter Formatter.
• prettyhtml-hast-to-html Stringifier.
• prettyhtml-hastscript Hyperscript compatible DSL for creating virtual HAST trees.
• prettyhtml-sort-attributes Sort attributes alphabetically.
• prettyhtml-quick Formats your changed files based on Git.
• webparser Optimized HTML parser for formatters
• expression-parser Framework agnostic template expression parser.
• rehype-webparser Adapter between HTML parser and rehype.
• rehype-minify-whitespace Collapse whitespace.
• hast-util-from-parse Transformwebparser AST to HAST.

Adding this flag before a tag will preserve from whitespace and/or attribute wrapping.

1. Preserve from indentation, whitespace and attribute wrapping

<!--prettyhtml-ignore--><div></div>

2. Preserve only from whitespace processing. This excludes indentation.

<!--prettyhtml-preserve-whitespace--><h1> foo</h1>

3. Preserve only from attribute wrapping

<!--prettyhtml-preserve-attribute-wrapping--><h1foo="bar"...> foo</h1>

# regular$ npm install @starptech/prettyhtml --global# when using proxy like sinopia/verdaccio$ npm install @starptech/prettyhtml --global --registry=https://registry.npmjs.org/

This will process recursively all HTML files in the current directory.

$ prettyhtml example.html "./**/*.html"

$ prettyhtml --help

We provide a simple package calledprettyhtml-quick which is able to format only changed files. This example usehusky to manage git hooks in the package.json

{"husky": {"hooks": {"precommit":"prettyhtml-quick --staged"    }  }}

Formats a string and returns avFile. The method can throw e.g when a parsing error was produced. The error is from typevfile-message.

The space width of your indentation level (default: 2)

Use tabs instead spaces for indentation (default: false)

Use different maximum line length (default: 80)

Use prettier for embedded content (default: true)

Use custom prettier settings for embedded content (default: local config)

Use single quote instead double quotes (default: false)

Force to wrap attributes (when it has multiple, default: false)

Sort attributes alphabetically (default: false)

• VSCode extension (not published yet)
• Vetur Vue tooling for VS Code

Prettier haslanded HTML support some days ago. This is awesome and will help many people to reduce the headache of correct formatting in teams. The reason why I still using prettyhtml is clear:

• It is very easy to maintain because we have aspecification and anecosystem (and @vfile, @syntax-tree) of plugins.
• It should be able to format any superset of HTML as long it is parseable with minor tweaks. We use a modified version of the Angular 6 template parser. There is no need to maintain multiple parser.
• Prettyhtml doesn't try to understand all Javascript frameworks in depth even when it means that the user has to update some places manually.

Big thanks to the creators of the excellentrehype andunified ecosystem.