7.7 KiB
atom-beautify
Beautify HTML (including Handlebars), CSS (including Sass and LESS), JavaScript, and much more in Atom.
Atom Package: https://atom.io/packages/atom-beautify
apm install atom-beautify
Or Settings/Preferences ➔ Packages ➔ Search for atom-beautify
Language Support
- JavaScript and JSON
- HTML, including
- Handlebars
- Mustache
- Embedded Ruby (ERB)
- Requires htmlbeautifier
- XML
- Marko
- Requires language-marko
- CSS, including
- SQL
- Requires python-sqlparse
- Markdown
- Perl
- Requires perltidy
- PHP
- Requires php-cs-fixer to be already installed.
- Python
- Ruby
- Requires Ruby Beautify
- CoffeeScript
- Golang
- Java
- Requires Uncrustify
- C
- Requires Uncrustify
- C++
- Requires Uncrustify
- C#
- Requires Uncrustify
- Objective-C
- Requires Uncrustify
- D
- Requires Uncrustify
- Pawn
- Requires Uncrustify
- Vala
- Requires Uncrustify
- TypeScript
Usage
Open the Command Palette, and type Beautify
.
It will only beautify selected text if a selection is found -- if not, the whole file will be beautified.
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'
Package Options
Each language and its beautifier's options are fully documented in the Atom Beautify package settings panel. There are far too many to document them all here. Here are a few key options that you may use:
-
beautifyOnSave
(Default false) You can also choose to beautify on every file save. -
beautifyEntireFileOnSave
(Default true) Beautification will normally only beautify your selected text. However, when beautification occurs on save then it will be forced to beautify the entire file's contents, not just selected text. -
muteUnsupportedLanguageErrors
(Default false) Mute only unsupported language errors. -
muteAllErrors
(Default false) Do not show the Atom Beautify Error Messages panel for any of the errors occurring while beautifying. -
analytics
(Default true) There is Segment.io which forwards data to Google Analytics to track what languages are being used the most, as well as other stats. Everything is anonymized and no personal information, such as source code, is sent. See https://github.com/Glavin001/atom-beautify/issues/47 for more details.
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/
An option table is available at the js-beautify repo.
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
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
}
}
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.