Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prettyhtml/prettyhtml
💅 The formatter for the modern web https://prettyhtml.netlify.com/
https://github.com/prettyhtml/prettyhtml
angular formatter html html-parser prettier rehype svelte vue web-components
Last synced: 24 days ago
JSON representation
💅 The formatter for the modern web https://prettyhtml.netlify.com/
- Host: GitHub
- URL: https://github.com/prettyhtml/prettyhtml
- Owner: Prettyhtml
- License: mit
- Created: 2018-06-17T18:22:46.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T19:16:15.000Z (almost 2 years ago)
- Last Synced: 2024-10-13T06:41:25.129Z (24 days ago)
- Topics: angular, formatter, html, html-parser, prettier, rehype, svelte, vue, web-components
- Language: JavaScript
- Homepage:
- Size: 4.12 MB
- Stars: 282
- Watchers: 3
- Forks: 21
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://dev.azure.com/prettyhtml/Prettyhtml/_build/latest?definitionId=1)
[](https://lernajs.io/)
[](https://badge.fury.io/js/%40starptech%2Fprettyhtml)
Opinionated general formatter for your Angular, Vue, Svelte or pure HTML5 templates. Try it on the [playground](https://prettyhtml.netlify.com/).
> **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
- Indentation based primary on node-level + tag length, not content.
- Can parse Angular, Vue or HTML5 templates.
- Formats embedded content with [prettier](https://github.com/prettier/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](https://prettier.io/docs/en/option-philosophy.html) 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
- [prettyhtml](/packages/prettyhtml) CLI and API.
- [prettyhtml-formatter](/packages/prettyhtml-formatter) Formatter.
- [prettyhtml-hast-to-html](/packages/prettyhtml-hast-to-html) Stringifier.
- [prettyhtml-hastscript](/packages/prettyhtml-hastscript) Hyperscript compatible DSL for creating virtual HAST trees.
- [prettyhtml-sort-attributes](/packages/prettyhtml-sort-attributes) Sort attributes alphabetically.
- [prettyhtml-quick](/packages/prettyhtml-quick) Formats your changed files based on Git.
- [webparser](/packages/webparser) Optimized HTML parser for formatters
- [expression-parser](/packages/expression-parser) Framework agnostic template expression parser.
- [rehype-webparser](/packages/rehype-webparser) Adapter between HTML parser and rehype.
- [rehype-minify-whitespace](/packages/rehype-minify-whitespace) Collapse whitespace.
- [hast-util-from-parse](/packages/hast-util-from-webparser) Transform [webparser](/packages/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
```html
```
2. Preserve only from whitespace processing. This excludes indentation.
```html
foo
```
3. Preserve only from attribute wrapping
```html
foo
```
## Install
```bash
# 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](/packages/prettyhtml-quick) which is able to format only changed files. This example use [husky](https://github.com/typicode/husky) to manage git hooks in the package.json
```json
{
"husky": {
"hooks": {
"precommit": "prettyhtml-quick --staged"
}
}
}
```
## API
## `prettyhtml(doc: string, options?): vFile`
Formats a string and returns a [`vFile`](https://github.com/vfile/vfile). The method can throw e.g when a parsing error was produced. The error is from type [`vfile-message`](https://github.com/vfile/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](https://github.com/StarpTech/prettyhtml-vscode) extension (not published yet)
- [Vetur](https://vuejs.github.io/vetur/formatting.html#formatters) Vue tooling for VS Code
## Why
Prettier has [landed](https://github.com/prettier/prettier/releases/tag/1.15.0) 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 a [specification](https://github.com/syntax-tree/hast) and an [ecosystem](https://github.com/rehypejs/rehype) (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.
## Acknowledgement
Big thanks to the creators of the excellent [rehype](https://github.com/rehypejs/rehype) and [unified](https://github.com/unifiedjs/unified) ecosystem.