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

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

You can beautify javascript using JS Beautifier in your web browser, or on the command-line using node.js or python.

Web Browser

Open jsbeautifier.org. Options are available via the UI.

Python

To beautify using python:

$ pip install jsbeautifier
$ js-beautify file.js

Beautified 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)
  -r, --replace    Write output in-place, replacing input
  -o, --outfile    Write output to file (default stdout)
  --config         Path to config file
  --type           [js|css|html] ["js"]
  -q, --quiet      Suppress logging to stdout
  -h, --help       Show this help
  -v, --version    Show the version

Beautifier Options:
  -s, --indent-size                 Indentation size [4]
  -c, --indent-char                 Indentation character [" "]
  -e, --eol                         character(s) to use as line terminators. (default newline - "\\n")');
  -l, --indent-level                Initial indentation level [0]
  -t, --indent-with-tabs            Indent with tabs, overrides -s and -c
  -p, --preserve-newlines           Preserve line-breaks (--no-preserve-newlines disables)
  -m, --max-preserve-newlines       Number of line-breaks to be preserved in one chunk [10]
  -P, --space-in-paren              Add padding spaces within paren, ie. f( a, b )
  -j, --jslint-happy                Enable jslint-stricter mode
  -a, --space-after-anon-function   Add a space before an anonymous function's parens, ie. function ()
  -b, --brace-style                 [collapse-preserve-inline|collapse|expand|end-expand|none] ["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
  -w, --wrap-line-length            Wrap lines at next opportunity after N characters [0]
  -X, --e4x                         Pass E4X xml literals through untouched
  -n, --end-with-newline            End output with newline
  -C, --comma-first                 Put commas at the beginning of new line instead of end
  --good-stuff                      Warm the cockles of Crockford's heart

These largely correspond to the underscored option keys for both library interfaces, which have these defaults:

{
    "indent_size": 4,
    "indent_char": " ",
    "eol": "\n",
    "indent_level": 0,
    "indent_with_tabs": false,
    "preserve_newlines": true,
    "max_preserve_newlines": 10,
    "jslint_happy": false,
    "space_after_anon_function": 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,
    "wrap_line_length": 0,
    "wrap_attributes": "auto",
    "wrap_attributes_indent_size": 4,
    "end_with_newline": false
}

In addition to CLI arguments, you may pass config to the JS executable via:

• any jsbeautify_-prefixed environment variables
• a JSON-formatted file indicated by the --config parameter
• a .jsbeautifyrc file containing JSON data at any level of the filesystem above $PWD

Configuration sources provided earlier in this stack will override later ones.

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!

Directives to Ignore or Preserve sections (Javascript only)

Beautifier for supports directives in comments inside the file. This allows you to tell the beautifier to preserve the formtatting of or completely ignore part of a file.
The example input below will remain changed after beautification

// Use preserve when the content is not javascript, but you don't want it reformatted.
/* beautify preserve:start */
{
    browserName: 'internet explorer',
    platform:    'Windows 7',
    version:     '8'
}
/* beautify preserve:end */

// Use ignore when the content is not parsable as javascript.  
var a =  1;
/* beautify ignore:start */
 {This is some strange{template language{using open-braces?
/* beautify ignore:end */

CSS & HTML

In addition to the js-beautify executable, css-beautify and html-beautify are also provided as an easy interface into those scripts. Alternatively, js-beautify --css or js-beautify --html will accomplish the same thing, respectively.

// Programmatic access
var beautify_js = require('js-beautify'); // also available under "js" export
var beautify_css = require('js-beautify').css;
var beautify_html = require('js-beautify').html;

// All methods accept two arguments, the string to be beautified, and an options object.

The CSS & HTML beautifiers are much simpler in scope, and possess far fewer options.

CSS Beautifier Options:
  -s, --indent-size                  Indentation size [4]
  -c, --indent-char                  Indentation character [" "]
  -t, --indent-with-tabs             Indent with tabs, overrides -s and -c
  -e, --eol                          Character(s) to use as line terminators. (default newline - "\\n")
  -n, --end-with-newline             End output with newline
  -L, --selector-separator-newline   Add a newline between multiple selectors
  -N, --newline-between-rules        Add a newline between CSS rules

HTML Beautifier Options:
  -s, --indent-size                  Indentation size [4]
  -c, --indent-char                  Indentation character [" "]
  -t, --indent-with-tabs             Indent with tabs, overrides -s and -c
  -e, --eol                          Character(s) to use as line terminators. (default newline - "\\n")
  -n, --end-with-newline             End output with newline
  -p, --preserve-newlines            Preserve existing line-breaks (--no-preserve-newlines disables)
  -m, --max-preserve-newlines        Maximum number of line-breaks to be preserved in one chunk [10]
  -I, --indent-inner-html            Indent <head> and <body> sections. Default is false.
  -b, --brace-style                  [collapse-preserve-inline|collapse|expand|end-expand|none] ["collapse"]
  -S, --indent-scripts               [keep|separate|normal] ["normal"]
  -w, --wrap-line-length             Maximum characters per line (0 disables) [250]
  -A, --wrap-attributes              Wrap attributes to new lines [auto|force] ["auto"]
  -i, --wrap-attributes-indent-size  Indent wrapped attributes to after N characters [indent-size]
  -U, --unformatted                  List of tags (defaults to inline) that should not be reformatted
  -E, --extra_liners                 List of tags (defaults to [head,body,/html] that should have an extra newline before them.

License

You are free to use this in any way you want, in case you find this useful or working for you but you must keep the copyright notice and license. (MIT)

Credits

• Created by Einar Lielmanis, [e-mail]
• Python version flourished by Stefano Sanfilippo [e-mail]
• General maintenance and expansion by Liam Newman [e-mail]
• Command-line for node.js by Daniel Stockman [e-mail]

Thanks also 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.

js-beautify@1.6.0-0