Awesome

posthtml-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:

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

Install

npm i -S posthtml posthtml-beautify

Note: 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 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

    // 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 only empty

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