15 KiB
💄 atom-beautify
Mac OS  |
 |
 |
|---|---|---|
 |
|
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
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.
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, .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) |
| 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 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.