7.2 KiB
💄 {{package.name}}
Mac OS and | |
---|---|
{{package.description}}
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.
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.
{{beautifiers-info beautifiers}}
Language Support
See all supported options in the documentation at docs/options.md
.
{{language-beautifiers-support languageOptions}}
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.