posthtmlposthtml-beautify
A posthtml plugin to beautify you html files
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
npm i -S posthtml posthtml-beautifyNote: This project is compatible with node v10+
Usage
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
rules
Type: Object
Default:
Indent
Type:Number|String(only tab)
Default: 2
Description: A numeric value indicates specifies the number of spaces. The string value onlytabblankLines
Type:String|Boolean(only false)
Default: '\n'
Description: Add or remove blank lines to separate large or logical code blockseol (end of line)
Type:String
Default: '\n'
Description: As value is a string symbol which is added to the end of the roweof (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 offalsemaxlen
Type:Number
Default: '80'
Description: checks for the max length of the content, indents the whole content to a new linesortAttr
Type:Boolean
Default: false
Description: Sort the order of attributes in elementslang
Type:String | Boolean(only false)
Default: false
Description: Add alangattribute in elements, eg:{ lang: 'fr' }commentFormat
Type:Boolean
Default: true
Description: Formats the comments. It does the followingIf there are multi line comments then there would be leading and trailing newline like this
// Input <!-- multiline comments--> // Output <!-- multiline comments -->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
<!-- singleline comments -->Output
<!-- singleline comments -->
mini
Type: Object
Default:
- removeAttribute
Type:String|Boolean
Default: false
Description: Removes attributes that do not matter. The string value onlyempty
jsBeautifyOptions
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