Is there a command for formatting HTML in the Atom editor?

Question

I would like to format my HTML with a command, as I do in Visual Studio, using Ctrl+K+D. Is this possible in Atom? If not, are there other options?

Polybius

Answer 1

Atom does not have a built-in command for formatting html. However, you can install the atom-beautify package to get this behavior.

1. Press CTRL + SHFT + P to bring up the command palette (CMD + SHFT + P on a Mac).
2. Type Install Packages to bring up the package manager.
3. Type beautify into the search box.
4. Choose atom-beautify or one of the other packages and click Install.
5. Now you can use the default keybinding for atom-beautify CTRL + ALT + B to beautify your HTML (CTRL + OPTION + B on a Mac).

Crackpot

It is a contrary opinion that it is cool that Atom has the smallest core possible, so that you can install only what is necessary. ie, Atom can be used for developing non-web apps, which don't require those formatters... – Unarm

There could be some custom installations like "Atom for Web developers" that come with the most downloaded packages related to the topic. – Fumikofumitory

atom-beautify, for example, has 685,927 downloads as of now... 9 in the last 10min, including mine! – Fumikofumitory

atom-beautify is full of bugs. It doesn't work on real-word documents. It incorrectly adds newlines in headings if inline elements are presents. Switching from the JS Beautify engine to the Pretty Diff engine makes things worse --- inline elements such as <dfn> are wrapped inside of paragraphs. – Unarmed

I highly dislike the fact that atom-beautify doesn’t make use of personal indentation settings, and/or .editorconfig settings. It just formats everything its way. – Milagrosmilam

Just FYI, in Atom for OS X the shortcut is COMMAND + SHIFT + P – Arboreal

@Milagrosmilam atom-beautify is very customizable and does support .editorconfig settings. See github.com/Glavin001/atom-beautify/tree/master/examples/… for example. – Surefooted

From the cmd line you can run apm install atom-beautify – Chauncey

@GarretWilson Beautify is open source and permissively licensed, and you sound smart enough to fix those issues. – Wert

Yes, but my time is extremely limited. I have however put up $200 of my own money as a bounty on one of the worst bugs (which actually stems from js-beautify, the HTML formatting engine used by atom-beautify), and I even described how to fix it. There have been no takers so far. github.com/beautify-web/js-beautify/issues/1033 – Unarmed

atom-beautify is just too complicated for some simple beautifying and indenting. Why do I need PHP installed to simply beautify .php files?! – Bonanno

Note that to beautify Python, you will need to install autopep8: pip install --upgrade autopep8 – Aikens

Answer 2

There are a few packages for prettifying HTML. You can find them by searching the Atom package archive:

1. Navigate to the Atom site
2. Click the Packages link
3. Enter "prettify" in the search box

Or just go to this link: https://atom.io/packages/search?q=prettify

Once you've selected a package that does what you want you can install it by using the command: apm install [package name] from the command line or install it using the interface in Preferences.

When the package is installed, follow its instructions for how to activate its capabilities.

Lumberyard

Answer 3

https://github.com/Glavin001/atom-beautify

Includes many different languages, html too..

Orthogenetic

Answer 4

You can add atom beauty package for formatting text in atom..

file --> setting --> Install

then you type atom-beautify in search area.

then click Package button.. select atom beuty and install it.

next you can format your text using (Alt + ctrl + b) or right click and select beautify editor contents

Satan

Answer 5

1. Go to "Packages" in atom editor.
2. Then in "Packages" view choose "Settings View".
3. Choose "Install Packages/Themes".
4. Search for "Atom Beautify" and install it.

Cracked

Answer 6

Not Just HTML, Using atom-beautify - Package for Atom, you can format code for HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more) in Atom within a matter of seconds.

To Install the atom-beautify package :

• Open Atom Editor.
• Press Ctrl+Shift+P (Cmd+Shift+P on mac), this will open the atom Command Palette.
• Search and click on Install Packages & Themes. A Install Package window comes up.
• Search for Beautify package, you will see a lot of beautify packages. Install any. I will recommend for atom-beautify.
• Now Restart atom and TADA! now you are ready for quick formatting.

To Format text Using atom-beautify :

• Go to the file you want to format.
• Hit Ctrl+Alt+B (Ctrl+Option+B on mac).
• Your file is formatted in seconds.

Fathometer