Home

Awesome

Prettyhtml Banner

Build Status lerna npm version

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

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.

Features

Framework specific features

FeatureFramework
HTML5all
Self-closing custom elementsvue
Self-closing none void elementsvue
Case-sensitive attributesangular
Case-sensitive elementsangular

Packages

Ignore element

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>
  1. Preserve only from whitespace processing. This excludes indentation.
<!--prettyhtml-preserve-whitespace-->
<h1> foo </h1>
  1. Preserve only from attribute wrapping
<!--prettyhtml-preserve-attribute-wrapping-->
<h1 foo="bar" ...> foo </h1>

Install

# regular
$ npm install @starptech/prettyhtml --global

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

CLI

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

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

Help

$ prettyhtml --help

Pre-Commit hook integration

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

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

API

prettyhtml(doc: string, options?): vFile

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

options
options.tabWidth

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

options.useTabs

Use tabs instead spaces for indentation (default: false)

options.printWidth

Use different maximum line length (default: 80)

options.usePrettier

Use prettier for embedded content (default: true)

options.prettier

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

options.singleQuote

Use single quote instead double quotes (default: false)

options.wrapAttributes

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

options.sortAttributes

Sort attributes alphabetically (default: false)

Editor support

Why

Prettier has landed 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:

Acknowledgement

Big thanks to the creators of the excellent rehype and unified ecosystem.