How do I tidy up an HTML file's indentation in VI?
HtmlVimViIndentationHtml Problem Overview
How do I fix the indentation of his huge html files which was all messed up?
I tried the usual "gg=G
command, which is what I use to fix the indentation of code files. However, it didn't seem to work right on HTML files. It simply removed all the formatting.
I also tried setting :filetype = xml
, to see if tricking it into thinking this was an XML file would help but it still didn't do it.
Html Solutions
Solution 1 - Html
There's several things that all need to be in place. Just to summarize them all in one location:
Set the following option:
:filetype indent on
:set filetype=html # abbrev - :set ft=html
:set smartindent # abbrev - :set si
Then either move the cursor to the top of the file and indent to the end: gg
=G
Or select the desired text to indent and hit = to indent it.
Solution 2 - Html
With filetype indent on
inside my .vimrc
, Vim indents HTML files quite nicely.
Simple example with a shiftwidth
of 2:
<html>
<body>
<p>
text
</p>
</body>
</html>
Solution 3 - Html
The main problem using the smart indentation is that if the XML (or HTML) sits on one line as it may end up coming back from a curl request then gg=G
won't do the trick. Instead I have just experienced a good indentation using tidy directly called from VI:
:!tidy -mi -xml -wrap 0 %
This basically tells VI to call tidy to cleanup an XML file not wrapping the lines to make them fit on the default 68 characters wide lines. I processed a large 29MB XML file and it took 5 or 6 seconds. I guess for an HTML file the command should therefore be:
:!tidy -mi -html -wrap 0 %
As mentioned in comments, tidy
is a basic tool which you could find on many base Linux / MacOS systems. Here is the projet's page in case you wish you had it but don't: HTML Tidy.
Solution 4 - Html
As tylerl explains above, set the following:
:filetype indent on
:set filetype=html
:set smartindent
However, note that in vim 7.4 the HTML tags html
, head
, body
, and some others are not indented by default. This makes sense, as nearly all content in an HTML file falls under those tags. If you really want to, you can get those tags to be indented like so:
:let g:html_indent_inctags = "html,body,head,tbody"
See "https://stackoverflow.com/questions/19323607/html-indenting-not-working-in-compiled-vim-7-4-any-ideas" and "alternative html indent script" for more information.
Solution 5 - Html
This is my solution that works nicely for opening "ugly" HTML in a nicely spaced way:
vim fileIn.html -c "set sw=2 | %s/>/>\r/ | execute 'normal gg=G' | set nohlsearch | g/^\\s*\$/d"
- The
sw
command is because my default is 4, which is too high for HTML. - The next part adds a newline (Vim thinks it's a carriage return, sigh) after each element (
>
). - Then re-indent the entire file with
=
. - Then unhighlight
>
(since I haveset hlsearch
in my vimrc). - Then remove all empty/whitespace-only lines (see "https://stackoverflow.com/questions/706076/vim-delete-blank-lines" for more, also this is double-escaped because it's in the shell).
You can even add | wq! fileOut.html
to the end if you don't want to enter Vim at all, but just clean up the file.
Solution 6 - Html
I use this script: https://github.com/maksimr/vim-jsbeautify
In the above link you have all the info:
- Install
- Configure (copy from the first example)
- Run
:call HtmlBeautify()
Does the job beautifully!
Solution 7 - Html
None of the answers worked for me because all my HTML was in a single line.
Basically you need first to break each line with the following command that substitutes ><
with the same characters but with a line break in the middle.
:%s/></>\r</g
Then the command
gg=G
will indent the file.
Solution 8 - Html
Have you tried using the HTML indentation script on the Vim site?
Solution 9 - Html
Here's a heavy-weight solution that gets you indenting, plus all the HTML pretty-printing you don't necessarily want to care about while you're editing.
First, download Tidy. Make sure you add the binary to your path, so you can call it from any location.
Next, create a config file describing your favorite HTML flavor. Documentation is not great for Tidy, but here's an overview, and a list of all the options. Here's my config file:
bare: yes
break-before-br: no
clean: yes
drop-proprietary-attributes: yes
fix-uri: yes
indent-spaces: 4
indent: yes
logical-emphasis: yes
markup: yes
output-xhtml: yes
quiet: yes
quote-marks: yes
replace-color: yes
tab-size: 4
uppercase-tags: no
vertical-space: yes
word-2000: yes
wrap: 0
Save this as tidyrc_html.txt
in your ftplugin
folder (under vimfiles).
One more file: add the following line to (or create) html.vim
, also in ftplugin
:
map <leader>tidy :%! tidy -config ~/vimfiles/ftplugin/tidyrc_html.txt <CR>
To use it, just open an HTML file, and type /tidy
. (That /
is the <leader>
key.)
There you go! Not a quick solution, by any means, but now you're a bit better equipped for editing those huge, messed-up HTML files.
Solution 10 - Html
You can integrate both tidy and html-beautify automatically by installing the plugin vim-autoformat. After that, you can execute whichever formatter is installed with a single keystroke.
Solution 11 - Html
> I tried the usual "gg=G" command, which is what I use to fix the indentation of code files. However, it didn't seem to work right on HTML files. It simply removed all the formatting.
If vim's autoformat/indent gg=G
seems to be "broken" (such as left indenting every line), most likely the indent plugin is not enabled/loaded. It should really give an error message instead of just doing bad indenting, otherwise users just think the autoformat/indenting feature is awful, when it actually is pretty good.
To check if the indent plugin is enabled/loaded, run :scriptnames
. See if .../indent/html.vim
is in the list. If not, then that means the plugin is not loaded. In that case, add this line to ~/.vimrc
:
filetype plugin indent on
Now if you open the file and run :scriptnames
, you should see .../indent/html.vim
. Then run gg=G
, which should do the correct autoformat/indent now. (Although it won't add newlines, so if all the html code is on a single line, it won't be indented).
Note: if you are running :filetype plugin indent on
on the vim command line instead of ~/.vimrc
, you must re-open the file :e
.
Also, you don't need to worry about autoindent
and smartindent
settings, they are not relevant for this.
Solution 12 - Html
Tagging onto wisbucky's answer, here were my steps to diagnose and fix the basic use of gg=G
for indenting xml:
Detecting that there's a problem:
gg=G
(says 115 lines indented but actually all lines are still at left edge)
:se indentexpr?
indentexpr=
:scriptnames
(look for one ending in /indent/xml.vim but it's not there)
(look in system folder to make sure /usr/share/vim/vim81/indent/xml.vim exists --- it does)
Fixing the problem:
:se ft?
filetype=xml
:filetype
filetype detection:ON plugin:OFF indent:OFF
:filetype indent on
:filetype
filetype detection:ON plugin:OFF indent:ON
:e
:se indentexpr?
indentexpr=XmlIndentGet(v:lnum, 1)
gg=G
The :se indentexpr?
sanity check is from https://stackoverflow.com/a/11660992/115246