How do I reformat HTML code using Sublime Text 2?
Solution 1:
You don't need any plugins to do this.
Just select all lines (CTRL+A) and then from the menu select Edit → Line → Reindent.
This will work if your file is saved with an extension that contains HTML like .html
or .php
.
If you do this often, you may find this key mapping useful:
{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": { "single_line": false } }
If your file is not saved (e.g. you just pasted in a snippet to a new window), you can manually set the language for indentation by selecting the menu View → Syntax → language of choice
before selecting the reindent option.
Solution 2:
There are half a dozen or so ways to format HTML in Sublime. I've tested each of the most popular plugins (see the writeup I did on my blog for full details), but here's a quick overview of some of the most popular options:
Reindent command
Pros:
- Ships with Sublime, so no plugin install needed
Cons:
- Doesn't delete extra blank lines
- Can't handle minified HTML, lines with multiple open tags
- Doesn't properly format
<script>
blocks
Tag
Pros:
- Supports ST2/ST3
- Removes extra blank lines
- No binary dependencies
Cons:
- Chokes on PHP tags
- Doesn't handle
<script>
blocks correctly
HTMLTidy
Pros:
- Handles PHP tags
- Some settings to tweak formatting
Cons:
- Requires PHP (falls back to web service)
- ST2 only
- Abandoned?
HTMLBeautify
Pros:
- Supports ST2/ST3
- Simple and no binaray dependencies
- Support for OS X, Win and Linux
Cons:
- Chokes a bit with inline comments
- Does expand minimized/compressed code
HTML-CSS-JS Prettify
Pros:
- Supports ST2/ST3
- Handles HTML, CSS, JS
- Great integration with Sublime's menus
- Highly customizable
- Per-project settings
- Format on save option
Cons:
- Requires Node.js
- Not great for embedded PHP
Which is best?
HTML-CSS-JS Prettify is the winner in my book. Lots of great features, not much to complain about.
Solution 3:
The only package I've been able to find is Tag.
You can install it using the package control. https://sublime.wbond.net
After installing package control. Go to package control (Preferences -> Package Control) then type install
, hit enter. Then type tag
and hit enter.
After installing Tag, highlight the text and press the shortcut Ctrl+Alt+F.
Solution 4:
I recommend this plugin: HTML/CSS/JS Prettify, It really works.
After the installation, just select the code and press CTRL+SHIFT+H.
Done!