:lipstick: atom-beautify
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
Atom Package: https://atom.io/packages/atom-beautify
apm install atom-beautify
Or Settings/Preferences ➔ Packages ➔ Search for atom-beautify
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) |
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 |
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 |
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) |
.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) |
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 |
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 |
CSScomb , Pretty Diff (Default) |
SCSS | SCSS |
.scss |
CSScomb , Pretty Diff (Default) |
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) |
Vala | Vala |
.vala , .vapi |
Uncrustify (Default) |
Visualforce | Visualforce |
.page |
Pretty Diff (Default) |
XML | SLD , XML , XHTML , XSD , XSL , JSP |
.sld , .xml , .xhtml , .xsd , .xsl , .jsp |
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 foratom-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
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.