Beautifier for javascript
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 package javascript-obfuscator.
Open beautifier.io to try it out. Options are available via the UI.
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!
You can install the beautifier for Node.js or Python.
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.jsYou can also use js-beautify as a node library (install locally, the npm default):
$ npm install js-beautifyThe above install the latest stable release. To install beta or RC versions:
$ npm install js-beautify@nextThe 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:
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/2.0.3/beautify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/2.0.3/beautify-css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/2.0.3/beautify-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/2.0.3/beautify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/2.0.3/beautify-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/2.0.3/beautify-html.min.js"></script>Example usage of a JS tag in html:
<!DOCTYPE html>
<html lang="en">
<body>
. . .
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/2.0.3/beautify.min.js"></script>
<script src="script.js"></script>
</body>
</html>Older versions are available by changing the version number.
Disclaimer: These are free services, so there are no uptime or support guarantees.
To install the Python version of the beautifier:
$ pip install jsbeautifierUnlike 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:
$ pip install cssbeautifierNote: This project no longer supports Python 2.
You can beautify JavaScript using JS Beautifier in your web browser, or on the command-line using Node.js or Python.
Open beautifier.io. Options are available via the UI.
After you embed the <script> tags in your html file, they expose three functions: js_beautify, css_beautify, and html_beautify
Example usage of beautifying a json string:
const options = { indent_size: 2, space_in_empty_paren: true }
const dataObj = {completed: false,id: 1,title: "delectus aut autem",userId: 1,}
const dataJson = JSON.stringify(dataObj)
js_beautify(dataJson, options)
/* OUTPUT
{
"completed": false,
"id": 1,
"title": "delectus aut autem",
"userId": 1,
}
*/When installed globally, the beautifier provides an executable js-beautify script. The beautified result is sent to stdout unless otherwise configured.
$ js-beautify foo.jsTo 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').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 }));
});If you are using ESM Imports, you can import js-beautify like this:
// 'beautify' can be any name here.
import beautify from 'js-beautify';
beautify.js(data, options);
beautify.html(data, options);
beautify.css(data, options);After installing, to beautify using Python:
$ js-beautify file.jsBeautified 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.
These are the command-line flags for both Python and JS scripts:
…Which correspond to the underscored option keys for both library interfaces
defaults per CLI options
…defaults not exposed in the cli
{
"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.
In addition to CLI arguments, you may pass config to the JS executable via:
jsbeautify_-prefixed environment variablesJSON-formatted file indicated by the --config parameter.jsbeautifyrc file containing JSON data at any level of the filesystem above $PWDConfiguration sources provided earlier in this stack will override later ones.
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:
indent_size of 4 spaces from the top-level setting.end_with_newline setting.indent_size of 1 space.indent_size of 4 spaces from the top-level setting.preserve-newlines to true.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.
…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 ``.
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 */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 */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)
Thanks also to Jason Diamond, Patrick Hof,
Angular control flow syntax
Feature Request: html option preserveNewTextLines
Add `defaultOptions` method to main beautifier
Theme toggle is not keyboard accessible
SCSS maps issue
Security: request to open a private disclosure channel
Is there a timeline for publishing the latest release to npm?
Unicode freaks it out
Comma First adds unwanted new lines to arrays
scss: Do not remove space after `==` and `!=`