js-beautify

What is js-beautify?

The js-beautify npm package is a utility to format and beautify JavaScript, CSS, and HTML code. It can be used to make code more readable and consistent by automatically formatting it according to specified options.

What are js-beautify's main functionalities?

Beautify JavaScript

This feature formats JavaScript code to make it more readable. The 'indent_size' option specifies the number of spaces to use for indentation.

const beautify = require('js-beautify').js;

const uglyJs = 'function foo(){return 42;}';
const beautifulJs = beautify(uglyJs, { indent_size: 2 });

console.log(beautifulJs);

Beautify CSS

This feature formats CSS code to improve its readability. The 'indent_size' option is used here as well to set the indentation level.

const beautify = require('js-beautify').css;

const uglyCss = 'body{background-color:#000;}';
const beautifulCss = beautify(uglyCss, { indent_size: 2 });

console.log(beautifulCss);

Beautify HTML

This feature formats HTML code, enhancing its structure and readability. The 'indent_size' option controls the indentation.

const beautify = require('js-beautify').html;

const uglyHtml = '<div><p>hello world</p></div>';
const beautifulHtml = beautify(uglyHtml, { indent_size: 2 });

console.log(beautifulHtml);

Other packages similar to js-beautify

prettier

Prettier is an opinionated code formatter that supports many languages and integrates with most editors. It differs from js-beautify by enforcing a consistent style by parsing the code and re-printing it with its own rules, which take the maximum line length into account, wrapping code when necessary.

pretty

Pretty is a package that formats HTML using js-beautify under the hood. It is more focused on HTML and lacks the direct support for JavaScript and CSS that js-beautify provides.

html-beautify-webpack-plugin

This webpack plugin uses js-beautify to format HTML files generated by webpack. It is specifically tailored for webpack users and integrates into the webpack build process, unlike js-beautify which can be used more generally.

README

JS Beautifier

...or, more specifically, all of the code powering jsbeautifier.org.

This little beautifier will reformat and reindent bookmarklets, ugly JavaScript, unpack scripts packed by Dean Edward’s popular packer, as well as deobfuscate scripts processed by javascriptobfuscator.com.

Usage

To beautify from the command-line you can use the provided Python script/library or npm package.

Python

./js-beautify file.js beautifies a file, output goes to stdout.

To use jsbeautifier as a library is simple:

import jsbeautifier
res = jsbeautifier.beautify('your javascript string')
res = jsbeautifier.beautify_file('some_file.js')

...or, to specify some options:

opts = jsbeautifier.default_options()
opts.indent_size = 2
res = jsbeautifier.beautify('some javascript', opts)

JavaScript

As an alternative to the Python script, you may install the NPM package js-beautify. When installed globally, it provides an executable js-beautify script. As with the Python script, the beautified result is sent to stdout unless otherwise configured.

$ npm -g install js-beautify
$ js-beautify foo.js

You can also use js-beautify as a node library (install locally, the npm default):

$ npm install js-beautify

var beautify = require('js-beautify').js_beautify,
    fs = require('fs');

fs.readFile('foo.js', 'utf8', function (err, data) {
    if (err) {
        throw err;
    }
    console.log(beautify(data, { indent_size: 2 }));
});

Options

These are the command-line flags for both Python and JS scripts:

CLI Options:
  -f, --file                    Input file(s) (Pass '-' for stdin). These can also be passed directly.
  -r, --replace                 Write output in-place, replacing input
  -o, --outfile                 Write output to file (default stdout)

Beautifier Options:
  -s, --indent-size             Indentation size [default: 4]
  -c, --indent-char             Indentation character [default: " "]
  -l, --indent-level            Initial indentation level [default: 0]
  -t, --indent-with-tabs        Indent with tabs, overrides -s and -c
  -p, --preserve-newlines       Preserve existing line-breaks (--no-preserve-newlines disables) [default: true]
  -m, --max-preserve-newlines   Maximum number of line-breaks to be preserved in one chunk [default: 10]
  -j, --jslint-happy            Enable jslint-stricter mode
  -b, --brace-style             Brace style [collapse|expand|end-expand|expand-strict] [default: "collapse"]
  -B, --break-chained-methods   Break chained method calls across subsequent lines
  -k, --keep-array-indentation  Preserve array indentation
  -x, --unescape-strings        Decode printable characters encoded in xNN notation

These correspond to underscored option keys for both library interfaces:

defaults = {
    "indent_size": 4,
    "indent_char": " ",
    "indent_level": 0,
    "indent_with_tabs": false,
    "preserve_newlines": true,
    "max_preserve_newlines": 10,
    "jslint_happy": false,
    "brace_style": "collapse",
    "keep_array_indentation": false,
    "keep_function_indentation": false,
    "space_before_conditional": true,
    "break_chained_methods": false,
    "eval_code": false,
    "unescape_strings": false
}

You might notice that the CLI options and defaults hash aren't 100% correlated. Historically, the Python and JS APIs have not been 100% identical. For example, space_before_conditional is currently JS-only, and not addressable from the CLI script. There are a few other additional cases keeping us from 100% API-compatibility. Patches welcome!

License

You are free to use this in any way you want, in case you find this useful or working for you. (MIT)

Credits

Written by Einar Lielmanis, [e-mail] Python version flourished by Stefano Sanfilippo [e-mail]

Thanks to Jason Diamond, Patrick Hof, Nochum Sossonko, Andreas Schneider, Dave Vasilevsky, Vital Batmanov, Ron Baldwin, Gabriel Harrison, Chris J. Shull, Mathias Bynens, Vittorio Gambaletta and others.