20 KiB
💄 atom-beautify
Mac OS  and  |
 |
|---|---|
Travis CI:  |
AppVeyor:  |
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
Important Notice: Analytics
Atom-Beautify respects the core.telemetryConsent configuration option from Atom editor.
If you do not wish to have usage data sent to Google Analytics then please set core.telemetryConsent to no or undecided option before using Atom-Beautify.
See Anonymous Analytics section of docs for details.
Thank you.
| On Atom Load | Change Setting Later |
|---|---|
 |
 |
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.
Beautifiers
Some of the supported beautifiers are developed for Node.js and are automatically installed when Atom-Beautify is installed. However, other beautifiers are command-line interface (CLI) applications and require you to manually install them.
| Beautifier | Is Pre-Installed? | Installation Instructions |
|---|---|---|
| align-yaml | ✅ | Nothing! |
| autopep8 | ❌ | Go to https://github.com/hhatto/autopep8 and follow the instructions. |
| beautysh | ❌ | Go to https://github.com/bemeurer/beautysh and follow the instructions. |
| clang-format | ❌ | Go to https://clang.llvm.org/docs/ClangFormat.html and follow the instructions. |
| cljfmt | ✅ | Nothing! |
| Coffee Formatter | ✅ | Nothing! |
| coffee-fmt | ✅ | Nothing! |
| Crystal | ❌ | Go to http://crystal-lang.org and follow the instructions. |
| CSScomb | ✅ | Nothing! |
| dfmt | ❌ | Go to https://github.com/Hackerpilot/dfmt and follow the instructions. |
| elm-format | ❌ | Go to https://github.com/avh4/elm-format and follow the instructions. |
| erl_tidy | ❌ | Go to http://erlang.org/doc/man/erl_tidy.html and follow the instructions. |
| ESLint Fixer | ✅ | Nothing! |
| formatR | ❌ | Go to https://github.com/yihui/formatR and follow the instructions. |
| Fortran Beautifier | ❌ | Go to https://www.gnu.org/software/emacs/ and follow the instructions. |
| Gherkin formatter | ✅ | Nothing! |
| gofmt | ❌ | Go to https://golang.org/cmd/gofmt/ and follow the instructions. |
| hh_format | ❌ | Go to http://hhvm.com/ and follow the instructions. |
| HTML Beautifier | ❌ | Go to https://github.com/threedaymonk/htmlbeautifier and follow the instructions. |
| JS Beautify | ✅ | Nothing! |
| JSCS Fixer | ✅ | Nothing! |
| Latex Beautify | ❌ | Go to https://github.com/cmhughes/latexindent.pl and follow the instructions. |
| Lua beautifier | ❌ | Go to https://www.perl.org/ and follow the instructions. |
| Marko Beautifier | ✅ | Nothing! |
| Nginx Beautify | ✅ | Nothing! |
| ocp-indent | ❌ | Go to https://www.typerex.org/ocp-indent.html and follow the instructions. |
| Perltidy | ❌ | Go to http://perltidy.sourceforge.net/ and follow the instructions. |
| PHP-CS-Fixer | ❌ | Go to https://github.com/FriendsOfPHP/PHP-CS-Fixer and follow the instructions. |
| PHPCBF | ❌ | Go to http://php.net/manual/en/install.php and follow the instructions. |
| Pretty Diff | ✅ | Nothing! |
| Pug Beautify | ✅ | Nothing! |
| puppet-lint | ❌ | Go to http://puppet-lint.com/ and follow the instructions. |
| pybeautifier | ❌ | Go to https://github.com/guyskk/pybeautifier and follow the instructions. |
| Remark | ✅ | Nothing! |
| Rubocop | ❌ | Go to https://github.com/bbatsov/rubocop and follow the instructions. |
| Ruby Beautify | ❌ | Go to https://github.com/erniebrodeur/ruby-beautify and follow the instructions. |
| rustfmt | ❌ | Go to https://github.com/nrc/rustfmt and follow the instructions. |
| SassConvert | ❌ | Go to http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax and follow the instructions. |
| sqlformat | ❌ | Go to https://github.com/andialbrecht/sqlparse and follow the instructions. |
| stylish-haskell | ❌ | Go to https://github.com/jaspervdj/stylish-haskell and follow the instructions. |
| Tidy Markdown | ✅ | Nothing! |
| TypeScript Formatter | ✅ | Nothing! |
| Uncrustify | ❌ | Go to https://github.com/uncrustify/uncrustify and follow the instructions. |
| Vue Beautifier | ✅ | Nothing! |
| yapf | ❌ | Go to https://github.com/google/yapf and follow the instructions. |
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, .cu, .c++, .hpp, .hxx, .h++, .cuh |
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) |
| Golang Template | HTML (Go), Go Template |
.gohtml |
Pretty Diff (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 |
ESLint Fixer, 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), Pretty Diff |
| Nginx | nginx |
.conf |
Nginx 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), pybeautifier, 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) |
| YAML | YAML |
.yml, .yaml |
align-yaml (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-beautifywill 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.