Mac OS and

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

• Installation
• Beautifiers
• Language Support
• Usage
  • Selection of Code
  • Beautify On Save
  • Keyboard Shortcut
    • Custom Keyboard Shortcuts
• Configuration
  • Simple
  • Nested
• Troubleshooting
• Contributing

Atom Package: https://atom.io/packages/atom-beautify

apm install atom-beautify

Or Settings/Preferences ➔ Packages ➔ Search for atom-beautify

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.

Atom-Beautify is going to be completely rewritten with Unibeautify at its core! See unibeautify branch for work in progress and Issue #1174.

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.

See all supported options in the documentation at docs/options.md.

Open the Command Palette, type Beautify, and run Beautify Editor.

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 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.

You can also type Ctrl-Alt-B as a shortcut or click Packages > Beautify in the menu.

See Keymaps In-Depth for more details.

For example:

'.editor':
  'ctrl-alt-b': 'atom-beautify:beautify-editor'

Edit your .jsbeautifyrc file in any of the following locations:

• Atom Package Settings Atom ➔ Preferences ➔ Search for atom-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.

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
}

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
  }
}

See docs/troubleshooting.md.

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.

MIT © Glavin Wiechert