es-beautifier

ECMAScript beautifier based on eslint

Motivation

JS Beautifier is so great that it can reduce formatting issues, however, there are two major issues: a) customization and b) ES.next.

a) If you like the result of code generated by JS Beautifier, it's just fine, but if you can't manage with its configuration options, you are out of luck.

b) If you are using a new ECMAScript feature or features that are not even standardized, you are also out of luck, because the parser does not support the features. Among such is JSX.

ESLint is a linting tool widely used, which adopts a pluggable architecture so that it's highly customizable. It also has an ability to automatically fix problems. There's lots of plugins developed, forming a big ecosystem.

So, why not build a beautifying tool using eslint?

Usage (CLI)

Install

npm install es-beautifier -g --only=production

es-beautifier --help

Example

es-beautifier < file.js > file-beautified.js

es-beautifier file-to-be-beautified.js

Usage (Vim)

Example with NeoBundle

NeoBundle 'dai-shi/es-beautifier', {'rtp': 'contrib/vim', 'external_commands': 'node', 'build_commands': 'npm', 'build': {'others': 'npm install --only=production'}}
autocmd FileType javascript nnoremap <buffer> <Leader>e :call EsBeautifier()<cr>
autocmd FileType javascript vnoremap <buffer> <Leader>e :call RangeEsBeautifier()<cr>

Usage (Atom)

https://atom.io/packages/es-beautifier

Toggle the Command Palette and enter "es-beautifier".

For the long term use, you might want to configure keybindings, for example:

'atom-text-editor':
  'shift-cmd-e': 'es-beautifier'

If you want to use your eslintrc files do the following, but please be reminded that it may conflict with the beautifier rule and may cause unexpected behavior.

'es-beautifier':
  'useEslintrc': true

Usage (Visual Studio Code)

ext install vscode-es-beautifier

Open the Change Language Mode (Cmd-K M / Ctrl-K M) and select "es-beautifier". You can format code just like the original formatter.

For the long term use, you might want to configure it in settings.json:

{
  "files.associations": {"*.js":"es-beautifier"}
}

If you want to use your eslintrc files add the following, but please be reminded that it may conflict with the beautifier rule and may cause unexpected behavior.

"[es-beautifier]": {
  "useEslintrc": true
}

Usage (eslint-plugin)

You can customize it just like a normal eslint plugin.

Install

In your project directory:

npm install eslint eslint-plugin-es-beautifier --save-dev

Example

Add the following to your .eslintrc or eslintConfig in package.json.

{
  "plugins": [
    "es-beautifier"
  ],
  "extends": [
    "plugin:es-beautifier/standard"
  ]
}

Add the following scripts in package.json.

{
  "scripts": {
    "beautify": "eslint --fix ."
  }
}

Run:

npm run beautify

Similar projects

There are several tools that do smiliar to what es-beautifier does.

• js-beautify
• uglify-js
• esformatter
• prettydiff
• prettier

To see the comparison:

git clone https://github.com/dai-shi/es-beautifier.git
cd es-beautifier
npm install
npm run examples

Here's more intuitive (biased) comparison in table:

	js-beautify	uglify-js	esformatter	prettydiff	es-beautifier	prettier
ES2015 Parser	Own	Own	Esprima	Own	Espree	Babylon
Customization	Limited	No	Plugin	Somewhat	Plugin	Limited
Comments	OK	Removed	OK	OK	OK	OK
JSX Support	No	Error	No	Limited	Yes	Yes
Array in array	Yes	No	No	Wierd	Yes	Yes
Execution Time	Short	Short	Long	Short	Long	Short
Completion	Mature	Good	Young	Good	Young	Active

Blogs

• ECMAScript beautifier based on eslint