Global Format - HTML

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

Features

• Indentation based primary on node-level + tag length, not content.
• Can parse Angular, Vue or HTML5 templates.
• Formats embedded content with prettier 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 option philosophy as prettier.

Framework specific features

Feature	Framework
HTML5	all
Self-closing custom elements	vue
Self-closing none void elements	vue
Case-sensitive attributes	angular
Case-sensitive elements	angular

Packages

• gformat-html CLI and API.
• gformat-html-formatter Formatter.
• gformat-html-hast-to-html Stringifier.
• prettyhtml-hastscript Hyperscript compatible DSL for creating virtual HAST trees.
• prettyhtml-sort-attributes Sort attributes alphabetically.
• gformat-html-git-patch 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 Transform webparser AST to HAST.

Ignore element

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

1. Preserve from indentation, whitespace and attribute wrapping

<!--gformat-ignore-->
<div></div>

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

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

3. Preserve only from attribute wrapping

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

Install

# regular
$ npm install gformat-html --global

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

CLI

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

$ gformat-html example.html "./**/*.html"

Help

$ gformat-html --help

Pre-Commit hook integration

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

{
  "husky": {
    "hooks": {
      "precommit": "gformat-html-git-patch --staged"
    }
  }
}

API

gformathtml(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

• VSCode extension
• Vetur Vue tooling for VS Code

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 created this formatter is to allow everyone to define their styles rules without imposing any style rules.

• It is very easy to maintain because we have a specification and an ecosystem (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.
• gformat-html doesn't try to understand all Javascript frameworks in depth even when it means that the user has to update some places manually.

Acknowledgement

This is a fork from the awesome prettyhtml library created by @starptech.

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