💄 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

Table of Contents

• Installation
• Language Support
• Usage
  • Selection of Code
  • Beautify On Save
  • Keyboard Shortcut
    • Custom Keyboard Shortcuts
• 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)
Bash	Shell Script	.bash, .sh	beautysh (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	EJS, JavaScript Template, HTML (Angular)	.ejs	JS Beautify (Default), Pretty Diff
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, .f95, .F95	Fortran Beautifier (Default)
gherkin	Gherkin	.feature	Gherkin formatter (Default)
GLSL	C, opencl, GLSL	.vert, .frag	clang-format (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, JavaScript with JSX	.jsx, .js	JS Beautify, 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, hh_format
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, .plist, .recipe	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.

License

MIT © Glavin Wiechert