2011-06-06 18:33:45 +00:00
# JS Beautifier
2017-09-18 20:06:06 +00:00
[![Build Status ](https://api.travis-ci.org/beautify-web/js-beautify.svg?branch=master )](http://travis-ci.org/beautify-web/js-beautify)
2016-01-22 19:51:06 +00:00
[![Build status ](https://ci.appveyor.com/api/projects/status/5bxmpvew5n3e58te/branch/master?svg=true )](https://ci.appveyor.com/project/beautify-web/js-beautify/branch/master)
2017-09-18 20:06:06 +00:00
[![PyPI version ](https://img.shields.io/pypi/v/jsbeautifier.svg )](https://pypi.python.org/pypi/jsbeautifier)
2016-12-18 17:06:55 +00:00
[![CDNJS version ](https://img.shields.io/cdnjs/v/js-beautify.svg )](https://cdnjs.com/libraries/js-beautify)
2015-01-30 02:50:17 +00:00
[![NPM version ](https://img.shields.io/npm/v/js-beautify.svg )](https://www.npmjs.com/package/js-beautify)
[![Download stats ](https://img.shields.io/npm/dm/js-beautify.svg )](https://www.npmjs.com/package/js-beautify)
2017-09-18 20:06:06 +00:00
2015-06-18 18:52:46 +00:00
[![Join the chat at https://gitter.im/beautify-web/js-beautify ](https://badges.gitter.im/Join%20Chat.svg )](https://gitter.im/beautify-web/js-beautify?utm_source=badge& utm_medium=badge& utm_campaign=pr-badge& utm_content=badge)
2017-10-18 16:20:15 +00:00
[![Twitter Follow ](https://img.shields.io/twitter/follow/js_beautifier.svg?style=social&label=Follow )](https://twitter.com/intent/user?screen_name=js_beautifier)
2015-01-30 02:50:17 +00:00
2015-04-08 19:07:17 +00:00
[![NPM stats ](https://nodei.co/npm/js-beautify.svg?downloadRank=true&downloads=true )](https://www.npmjs.org/package/js-beautify)
2011-06-06 18:33:45 +00:00
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 ](http://javascriptobfuscator.com/ ).
2013-04-08 04:36:59 +00:00
# Usage
2013-04-19 07:28:10 +00:00
You can beautify javascript using JS Beautifier in your web browser, or on the command-line using node.js or python.
2013-04-08 04:36:59 +00:00
2016-12-17 17:00:24 +00:00
JS Beautifier is hosted on two CDN services: [cdnjs ](https://cdnjs.com/libraries/js-beautify ) and rawgit.
To pull from one of these services include one set of the script tags below in your document:
2016-07-13 21:02:12 +00:00
```html
2017-10-09 00:19:25 +00:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.4/beautify.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.4/beautify-css.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.4/beautify-html.js" > < / script >
2016-12-17 17:00:24 +00:00
2017-10-09 00:19:25 +00:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.4/beautify.min.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.4/beautify-css.min.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.4/beautify-html.min.js" > < / script >
2016-12-17 17:00:24 +00:00
2017-10-09 00:19:25 +00:00
< script src = "https://cdn.rawgit.com/beautify-web/js-beautify/v1.7.4/js/lib/beautify.js" > < / script >
< script src = "https://cdn.rawgit.com/beautify-web/js-beautify/v1.7.4/js/lib/beautify-css.js" > < / script >
< script src = "https://cdn.rawgit.com/beautify-web/js-beautify/v1.7.4/js/lib/beautify-html.js" > < / script >
2016-07-13 21:02:12 +00:00
```
2016-12-17 17:00:24 +00:00
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 ).
2016-07-13 21:02:12 +00:00
2013-04-19 07:28:10 +00:00
## Web Browser
Open [jsbeautifier.org ](http://jsbeautifier.org/ ). Options are available via the UI.
2012-07-16 18:05:11 +00:00
2013-04-08 04:36:59 +00:00
## Python
To beautify using python:
2012-07-16 18:05:11 +00:00
2013-04-08 04:36:59 +00:00
```bash
$ pip install jsbeautifier
2013-04-19 07:28:10 +00:00
$ js-beautify file.js
2013-04-08 04:36:59 +00:00
```
2011-06-06 18:33:45 +00:00
2013-04-08 04:36:59 +00:00
Beautified output goes to `stdout` .
2011-09-05 12:48:27 +00:00
To use `jsbeautifier` as a library is simple:
2011-06-06 18:33:45 +00:00
``` python
import jsbeautifier
res = jsbeautifier.beautify('your javascript string')
res = jsbeautifier.beautify_file('some_file.js')
```
...or, to specify some options:
``` python
opts = jsbeautifier.default_options()
opts.indent_size = 2
res = jsbeautifier.beautify('some javascript', opts)
```
2013-04-08 04:36:59 +00:00
## JavaScript
2012-07-16 18:05:11 +00:00
2012-07-16 21:18:35 +00:00
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.
2012-07-16 18:05:11 +00:00
2012-07-16 21:37:24 +00:00
```bash
$ npm -g install js-beautify
$ js-beautify foo.js
2012-07-16 18:05:11 +00:00
```
2012-07-16 21:37:24 +00:00
You can also use `js-beautify` as a `node` library (install locally, the `npm` default):
```bash
$ npm install js-beautify
```
2012-07-16 18:05:11 +00:00
```js
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 }));
});
```
2013-04-08 04:36:59 +00:00
## Options
2012-07-16 18:05:11 +00:00
These are the command-line flags for both Python and JS scripts:
2012-12-06 22:02:05 +00:00
```text
2012-12-06 21:56:34 +00:00
CLI Options:
2013-06-06 18:47:04 +00:00
-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
2012-12-06 21:56:34 +00:00
Beautifier Options:
2014-06-11 00:57:33 +00:00
-s, --indent-size Indentation size [4]
-c, --indent-char Indentation character [" "]
-t, --indent-with-tabs Indent with tabs, overrides -s and -c
2017-01-03 03:09:23 +00:00
-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]
2014-06-11 00:57:33 +00:00
-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 )
2017-01-03 03:09:23 +00:00
-E, --space-in-empty-paren Add a single space inside empty paren, ie. f( )
2014-06-11 00:57:33 +00:00
-j, --jslint-happy Enable jslint-stricter mode
2014-11-10 02:46:26 +00:00
-a, --space-after-anon-function Add a space before an anonymous function's parens, ie. function ()
2017-01-03 03:09:23 +00:00
-b, --brace-style [collapse|expand|end-expand|none][,preserve-inline] [collapse,preserve-inline]
2017-09-06 10:47:33 +00:00
-u, --unindent-chained-methods Don't indent chained method calls
2014-06-11 00:57:33 +00:00
-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
--good-stuff Warm the cockles of Crockford's heart
2017-01-03 03:09:23 +00:00
-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]
2012-12-06 21:56:34 +00:00
```
2017-01-03 03:09:23 +00:00
Which correspond to the underscored option keys for both library interfaces
2012-12-06 21:56:34 +00:00
2017-01-03 03:09:23 +00:00
**defaults per CLI options**
2012-12-06 21:56:34 +00:00
```json
{
"indent_size": 4,
"indent_char": " ",
2017-01-03 03:09:23 +00:00
"indent_with_tabs": false,
2015-03-23 22:11:19 +00:00
"eol": "\n",
2017-01-03 03:09:23 +00:00
"end_with_newline": false,
2012-12-06 21:56:34 +00:00
"indent_level": 0,
"preserve_newlines": true,
"max_preserve_newlines": 10,
2017-01-03 03:09:23 +00:00
"space_in_paren": false,
"space_in_empty_paren": false,
2012-12-06 21:56:34 +00:00
"jslint_happy": false,
2014-06-11 00:57:33 +00:00
"space_after_anon_function": false,
2012-12-06 21:56:34 +00:00
"brace_style": "collapse",
2017-09-06 10:47:33 +00:00
"unindent_chained_methods": false,
2012-12-06 21:56:34 +00:00
"break_chained_methods": false,
2017-01-03 03:09:23 +00:00
"keep_array_indentation": false,
2013-03-15 17:30:43 +00:00
"unescape_strings": false,
2014-08-07 01:15:17 +00:00
"wrap_line_length": 0,
2017-01-03 03:09:23 +00:00
"e4x": false,
"comma_first": false,
"operator_position": "before-newline"
}
```
**defaults not exposed in the cli**
```json
{
"eval_code": false,
"space_before_conditional": true
2012-12-06 21:56:34 +00:00
}
```
2017-01-03 03:09:23 +00:00
Notice not all defaults are exposed via the CLI. 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 still a
few other additional cases keeping us from 100% API-compatibility.
2016-12-18 03:18:07 +00:00
### Loading settings from environment or .jsbeautifyrc (JavaScript-Only)
2012-12-06 21:56:34 +00:00
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.
2012-07-16 18:05:11 +00:00
2017-02-21 17:53:47 +00:00
### Setting inheritance and Language-specific overrides
2012-07-16 21:33:12 +00:00
2016-12-18 03:18:07 +00:00
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.
2015-06-19 22:11:58 +00:00
2017-03-15 11:41:58 +00:00
Below is an example configuration tree showing all the supported locations
2016-12-18 03:18:07 +00:00
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:
2015-06-19 22:11:58 +00:00
2016-12-18 03:18:07 +00:00
```json
2015-06-19 22:11:58 +00:00
{
2016-12-18 03:18:07 +00:00
"indent_size": 4,
"html": {
"end_with_newline": true,
"js": {
"indent_size": 2
},
"css": {
"indent_size": 2
}
},
"css": {
"indent_size": 1
},
"js": {
"preserve-newlines": true
}
2015-06-19 22:11:58 +00:00
}
```
2016-12-18 03:18:07 +00:00
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`
2015-06-19 22:11:58 +00:00
2013-04-08 04:36:59 +00:00
### CSS & HTML
2013-03-18 19:48:28 +00:00
2016-12-18 03:18:07 +00:00
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.
2013-03-18 19:48:28 +00:00
```js
// 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.
2013-03-18 20:30:07 +00:00
```text
CSS Beautifier Options:
2014-11-10 02:46:26 +00:00
-s, --indent-size Indentation size [4]
-c, --indent-char Indentation character [" "]
2015-06-17 22:47:52 +00:00
-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
2014-11-10 02:46:26 +00:00
-L, --selector-separator-newline Add a newline between multiple selectors
-N, --newline-between-rules Add a newline between CSS rules
2013-03-18 20:30:07 +00:00
HTML Beautifier Options:
2014-11-10 02:46:26 +00:00
-s, --indent-size Indentation size [4]
-c, --indent-char Indentation character [" "]
2015-06-17 22:47:52 +00:00
-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.
2016-01-26 19:41:50 +00:00
-b, --brace-style [collapse-preserve-inline|collapse|expand|end-expand|none] ["collapse"]
2014-11-10 02:46:26 +00:00
-S, --indent-scripts [keep|separate|normal] ["normal"]
-w, --wrap-line-length Maximum characters per line (0 disables) [250]
2016-12-16 15:54:11 +00:00
-A, --wrap-attributes Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline] ["auto"]
2016-09-01 11:10:48 +00:00
-i, --wrap-attributes-indent-size Indent wrapped attributes to after N characters [indent-size] (ignored if wrap-attributes is "force-aligned")
2014-11-10 02:46:26 +00:00
-U, --unformatted List of tags (defaults to inline) that should not be reformatted
2017-09-26 15:34:13 +00:00
-T, --content_unformatted List of tags (defaults to pre) whose content should not be reformatted
2015-02-06 04:10:35 +00:00
-E, --extra_liners List of tags (defaults to [head,body,/html] that should have an extra newline before them.
2016-07-11 17:41:54 +00:00
--editorconfig Use EditorConfig to set up the options
2013-03-18 20:30:07 +00:00
```
2016-12-18 03:18:07 +00:00
## 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 formatting of or completely ignore part of a file.
The example input below will remain changed after beautification
```js
// 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 */
2013-03-18 20:30:07 +00:00
```
2013-04-08 04:36:59 +00:00
# License
2012-07-16 18:05:11 +00:00
2011-06-06 18:33:45 +00:00
You are free to use this in any way you want, in case you find this
2013-04-01 17:55:22 +00:00
useful or working for you but you must keep the copyright notice and license. (MIT)
2011-06-06 18:33:45 +00:00
2013-04-08 04:36:59 +00:00
# Credits
2012-07-16 18:05:11 +00:00
2016-01-26 19:41:50 +00:00
* Created by Einar Lielmanis, < einar @ jsbeautifier . org >
2013-03-29 00:16:54 +00:00
* Python version flourished by Stefano Sanfilippo < a.little.coder @ gmail . com >
* Command-line for node.js by Daniel Stockman < daniel.stockman @ gmail . com >
2016-12-18 03:36:01 +00:00
* Maintained and expanded by Liam Newman < bitwiseman @ gmail . com >
2011-06-06 18:33:45 +00:00
2013-03-29 00:16:54 +00:00
Thanks also to Jason Diamond, Patrick Hof, Nochum Sossonko, Andreas Schneider, Dave
2011-12-05 07:58:26 +00:00
Vasilevsky, Vital Batmanov, Ron Baldwin, Gabriel Harrison, Chris J. Shull,
2012-06-25 14:43:06 +00:00
Mathias Bynens, Vittorio Gambaletta and others.
2014-04-26 01:26:20 +00:00
2017-10-09 00:19:25 +00:00
(README.md: js-beautify@1.7.4)