8.8 KiB
💄 {{package.name}}
Mac OS and | |
---|---|
Travis CI: | AppVeyor: |
{{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 ➔ Install ➔ 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.
{{beautifiers-info beautifiers}}
Language Support
See all supported options in the documentation at docs/options.md
.
{{language-beautifiers-support languageOptions}}
Usage
Command Palette
Open the Command Palette, type Beautify
, and run Beautify Editor
.
Beautify a Specific Language
You can use the Command Palette to beautify the editor for a specific language.
The commands are in the form Atom Beautify: Beautify Language {NAME}
(i.e. atom-beautify:beautify-language-{NAME}
for keyboard shortcuts).
For example, you may want to beautify JavaScript
code within a HTML
file.
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.