atom-beautify/README-template.md

💄 {{package.name}}

Mac OS and
Travis CI:	AppVeyor:

{{package.description}}

Before	After
Original HTML	Beautified HTML

Table of Contents

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

Installation

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

apm install atom-beautify

Or Settings/Preferences ➔ Packages ➔ 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.

Want automated installation?

See Issue #1678 for a solution utilizing Docker to achieve automated installation of beautifiers which are not already preinstalled.

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

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

See docs/troubleshooting.md.

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.

License

MIT © Glavin Wiechert