This little beautifier will reformat and re-indent bookmarklets, uglyJavaScript, 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.
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 bothcustomer 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.js
You can also use js-beautify
as a node
library (install locally, the npm
default):
$ npm install js-beautify
The above install the latest stable release. To install beta or RC versions:
$ npm install js-beautify@next
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:
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify-css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify-html.min.js"></script>
<script src="https://cdn.rawgit.com/beautify-web/js-beautify/v1.14.0/js/lib/beautify.js"></script>
<script src="https://cdn.rawgit.com/beautify-web/js-beautify/v1.14.0/js/lib/beautify-css.js"></script>
<script src="https://cdn.rawgit.com/beautify-web/js-beautify/v1.14.0/js/lib/beautify-html.js"></script>
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 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:
$ pip install cssbeautifier
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.
The script tags above expose three functions: js_beautify
, css_beautify
, and html_beautify
.
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 }));
});
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
.
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,smarty) ["auto"] auto = none in JavaScript, all in html
Which correspond to the underscored option keys for both library interfaces
defaults per CLI options
{
"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
{
"eval_code": false,
"space_before_conditional": true
}
Notice not all defaults are exposed via the CLI. Historically, the Python andJS APIs have not been 100% identical. There are still afew 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 $PWD
Configuration sources provided earlier in this stack will override later ones.
The settings are a shallow tree whose values are inherited for all languages, butcan 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 locationsfor 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.
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 <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|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,smarty) ["auto"] auto = none in JavaScript, all in html
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} -->
.
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, Nochum Sossonko, Andreas Schneider, DaveVasilevsky, Vital Batmanov, Ron Baldwin, Gabriel Harrison, Chris J. Shull,Mathias Bynens, Vittorio Gambaletta and others.
(README.md: js-beautify@1.14.0)
默认格式化添加分号 编辑 setting -> users -> settings.json //去掉JavaScript 自动添加分号 "vetur.format.defaultFormatter.js": "vscode-typescript", .vue 文件组件自动换行 "vetur.format.defaultFormatterOptions": { "js-beau
js-beautify的代码在github上,需要的可以直接去下载: https://github.com/beautify-web/js-beautify js-beautify的使用很简单,具体步骤如下: 首先,将js-beautify的js放入js/lib目录下; 在html中引入require.js; 在html上配置,require.config,代码如下: require.config
注: 本文摘自 黑火巨雷 - 简书 1. 在工作目录下建立.jsbeautifyrc文件 官方文档 { "brace_style": "none,preserve-inline", "indent_size": 2, "indent_char": " ", "jslint_happy": true, "unformatted": [""], "css": {
在使用JS工作时,有一些对象和方法会被频繁的使用。下面是它们的一个小的集合。 Math.floor(v),Math.ceil(v),Math.round(v) - 从浮点数获取最大,最小和随机整数 Math.random() - 创建一个在0到1之间的随机数 Object.keys(o) - 获取对象的索引值(包括QObject) JSON.parse(s), JSON.stringify(o)
JSService 和 Weex 实例在 JS Runtime 中并行运行。Weex 实例的生命周期可调用 JSService 生命周期。目前提供创建、刷新、销毁生命周期。 重要提醒: JSService 使用不当会导致内存增高或全局污染! JS 内置文件示例 service.register(SERVICE_NAME /* same string with native */, { /**
比较基础的工具函数,如有需要请参考 utils 文件 Usage 只支持按需引入。 import { range, isLeapYear, convert2Digit } from 'beeshell/dist/common/utils'
时间选择组件 <input class="js-datetime" type="text" id="input-datetime" placeholder="2013-01-04 09:20" name="datetime"> 功能: 加上js-datetime类名的text input标签在用户输入时间时,会弹出一个日历让用户选择时间
日期选择组件 <input class="js-date" type="text" id="input-birthday" placeholder="2013-01-04" name="birthday"> 功能: 加上js-date类名的text input标签在用户输入时间时,会弹出一个日历让用户选择日期
时间选择组件 <input class="js-datetime" type="text" id="input-datetime" placeholder="2013-01-04 09:20" name="datetime"> 功能: 加上js-datetime类名的text input标签在用户输入时间时,会弹出一个日历让用户选择时间
日期选择组件 <input class="js-date" type="text" id="input-birthday" placeholder="2013-01-04" name="birthday"> 功能: 加上js-date类名的text input标签在用户输入时间时,会弹出一个日历让用户选择日期
要点 对于在代码中的调试信息console.log(),alert(),调试完之后一定要把它去掉,避免在线上输出,否则会显得我们开发不够专业,不够严谨 注释 As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性、可读性。 As long as necessary(如有必要,尽量详尽):合理的注释、空行排版等,可以让代码更易阅读、更具美感。 单行注释 必须独占一行