README
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.
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 |
Usage
const parent = require('@sidouglas/prettyhtml');
const formatter = Object.create(parent);
formatter.cleanRoutine = async function () {
this.prettyHtml()
// put your clean routines in here...
.formatTextNodes()
.orderClassNames()
.selfCloseTags()
.indentPrettyContents()
.rightTrim()
.voidAttributes()
.save();
};
formatter.init({
baseDirectory: ['./src/scripts/vue/components/**/*.js', './src/scripts/vue/apps/**/*.js'],
dialog: {
message: 'What components/apps to tidy?',
name: 'list',
type: 'checkbox',
},
framework: {
utilClasses: ['a-', 'l-', 'o-', 't', 'u-'],
colOffset() {
return this.config.isComponent(this.filePath) ? 4 : 2;
},
},
isComponent(filePath) {
return filePath.indexOf('components') > 0;
},
prettyHtml: {
printWidth: 200,
sortAttributes: true,
wrapAttributes: true,
},
regex: {
find(contents) {
return contents.match(/(?:template.+`)([^`]*)(?:`)/)[1];
},
replace(content) {
const offset = this.config.isComponent(this.filePath) ? ' ' : '';
return `\n${content}${offset}`;
},
},
...(process.argv.slice(2)[0] ? singleFileInit : {}),
});
Packages
- 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 Transform webparser AST to HAST.