231

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?

Penny Liu
  • 7,720
  • 5
  • 40
  • 66
user376456
  • 2,553
  • 2
  • 17
  • 12

6 Answers6

388

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).
dovetalk
  • 1,960
  • 1
  • 13
  • 20
Stuart Hallows
  • 7,712
  • 4
  • 35
  • 53
  • 44
    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... – ljs.dev Apr 27 '15 at 20:36
  • 7
    There could be some custom installations like "Atom for Web developers" that come with the most downloaded packages related to the topic. – Ricardo Dec 29 '15 at 21:00
  • 2
    [atom-beautify](https://atom.io/packages/atom-beautify), for example, has 685,927 downloads as of now... 9 in the last 10min, including mine! – Ricardo Dec 29 '15 at 21:01
  • 5
    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 `` are wrapped inside of paragraphs. – Garret Wilson Jan 08 '16 at 15:29
  • 5
    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. – Diti Feb 16 '16 at 14:34
  • 2
    Just FYI, in Atom for OS X the shortcut is COMMAND + SHIFT + P – Shawn J. Molloy Mar 27 '16 at 20:33
  • 1
    @Diti `atom-beautify` is very customizable and does support `.editorconfig` settings. See https://github.com/Glavin001/atom-beautify/tree/master/examples/editorconfig-options for example. – Glavin001 Apr 16 '16 at 22:31
  • 1
    From the cmd line you can run `apm install atom-beautify` – Callat Oct 01 '17 at 07:56
  • @GarretWilson Beautify is open source and permissively licensed, and you sound smart enough to fix those issues. – Greg Schmit Jan 08 '18 at 18:47
  • 1
    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. https://github.com/beautify-web/js-beautify/issues/1033 – Garret Wilson Jan 08 '18 at 23:02
  • atom-beautify is just too complicated for some simple beautifying and indenting. Why do I need PHP installed to simply beautify .php files?! – antikbd Nov 30 '18 at 12:31
13

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.

Lee
  • 17,515
  • 5
  • 54
  • 60
8

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

Includes many different languages, html too..

pungggi
  • 1,182
  • 13
  • 25
6

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

Jayantha
  • 1,681
  • 9
  • 12
0
  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.
eyllanesc
  • 190,383
  • 15
  • 87
  • 142
Ajay
  • 687
  • 1
  • 10
  • 20
0

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.
fcdt
  • 2,151
  • 5
  • 9
  • 24
Nihal Singh
  • 1
  • 2