posthtml-beautify

> A posthtml plugin to beautify you html files

![node]()


Why?

Format your html and inline css markup according to the HTML5 syntax Style Guide, Code Guide. Full list of supported options:
- [x] Transform lower case element names
- [x] Transform lower case attribute names
- [x] Only double quotes
- [x] Close all html elements
- [x] Removing trailing slash in self-closing
- [x] Removes spaces at the equal sign
- [x] Add blank lines to separate large or logical code blocks
- [x] Add 2 spaces of indentation. Do not use TAB.
- [x] Add language attribute
- [ ] Add character encoding
- [x] Attribute order
- [x] Boolean attributes
- [ ] Creates file from the inline styles
- [ ] Create scoped class name (use css-modules) instead inline styles
- [ ] validate elements and attributes name
- [x] parses Internet Explorer Conditional Comments (not support Downlevel-revealed and valid version, htmlparse2 invalid parses)

Install

``bash
npm i -S posthtml posthtml-beautify
`

> Note: This project is compatible with node v10+

Usage

`js
import {readFileSync, writeFileSync} from 'fs';
import posthtml from 'posthtml';
import beautify from 'posthtml-beautify';

const html = readFileSync('input.html', 'utf8');

posthtml()
.use(beautify({rules: {indent: 4}}))
.process(html)
.then(result => {
writeFileSync('output.html', result.html);
});

`
Returns html-formatted according to rules based on the use HTML5 syntax Style Guide, Code Guide with custom settings indent: 4

Example

Options

$3


Type: Object
Default:

- Indent
Type: Number|String(only tab)
Default: 2
Description: A numeric value indicates specifies the number of spaces. The string value only tab

- blankLines
Type: String|Boolean(only false)
Default: '\n'
Description: Add or remove blank lines to separate large or logical code blocks

- eol (end of line)
Type: String
Default: '\n'
Description: As value is a string symbol which is added to the end of the row

- eof (end of file)
Type: String|Boolean
Default: '\n'
Description: As value is a string symbol which is added to the end of the file and will not adds if you specify a boolean value of false

- maxlen
Type: Number
Default: '80'
Description: checks for the max length of the content, indents the whole content to a new line

- sortAttr
Type: Boolean
Default: false
Description: Sort the order of attributes in elements

- lang
Type: String | Boolean(only false)
Default: false
Description: Add a lang attribute in elements, eg: { lang: 'fr' }

- commentFormat
Type: Boolean
Default: true
Description: Formats the comments. It does the following
- If there are multi line comments then there would be
leading and trailing newline like this

`html
// Input

// Output


`
- If there is a single line comment, it would make it to a single line with the comment starting and ending
notation in same line

Input
`

`

Output




$3


Type: Object
Default:

- removeAttribute
Type: String|Boolean
Default: false
Description: Removes attributes that do not matter. The string value only empty

$3


Type: Object
Default: All options as per package js-beautify except, indent_level` because calculated and set according to context

Related

- js-beautify - Beautifier for javascript