💄 atom-beautify

Mac OS and

Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more in Atom

Before	After
Original HTML	Beautified HTML

Installation
Language Support
Usage
Configuration
- Simple
- Nested
Troubleshooting
Contributing

Installation

Atom Package: https://atom.io/packages/atom-beautify

apm install atom-beautify

Or Settings/Preferences ➔ Packages ➔ Search for atom-beautify

Important Notice: Analytics

By default Anonymous Analytics is enabled. If you do not wish to have usage data sent to Google Analytics then please disable Anonymous Analytics option before using Atom-Beautify. See Anonymous Analytics section of docs for details. Thank you.

Next Version: Unibeautify

Atom-Beautify is going to be completely rewritten with Unibeautify at its core! See unibeautify branch for work in progress and Issue #1174.

Language Support

See all supported options in the documentation at docs/options.md.

Language	Grammars	File Extensions	Supported Beautifiers
Apex	`Apex`	`.cls`, `.trigger`	`Uncrustify` (Default)
Arduino	`Arduino`	`.ino`, `.pde`	`Uncrustify` (Default)
C	`C`, `opencl`	`.h`, `.c`, `.cl`	`Uncrustify` (Default), `clang-format`
Coldfusion	`html`	`.cfm`, `.cfml`, `.cfc`	`Pretty Diff` (Default)
Clojure	`Clojure`	`.clj`, `.cljs`, `.edn`	`cljfmt` (Default)
CoffeeScript	`CoffeeScript`	`.coffee`	`Coffee Formatter`, `coffee-fmt` (Default)
C++	`C++`	`.h`, `.hh`, `.cc`, `.cpp`, `.cxx`, `.C`, `.c++`, `.hpp`, `.hxx`, `.h++`	`Uncrustify` (Default), `clang-format`
Crystal	`Crystal`	`.cr`	`Crystal` (Default)
C#	`C#`	`.cs`	`Uncrustify` (Default)
CSS	`CSS`	`.css`	`CSScomb`, `JS Beautify` (Default), `Pretty Diff`, `SassConvert`
CSV	`CSV`	`.csv`	`Pretty Diff` (Default)
D	`D`	`.d`	`Uncrustify` (Default), `dfmt`
EJS	`JavaScript Template`, `HTML (Angular)`		`Pretty Diff` (Default)
Elm	`Elm`	`.elm`	`elm-format` (Default)
ERB	`HTML (Ruby - ERB)`, `HTML (Rails)`	`.erb`	`HTML Beautifier`, `Pretty Diff` (Default)
Erlang	`Erlang`	`.erl`	`erl_tidy` (Default)
Fortran	`Fortran - Modern`	`.f90`, `.F90`	`Fortran Beautifier` (Default)
gherkin	`Gherkin`	`.feature`	`Gherkin formatter` (Default)
Go	`Go`	`.go`	`gofmt` (Default)
Handlebars	`Handlebars`, `HTML (Handlebars)`	`.hbs`, `.handlebars`	`JS Beautify` (Default), `Pretty Diff`
Haskell	`Haskell`	`.hs`	`stylish-haskell` (Default)
HTML	`HTML`	`.html`	`JS Beautify` (Default), `Pretty Diff`
Jade	`Jade`, `Pug`	`.jade`, `.pug`	`Pug Beautify` (Default)
Java	`Java`	`.java`	`Uncrustify` (Default)
JavaScript	`JavaScript`	`.js`	`JS Beautify` (Default), `JSCS Fixer`, `Pretty Diff`
JSON	`JSON`	`.json`	`JS Beautify` (Default), `Pretty Diff`
JSX	`JSX`, `JavaScript (JSX)`, `Babel ES6 JavaScript`	`.jsx`, `.js`	`Pretty Diff` (Default)
LaTeX	`LaTeX`	`.tex`	`Latex Beautify` (Default)
LESS	`LESS`	`.less`	`CSScomb`, `Pretty Diff` (Default)
Lua	`Lua`	`.lua`	`Lua beautifier` (Default)
Markdown	`GitHub Markdown`	`.markdown`, `.md`	`Remark`, `Tidy Markdown` (Default)
Marko	`Marko`	`.marko`	`Marko Beautifier` (Default)
Mustache	`HTML (Mustache)`	`.mustache`	`JS Beautify` (Default)
Nunjucks	`Nunjucks`, `Nunjucks Templates`, `HTML (Nunjucks Templates)`	`.njk`, `.nunjucks`	`Pretty Diff` (Default)
Objective-C	`Objective-C`, `Objective-C++`	`.m`, `.mm`, `.h`	`Uncrustify` (Default), `clang-format`
OCaml	`OCaml`	`.ml`	`ocp-indent` (Default)
Pawn	`Pawn`		`Uncrustify` (Default)
Perl	`Perl`, `Perl 6`	`.pl`	`Perltidy` (Default)
PHP	`PHP`	`.php`, `.module`, `.inc`	`PHP-CS-Fixer` (Default), `PHPCBF`
Puppet	`Puppet`	`.pp`	`puppet-lint` (Default)
Python	`Python`	`.py`	`autopep8` (Default), `yapf`
R	`R`	`.r`, `.R`	`formatR` (Default)
Riot.js	`Riot.js`, `HTML (Riot Tag)`	`.tag`	`Pretty Diff` (Default)
Ruby	`Ruby`, `Ruby on Rails`	`.rb`	`Rubocop` (Default), `Ruby Beautify`
Rust	`Rust`	`.rs`, `.rlib`	`rustfmt` (Default)
Sass	`Sass`	`.sass`	`SassConvert` (Default)
SCSS	`SCSS`	`.scss`	`CSScomb`, `Pretty Diff` (Default), `SassConvert`
Spacebars	`Spacebars`		`Pretty Diff` (Default)
SQL	`SQL (Rails)`, `SQL`	`.sql`	`sqlformat` (Default)
SVG	`SVG`	`.svg`	`Pretty Diff` (Default)
Swig	`HTML (Swig)`, `SWIG`	`.swig`	`Pretty Diff` (Default)
TSS	`TSS`	`.tss`	`Pretty Diff` (Default)
Twig	`HTML (Twig)`	`.twig`	`Pretty Diff` (Default)
TypeScript	`TypeScript`	`.ts`	`TypeScript Formatter` (Default)
UX Markup	`UX`	`.ux`	`Pretty Diff` (Default)
Vala	`Vala`	`.vala`, `.vapi`	`Uncrustify` (Default)
Visualforce	`Visualforce`	`.page`	`Pretty Diff` (Default)
Vue	`Vue Component`	`.vue`	`Vue Beautifier` (Default)
XML	`SLD`, `XML`, `XHTML`, `XSD`, `XSL`, `JSP`, `GSP`	`.sld`, `.xml`, `.xhtml`, `.xsd`, `.xsl`, `.jsp`, `.gsp`	`JS Beautify`, `Pretty Diff` (Default)
XTemplate	`XTemplate`	`.xtemplate`	`Pretty Diff` (Default)

Usage

Open the Command Palette, type Beautify, and run Beautify Editor.

Selection of Code

It will only beautify selected text if a selection is found -- if not, the whole file will be beautified.

Selection of Code	Beautify Selection of Code	Beautify Entire File
Select code in Atom editor	Only that selection is beautified	Without a selection all code is beautified

Beautify On Save

Beautify On Save can be enabled for each language individually.

For example, for language HTML go into Atom-Beautify's package settings (Atom ➔ Preferences ➔ Search for atom-beautify), find HTML, and toggle the Beautify On Save option.

Keyboard Shortcut

You can also type Ctrl-Alt-B as a shortcut or click Packages > Beautify in the menu.

Custom Keyboard Shortcuts

See Keymaps In-Depth for more details.

For example:

'.editor':
  'ctrl-alt-b': 'atom-beautify:beautify-editor'

Configuration

Edit your .jsbeautifyrc file in any of the following locations:

Atom Package Settings
Atom ➔ Preferences ➔ Search for atom-beautify
Same directory as current file
Project root
atom-beautify will recursively look up from the current file's directory to find .jsbeautifyrc.
Your user's home directory

Note: Comments are supported in .jsbeautifyrc thanks to strip-json-comments.

See examples of both ways inside examples/

See all supported options in the documentation at docs/options.md.

Simple

See examples/simple-jsbeautifyrc/.jsbeautifyrc.

{
  "indent_size": 2,
  "indent_char": " ",
  "other": " ",
  "indent_level": 0,
  "indent_with_tabs": false,
  "preserve_newlines": true,
  "max_preserve_newlines": 2,
  "jslint_happy": true,
  "indent_handlebars": true
}

Nested (Recommended)

See examples/nested-jsbeautifyrc/.jsbeautifyrc.

{
  "html": {
    "brace_style": "collapse",
    "indent_char": " ",
    "indent_scripts": "normal",
    "indent_size": 6,
    "max_preserve_newlines": 1,
    "preserve_newlines": true,
    "unformatted": ["a", "sub", "sup", "b", "i", "u"],
    "wrap_line_length": 0
  },
  "css": {
    "indent_char": " ",
    "indent_size": 4
  },
  "js": {
    "indent_size": 2,
    "indent_char": " ",
    "indent_level": 0,
    "indent_with_tabs": false,
    "preserve_newlines": true,
    "max_preserve_newlines": 2,
    "jslint_happy": true
  },
  "sql": {
    "indent_size": 4,
    "indent_char": " ",
    "indent_level": 0,
    "indent_with_tabs": false
  }
}

Troubleshooting

See docs/troubleshooting.md.

Contributing

See all contributors on GitHub.

Please update the CHANGELOG.md, add yourself as a contributor to the package.json, and submit a Pull Request on GitHub.

argent-dawn/atom-beautify