es-beautifier

    1.2.0 • Public • Published

    logo

    Build Status npm vim atom vscode

    ECMAScript beautifier based on eslint

    screenshot

    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.

    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

    Install

    npm i es-beautifier

    DownloadsWeekly Downloads

    1,225

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    249 kB

    Total Files

    58

    Last publish

    Collaborators

    • daishi