@wmhilton/beautify
Parses and rewrites your HTML/CSS/JS to be beautiful and readable
How is this different from jsbeautify, eslint, etc?
beautify goes further. It completely parses your files, transforming them into an Abstract Syntax Tree, and then renders that tree back into text. This results in cleaner looking code with fewer quirks and artifacts from the original text.
beautify doesn't reinvent the wheel. Instead, it combines several existing excellent code formatting libraries:
-
posthtml
and acustom renderer
* for HTML-
.htm
,.html
files
-
-
postcss
withperfectionist
for CSS-
.css
files - inline styles in
.html
files
-
-
prettier
for JS-
.js
files - inline scripts in
.html
files
-
-
php-unparser
for PHP (planned feature)
*Notes on custom posthtml renderer (which I'll probably move to its own repo):
- makes all
<tags>
lowercase - re-indents everything consistently
- attributes
- formats
style
- sorts (
id
, thenclass
, etc)
- formats
Installation
npm install @wmhilton/beautify --global
Usage
beautify (the CLI program) let you mass edit hordes of files at once. It accepts glob arguments, and uses file extensions to determine what beautifying engine to use.
Overwrite original file:
beautify input.html
Save beautified version under a new name:
beautify input.html -o output.html
CLI Options
-h, --help Display this help message
-o, --output NAME Output filename or directory
--html EXT [EXT ...] File extensions to treat as HTML [default: .html .htm]
--style EXT [EXT ...] File extensions to treat as CSS [default: .css]
--script EXT [EXT ...] File extensions to treat as JS [default: .js]
--dryrun Do a dry run (don't save changes)
Usage Examples
Beautify all the .html
files, save them in output
:
beautify *.html -o output
Beautify all the files in components
, treating .vue
files as HTML:
beautify components/* --html .vue
Beautify all the .css
and .less
files:
beautify **/*.css **/*.less --style .less .css
Beautify all the files in src, treating .es6
as JavaScript, and save results in lib
:
beautify src/**/* --script .es6 --output lib
JavaScript API
It is pretty simple. You give it text, it returns prettier text. It is async however! The options object passed to each function is the exact same format (see below), because the HTML formatter might use style and script options for inline styles and scripts.
(string, object={}) ⇒ Promise<string>
beautify.html(text, options) :
(string, object={}) ⇒ Promise<string>
beautify.style(text, options) :
(string, object={}) ⇒ Promise<string>
beautify.script(text, options) :Options
beautify (the library) lets you pass in the options for each component so you can customize like crazy:
var defaultOptions = {
posthtml: {
render: prettyrender // a posthtml-render compatible function
},
perfectionist: {
indentSize: 4
},
prettier: {
printWidth: 1000,
tabWidth: 4,
singleQuote: true
},
render: {
indentString: ' ',
closeVoidTags: true
}
}
Code Examples
// The ES6 module, async / await version
import fs from 'mz/fs'
import {html, style, script} from 'beautify'
async function main () {
var text = await fs.readFile('index.html', 'utf8')
let html = await beautify.html(text, options)
fs.writeFile(html, 'index.html', 'utf8')
var text = await fs.readFile('index.css', 'utf8')
let css = await style(text, options)
fs.writeFile(css, 'index.css', 'utf8')
var text = await fs.readFile('index.js', 'utf8')
let js = await script(text, options)
fs.writeFile(js, 'index.js', 'utf8')
}
main()
// The Promise version
var fs = require('fs')
var beautify = require('beautify')
var text = fs.readFileSync('index.html', 'utf8')
beautify.html(text, options).then(html => {
fs.writeFileSync(html, 'index.html', 'utf8')
})
var text = fs.readFileSync('index.css', 'utf8')
beautify.style(text, options).then(css => {
fs.writeFileSync(css, 'index.css', 'utf8')
})
var text = fs.readFileSync('index.js', 'utf8')
beautify.script(text, options).then(js => {
fs.writeFileSync(js, 'index.js', 'utf8')
})
License
Copyright 2017 William Hilton. Licensed under The Unlicense.