📣 Help Wanted - Looking for Maintainer: https://github.com/Glavin001/atom-beautify/issues/2572 | 💄 Universal beautification package for Atom editor (⚠️ Currently migrating to https://github.com/Unibeautify/ and have very limited bandwidth for Atom-Beautify Issues. Thank you for your patience and understanding ❤️ )
Go to file
Glavin Wiechert 3001d312c7 Merge pull request #1685 from swhitt/fix-rubocop
Add `.rb` to temp files passed to `rubocop`
2017-05-28 22:00:52 -03:00
.github Create no-response.yml 2017-05-27 19:07:52 -03:00
appveyor See #375. Add Python, Pip, autopep8 installation to AppVeyor 2015-05-30 22:32:54 -03:00
docs Merge pull request #1625 from hxsf/master 2017-05-28 04:42:40 -03:00
examples Merge pull request #1625 from hxsf/master 2017-05-28 04:42:40 -03:00
keymaps Closes #178. Change commands' namespace from "beautify" to "atom-beautify" 2015-05-06 13:00:51 -03:00
menus See #213. Disable `Beautify Directory` command from menus 2015-06-11 21:58:43 -03:00
script fix all descriptions 2017-05-06 13:38:45 -05:00
spec Add Clojure support using cljfmt 2016-09-03 21:26:54 -04:00
src Add `.rb` to the temp files passed to rubocop 2017-05-28 09:15:40 -05:00
styles Fix incorrectly named directory for Stylesheets. 2015-02-02 12:42:33 -04:00
.codeclimate.yml Update and rename codeclimate.yml to .codeclimate.yml 2017-02-09 12:08:19 -05:00
.codoopts See #596. Add source code documentation to docs/code/ 2016-03-03 20:24:13 -04:00
.csscomb.json Closes #209. Add CSScomb beautifier for CSS/LESS/SCSS/Sass languages. 2015-05-03 01:01:33 -03:00
.gitignore Fixes #1601 and #1598. Remove src/options.json from gitignore 2017-04-15 22:00:49 -03:00
.jshintrc Closes #47. Switch Analytics from Google Analytics to Segment.io 2014-08-03 16:12:07 -04:00
.mention-bot Add package.json to mention-bot file blacklist 2016-03-03 18:54:03 -04:00
.npmignore See #596. Add source code documentation to docs/code/ 2016-03-03 20:24:13 -04:00
.travis.yml Disable linux builds for Travis CI 2017-04-19 23:16:08 -03:00
CHANGELOG.md Add `.rb` to the temp files passed to rubocop 2017-05-28 09:15:40 -05:00
CONTRIBUTING.md Update CONTRIBUTING.md 2017-01-11 10:42:15 -04:00
ISSUE_TEMPLATE.md Update ISSUE_TEMPLATE.md 2017-01-11 10:40:51 -04:00
LICENSE.md See #282. Update README for new options and language requirements 2015-05-02 20:25:04 -03:00
PULL_REQUEST_TEMPLATE.md Update changelog 2017-05-06 16:52:19 -03:00
README-template.md See #27. Update README with instructions to beautify a specific language 2017-05-06 17:26:39 -03:00
README.md Merge branch 'add-config-to-xml' of https://github.com/EliJDonahue/atom-beautify into EliJDonahue-add-config-to-xml 2017-05-28 02:28:35 -03:00
ROADMAP.md Add very rough ROADMAP 2016-08-26 01:32:43 -03:00
appveyor.yml Modify php71 path 2017-02-14 20:07:41 +09:00
build-package.sh Update Travis CI scripts and config 2016-05-14 13:53:15 -03:00
coffeelint.json Beautify all src/ files to pass linting with Coffeelint 2015-06-11 22:57:03 -03:00
package.json Prepare 0.29.26 release 2017-05-28 02:36:05 -03:00

README.md

💄 atom-beautify

GitHub issues GitHub stars Gitter Bountysource Paypal Donations

Mac OS and
Travis CI: Travis branch AppVeyor: AppVeyor branch

Throughput Graph

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

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

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

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.

Beautifier Is Pre-Installed? Installation Instructions
align-yaml Nothing!
autopep8 Go to https://github.com/hhatto/autopep8 and follow the instructions.
beautysh Go to https://github.com/bemeurer/beautysh and follow the instructions.
clang-format Go to https://clang.llvm.org/docs/ClangFormat.html and follow the instructions.
cljfmt Nothing!
Coffee Formatter Nothing!
coffee-fmt Nothing!
Crystal Go to http://crystal-lang.org and follow the instructions.
CSScomb Nothing!
dfmt Go to https://github.com/Hackerpilot/dfmt and follow the instructions.
elm-format Go to https://github.com/avh4/elm-format and follow the instructions.
erl_tidy Go to http://erlang.org/doc/man/erl_tidy.html and follow the instructions.
ESLint Fixer Nothing!
formatR Go to https://github.com/yihui/formatR and follow the instructions.
Fortran Beautifier Go to https://www.gnu.org/software/emacs/ and follow the instructions.
Gherkin formatter Nothing!
gofmt Go to https://golang.org/cmd/gofmt/ and follow the instructions.
hh_format Go to http://hhvm.com/ and follow the instructions.
HTML Beautifier Go to https://github.com/threedaymonk/htmlbeautifier and follow the instructions.
JS Beautify Nothing!
JSCS Fixer Nothing!
Latex Beautify Go to https://github.com/cmhughes/latexindent.pl and follow the instructions.
Lua beautifier Go to https://www.perl.org/ and follow the instructions.
Marko Beautifier Nothing!
Nginx Beautify Nothing!
ocp-indent Go to https://www.typerex.org/ocp-indent.html and follow the instructions.
Perltidy Go to http://perltidy.sourceforge.net/ and follow the instructions.
PHP-CS-Fixer Go to https://github.com/FriendsOfPHP/PHP-CS-Fixer and follow the instructions.
PHPCBF Go to http://php.net/manual/en/install.php and follow the instructions.
Pretty Diff Nothing!
Pug Beautify Nothing!
puppet-lint Go to http://puppet-lint.com/ and follow the instructions.
pybeautifier Go to https://github.com/guyskk/pybeautifier and follow the instructions.
Remark Nothing!
Rubocop Go to https://github.com/bbatsov/rubocop and follow the instructions.
Ruby Beautify Go to https://github.com/erniebrodeur/ruby-beautify and follow the instructions.
rustfmt Go to https://github.com/nrc/rustfmt and follow the instructions.
SassConvert Go to http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax and follow the instructions.
sqlformat Go to https://github.com/andialbrecht/sqlparse and follow the instructions.
stylish-haskell Go to https://github.com/jaspervdj/stylish-haskell and follow the instructions.
Tidy Markdown Nothing!
TypeScript Formatter Nothing!
Uncrustify Go to https://github.com/uncrustify/uncrustify and follow the instructions.
Vue Beautifier Nothing!
yapf Go to https://github.com/google/yapf and follow the instructions.

Language Support

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

Language Grammars File Extensions Supported Beautifiers
Apex Apex .cls, .trigger Uncrustify (Default)
Arduino Arduino .ino, .pde Uncrustify (Default)
Bash Shell Script .bash, .sh beautysh (Default)
C C, opencl .h, .c, .cl Uncrustify (Default), clang-format
Coldfusion html .cfm, .cfml, .cfc Pretty Diff (Default)
Clojure Clojure .clj, .cljs, .edn cljfmt (Default)
CoffeeScript CoffeeScript .coffee Coffee Formatter, coffee-fmt (Default)
C++ C++ .h, .hh, .cc, .cpp, .cxx, .C, .cu, .c++, .hpp, .hxx, .h++, .cuh Uncrustify (Default), clang-format
Crystal Crystal .cr Crystal (Default)
C# C# .cs Uncrustify (Default)
CSS CSS .css CSScomb, JS Beautify (Default), Pretty Diff, SassConvert
CSV CSV .csv Pretty Diff (Default)
D D .d Uncrustify (Default), dfmt
EJS EJS, JavaScript Template, HTML (Angular) .ejs JS Beautify (Default), Pretty Diff
Elm Elm .elm elm-format (Default)
ERB HTML (Ruby - ERB), HTML (Rails) .erb HTML Beautifier, Pretty Diff (Default)
Erlang Erlang .erl erl_tidy (Default)
Fortran Fortran - Modern .f90, .F90, .f95, .F95 Fortran Beautifier (Default)
gherkin Gherkin .feature Gherkin formatter (Default)
GLSL C, opencl, GLSL .vert, .frag clang-format (Default)
Go Go .go gofmt (Default)
Golang Template HTML (Go), Go Template .gohtml Pretty Diff (Default)
Handlebars Handlebars, HTML (Handlebars) .hbs, .handlebars JS Beautify (Default), Pretty Diff
Haskell Haskell .hs stylish-haskell (Default)
HTML HTML .html JS Beautify (Default), Pretty Diff
Jade Jade, Pug .jade, .pug Pug Beautify (Default)
Java Java .java Uncrustify (Default)
JavaScript JavaScript .js ESLint Fixer, JS Beautify (Default), JSCS Fixer, Pretty Diff
JSON JSON .json JS Beautify (Default), Pretty Diff
JSX JSX, JavaScript (JSX), Babel ES6 JavaScript, JavaScript with JSX .jsx, .js JS Beautify, Pretty Diff (Default)
LaTeX BibTeX, LaTeX, TeX .bib, .tex, .sty, .cls, .dtx, .ins, .bbx, .cbx Latex Beautify (Default)
LESS LESS .less CSScomb, Pretty Diff (Default)
Lua Lua .lua Lua beautifier (Default)
Markdown GitHub Markdown .markdown, .md Remark, Tidy Markdown (Default)
Marko Marko .marko Marko Beautifier (Default)
Mustache HTML (Mustache) .mustache JS Beautify (Default), Pretty Diff
Nginx nginx .conf Nginx Beautify (Default)
Nunjucks Nunjucks, Nunjucks Templates, HTML (Nunjucks Templates) .njk, .nunjucks Pretty Diff (Default)
Objective-C Objective-C, Objective-C++ .m, .mm, .h Uncrustify (Default), clang-format
OCaml OCaml .ml ocp-indent (Default)
Pawn Pawn Uncrustify (Default)
Perl Perl, Perl 6 .pl, .PL, .pm, .pod, .t Perltidy (Default)
PHP PHP .php, .module, .inc PHP-CS-Fixer (Default), PHPCBF, hh_format
Puppet Puppet .pp puppet-lint (Default)
Python Python .py autopep8 (Default), pybeautifier, yapf
R R .r, .R formatR (Default)
Riot.js Riot.js, HTML (Riot Tag) .tag Pretty Diff (Default)
Ruby Ruby, Ruby on Rails .rb Rubocop (Default), Ruby Beautify
Rust Rust .rs, .rlib rustfmt (Default)
Sass Sass .sass SassConvert (Default)
SCSS SCSS .scss CSScomb, Pretty Diff (Default), SassConvert
Spacebars Spacebars Pretty Diff (Default)
SQL SQL (Rails), SQL .sql sqlformat (Default)
SVG SVG .svg Pretty Diff (Default)
Swig HTML (Swig), SWIG .swig Pretty Diff (Default)
TSS TSS .tss Pretty Diff (Default)
Twig HTML (Twig) .twig Pretty Diff (Default)
TypeScript TypeScript .ts TypeScript Formatter (Default)
UX Markup UX .ux Pretty Diff (Default)
Vala Vala .vala, .vapi Uncrustify (Default)
Visualforce Visualforce .page Pretty Diff (Default)
Vue Vue Component .vue Vue Beautifier (Default)
XML SLD, XML, XHTML, XSD, XSL, JSP, GSP .sld, .xml, .xhtml, .xsd, .xsl, .jsp, .gsp, .plist, .recipe, .config JS Beautify, Pretty Diff (Default)
XTemplate XTemplate .xtemplate Pretty Diff (Default)
YAML YAML .yml, .yaml align-yaml (Default)

Usage

Command Palette

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

image

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.

atom-beautify-language-commands

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

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 (AtomPreferences ➔ Search for atom-beautify), find HTML, and toggle the Beautify On Save option.

atom-beautify-setup-beautify-on-save

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

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