Github url

js-beautify

by beautify-web

beautify-web /js-beautify

Beautifier for javascript

6.9K Stars 1.2K Forks Last release: 3 months ago (v1.11.0) MIT License 2.5K Commits 97 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

JS Beautifier

Build Status

PyPI versionCDNJS versionNPM @latestNPM @next

Join the chat at https://gitter.im/beautify-web/js-beautifyTwitter Follow

NPM stats Greenkeeper badge

This little beautifier will reformat and re-indent bookmarklets, ugly JavaScript, unpack scripts packed by Dean Edward’s popular packer, as well as partly deobfuscate scripts processed by the npm packagejavascript-obfuscator.

Open beautifier.io to try it out. Options are available via the UI.

Contributors Needed

I'm putting this front and center above because existing owners have very limited time to work on this project currently. This is a popular project and widely used but it desperately needs contributors who have time to commit to fixing both customer facing bugs and underlying problems with the internal design and implementation.

If you are interested, please take a look at the CONTRIBUTING.md then fix an issue marked with the "Good first issue" label and submit a PR. Repeat as often as possible. Thanks!

Installation

You can install the beautifier for node.js or python.

Node.js JavaScript

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

Node.js JavaScript (vNext)

The above install the latest stable release. To install beta or RC versions:

$ npm install [email protected]

Web Library

The beautifier can be added on your page as web library.

JS Beautifier is hosted on two CDN services: cdnjs and rawgit.

To pull the latest version from one of these services include one set of the script tags below in your document: ```html

Older versions are available by changing the version number. Disclaimer: These are free services, so there are [no uptime or support guarantees](https://github.com/rgrove/rawgit/wiki/Frequently-Asked-Questions#i-need-guaranteed-100-uptime-should-i-use-cdnrawgitcom). ## Python To install the Python version of the beautifier: ```bash $ pip install jsbeautifier

Unlike the JavaScript version, the Python version can only reformat JavaScript. It does not work against HTML or CSS files, but you can install css-beautify for CSS (jsbeautifier needs to be installed already)

$ pip install cssbeautifier

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 beautifier.io. Options are available via the UI.

Web Library

The script tags above expose three functions:

js\_beautify

,

css\_beautify

, and

html\_beautify

.

Node.js JavaScript

When installed globally, the beautifier provides an executable

js-beautify

script. The beautified result is sent to

stdout

unless otherwise configured.

$ js-beautify foo.js

To use

js-beautify

as a

node

library (after install locally), import and call the appropriate beautifier method for javascript (js), css, or html. All three method signatures are

beautify(code, options)

.

code

is the string of code to be beautified. options is an object with the settings you would like used to beautify the code.

The configuration option names are the same as the CLI names but with underscores instead of dashes. For example,

--indent-size 2 --space-in-empty-paren

would be

{ indent\_size: 2, space\_in\_empty\_paren: true }

.

var beautify = require('js-beautify').js, fs = require('fs'); fs.readFile('foo.js', 'utf8', function (err, data) { if (err) { throw err; } console.log(beautify(data, { indent\_size: 2, space\_in\_empty\_paren: true })); });

Python

After installing, to beautify using Python:

$ js-beautify file.js

Beautified output goes to

stdout

by default.

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 opts.space\_in\_empty\_paren = True res = jsbeautifier.beautify('some javascript', opts)

The configuration option names are the same as the CLI names but with underscores instead of dashes. The example above would be set on the command-line as

--indent-size 2 --space-in-empty-paren

.

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"] Select beautifier type (NOTE: Does \*not\* filter files, only defines which beautifier type to run) -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 [" "] -t, --indent-with-tabs Indent with tabs, overrides -s and -c -e, --eol Character(s) to use as line terminators. [first newline in file, otherwise "\n] -n, --end-with-newline End output with newline --editorconfig Use EditorConfig to set up the options -l, --indent-level Initial indentation level [0] -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 ) -E, --space-in-empty-paren Add a single space inside empty paren, ie. f( ) -j, --jslint-happy Enable jslint-stricter mode -a, --space-after-anon-function Add a space before an anonymous function's parens, ie. function () --space-after-named-function Add a space before a named function's parens, i.e. function example () -b, --brace-style [collapse|expand|end-expand|none][,preserve-inline] [collapse,preserve-inline] -u, --unindent-chained-methods Don't indent chained method calls -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 that exceed N characters [0] -X, --e4x Pass E4X xml literals through untouched --good-stuff Warm the cockles of Crockford's heart -C, --comma-first Put commas at the beginning of new line instead of end -O, --operator-position Set operator position (before-newline|after-newline|preserve-newline) [before-newline] --indent-empty-lines Keep indentation on empty lines --templating List of templating languages (auto,django,erb,handlebars,php) ["auto"] auto = none in JavaScript, all in html

Which correspond to the underscored option keys for both library interfaces

defaults per CLI options

json { "indent\_size": 4, "indent\_char": " ", "indent\_with\_tabs": false, "editorconfig": false, "eol": "\n", "end\_with\_newline": false, "indent\_level": 0, "preserve\_newlines": true, "max\_preserve\_newlines": 10, "space\_in\_paren": false, "space\_in\_empty\_paren": false, "jslint\_happy": false, "space\_after\_anon\_function": false, "space\_after\_named\_function": false, "brace\_style": "collapse", "unindent\_chained\_methods": false, "break\_chained\_methods": false, "keep\_array\_indentation": false, "unescape\_strings": false, "wrap\_line\_length": 0, "e4x": false, "comma\_first": false, "operator\_position": "before-newline", "indent\_empty\_lines": false, "templating": ["auto"] }

defaults not exposed in the cli

json { "eval\_code": false, "space\_before\_conditional": true }

Notice not all defaults are exposed via the CLI. Historically, the Python and JS APIs have not been 100% identical. There are still a few other additional cases keeping us from 100% API-compatibility.

Loading settings from environment or .jsbeautifyrc (JavaScript-Only)

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.

Setting inheritance and Language-specific overrides

The settings are a shallow tree whose values are inherited for all languages, but can be overridden. This works for settings passed directly to the API in either implementation. In the Javascript implementation, settings loaded from a config file, such as .jsbeautifyrc, can also use inheritance/overriding.

Below is an example configuration tree showing all the supported locations for language override nodes. We'll use

indent\_size

to discuss how this configuration would behave, but any number of settings can be inherited or overridden:

{ "indent\_size": 4, "html": { "end\_with\_newline": true, "js": { "indent\_size": 2 }, "css": { "indent\_size": 2 } }, "css": { "indent\_size": 1 }, "js": { "preserve-newlines": true } }

Using the above example would have the following result:

  • HTML files
    • Inherit
      indent\_size
      of 4 spaces from the top-level setting.
    • The files would also end with a newline.
    • JavaScript and CSS inside HTML
    • Inherit the HTML
      end\_with\_newline
      setting.
    • Override their indentation to 2 spaces.
  • CSS files
    • Override the top-level setting to an
      indent\_size
      of 1 space.
  • JavaScript files
    • Inherit
      indent\_size
      of 4 spaces from the top-level setting.
    • Set
      preserve-newlines
      to
      true
      .

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 -b, --brace-style [collapse|expand] ["collapse"] -L, --selector-separator-newline Add a newline between multiple selectors -N, --newline-between-rules Add a newline between CSS rules --indent-empty-lines Keep indentation on empty lines 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 and 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|force-aligned|force-expand-multiline|aligned-multiple|preserve|preserve-aligned] ["auto"] -i, --wrap-attributes-indent-size Indent wrapped attributes to after N characters [indent-size] (ignored if wrap-attributes is "aligned") -d, --inline List of tags to be considered inline tags -U, --unformatted List of tags (defaults to inline) that should not be reformatted -T, --content\_unformatted List of tags (defaults to pre) whose content should not be reformatted -E, --extra\_liners List of tags (defaults to [head,body,/html] that should have an extra newline before them. --editorconfig Use EditorConfig to set up the options --indent\_scripts Sets indent level inside script tags ("normal", "keep", "separate") --unformatted\_content\_delimiter Keep text content together between this string [""] --indent-empty-lines Keep indentation on empty lines --templating List of templating languages (auto,none,django,erb,handlebars,php) ["auto"] auto = none in JavaScript, all in html

Directives

Directives let you control the behavior of the Beautifier from within your source files. Directives are placed in comments inside the file. Directives are in the format

/\* beautify {name}:{value} \*/

in CSS and JavaScript. In HTML they are formatted as

<!-- beautify {name}:{value} -->

.

Ignore directive

The

ignore

directive makes the beautifier completely ignore part of a file, treating it as literal text that is not parsed. The input below will remain unchanged after beautification:

// Use ignore when the content is not parsable in the current language, JavaScript in this case. var a = 1; /\* beautify ignore:start \*/ {This is some strange{template language{using open-braces? /\* beautify ignore:end \*/

Preserve directive

NOTE: this directive only works in HTML and JavaScript, not CSS.

The

preserve

directive makes the Beautifier parse and then keep the existing formatting of a section of code.

The input below will remain unchanged after beautification:

// Use preserve when the content is valid syntax in the current language, JavaScript in this case. // This will parse the code and preserve the existing formatting. /\* beautify preserve:start \*/ { browserName: 'internet explorer', platform: 'Windows 7', version: '8' } /\* beautify preserve:end \*/

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

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.

(README.md: [email protected])

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.