How do I tidy up an HTML file's indentation in VI?

Question

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.

score 217 · Answer 1 · answered Jan 01 '13 at 22:43

217

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.

answered Jan 01 '13 at 22:43

tylerl

30,197
13
80
113

@tyrel, thanks, but for me is not working.. This is the file's content: http://pastebin.com/gagia8W2 . The file is called `home.html`. I don't have any problem to indent .php files. Here you have my .vimrc: http://pastebin.com/FAJ0MCA9 – tirenweb Apr 24 '13 at 18:24
1

Is there a way I can set this in the .vimrc? I don't want to tell it everytime i open an HTML file that its an HTML file. Thanks a lot for gg,=,G shortcut. Really handy. – zakishaheen Feb 28 '14 at 03:54
1

Note that in `vim 7.4` the default indentation settings will **fail** for this example, as `html`, `body`, and `p` are not indented by default. See [this answer](http://stackoverflow.com/a/19351416/446554). – Cory Klein Jun 09 '14 at 17:07
2

`smartindent` isn't necessary. Also it's tuned for C and C++, I prefer to use more general `autoindent` instead. – Kos Oct 21 '14 at 10:00
It works great with vim7.4. @tylerl is there any way to make this configuration permanent for html files in 7.4? – xaph Nov 27 '14 at 14:03
`:set smartindent` worked well for me in combination with `1G` `v` `G` `$` `=` (go to first line, set visual mode, go to last line, go to end of last line, smart indent). this selects all the text then indents. – connorbode Oct 16 '15 at 13:53
Major caveat: if you run these commands in the vim command line, you need to re-open the file with `:e`. This is not necessary if putting them into `~/.vimrc` – wisbucky Jun 22 '18 at 17:50
A tip for people who like `gg=G`, try `gg=G\`\``, then try `:set nnoremap ii gg=G\`\`` . That way, you just press `\ii` and you re-indent your whole file and go back to precisely where you were (you can also use this, for example, with clang-format for c++... `:set equalprg=clang-format` ... etc...) – Nathan Chappell Oct 03 '19 at 13:10

score 98 · Accepted Answer · edited Dec 04 '14 at 00:23

98

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>

edited Dec 04 '14 at 00:23

Rory O'Kane

29,210
11
96
131

answered May 02 '09 at 20:34

moinudin

134,091
45
190
216

17

Copy paste the html of this questions page into a html file. Open with VIM, type "set smartindent", then "gg=G" and it doesn't fix the indenting of the file. – mmcdole May 02 '09 at 20:40
17

It works for me. set ft=htmlset sigg=G. Formats this page quite well. – Don Reba May 02 '09 at 20:51
Did a bit of fiddling, seems it's actually "filetype indent on" that does the magic. – moinudin May 02 '09 at 20:53
6

+1 verified that "filetype indent on/off" switches the magic on or off. – Wim Coenen May 02 '09 at 21:15
4

Yes, after setting smart indent, filetype=html, and and filetype ident on it worked for me. – mmcdole May 02 '09 at 21:17
This is cool but it doesn't do exactly what I want. I want every new tag to be one level deeper but an under a
is not indented. I'm going to see if I can get what I want from the alternative vim script. Thanks for the answer!

Ken Smith

Apr 29 '11 at 15:02

23

From http://www.chovy.com/web-development/fix-indentation-and-tabs-in-vim/ found that I needed to reload the file with :e after filetype indent on. – Marc Stober May 17 '12 at 01:06

2

Note that in `vim 7.4` the default indentation settings will **fail** for this example, as `html`, `body`, and `p` are not indented by default. See [this answer](http://stackoverflow.com/a/19351416/446554). – Cory Klein Jun 09 '14 at 17:05

vim default indentation is well. I like this. But when I install – alhelal Apr 03 '18 at 02:47

Thanks @DonReba! I had already `set syn=html`, but didn't realise I also needed to `set ft=html` as well. Worked like a charm! – J.M. Janzen Sep 16 '20 at 12:59

score 77 · Answer 3 · edited Oct 29 '19 at 20:00

77

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.

edited Oct 29 '19 at 20:00

the Tin Man

158,662
42
215
303

answered Nov 13 '13 at 17:43

oscaroscar

1,158
11
16

1

I don't believe html is needed, as it defaults to html – lsiebert Dec 25 '14 at 04:35
4

Agreed with you @Isieber. However, I guess it makes it easier to understand the logic and might even be considered good practice by some people. – oscaroscar Mar 06 '15 at 10:38
2

FYI, tidy chokes if the HTML includes SVG (e.g., charts, etc.). – Alex Quinn Jan 24 '17 at 22:49
1

Yes, if the html code is on one line, the vim indent command won't work! – wisbucky Jun 17 '18 at 01:43
What is tidy other than a word in a dictionary? This is not a complete answer without linking to the project. – Bruno Bronosky Aug 15 '18 at 16:34
@BrunoBronosky `tidy` ships with the standard Unix-like OSs. I successfully tried this answer on my Mac without ever having heard of `tidy`. – Raman Shah Feb 10 '19 at 14:43
@RamanShah not without `brew install tidy-html5` you didn't. And that's the point of my comment. Not to say "please do my Googling for me". But to say, this answer needs to be better. And it's still true. Even if I was able to start using Tidy because of this answer. – Bruno Bronosky Feb 10 '19 at 19:07
@BrunoBronosky which system do you use? ``` $ tidy --version HTML Tidy for Mac OS X released on 31 October 2006 - Apple Inc. build 15.18.1 ``` – Raman Shah Feb 11 '19 at 20:09
So I defintely used `tidy` without a Homebrew installation. It's quite possible that typical Linux distros don't come with Tidy, which would be useful info for the present discussion. – Raman Shah Feb 11 '19 at 20:37
Was not installed in my Ubuntu 19 – Juan Lanus Mar 18 '20 at 22:43
I had to surround % with single quotes '%' otherwise the shell was interpreting some of the html. – Jerinaw Dec 30 '20 at 16:00

score 49 · Answer 4 · edited Oct 29 '19 at 20:03

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 "HTML indenting not working in compiled Vim 7.4, any ideas?" and "alternative html indent script" for more information.

score 13 · Answer 5 · answered Aug 15 '20 at 10:58

13

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.

answered Aug 15 '20 at 10:58

Tomas G.

3,784
25
28

:%s/>\s*>\r – Petr Jun 13 '23 at 12:05

score 12 · Answer 6 · edited Oct 29 '19 at 20:05

12

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 have set hlsearch in my vimrc).
Then remove all empty/whitespace-only lines (see "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.

edited Oct 29 '19 at 20:05

the Tin Man

158,662
42
215
303

answered May 01 '13 at 18:56

adam_0

6,920
6
40
52

Neat solution! I modified it to `:%s/>\s*/>\r/g` (added a `g` for global replace, and `\s*` to strip out trailing whitespace). I also added `:%s/\rfoo` would be split like `` and `foo`. – wisbucky Jun 22 '18 at 18:19
Fair point, I have global replace turned on by default which is why it's not in my solution. – adam_0 Jul 27 '18 at 16:13

score 8 · Answer 7 · answered Apr 17 '14 at 13:16

8

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!

answered Apr 17 '14 at 13:16

SimonW

6,175
4
33
39

3

haha, why would you want to use node + js to clean up html in vim, which has had this capability builtin for longer than node even exists... boggles my mind.. – mb21 Jan 31 '17 at 14:52

score 5 · Answer 8 · answered Feb 08 '13 at 01:42

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.

score 4 · Answer 9 · answered May 02 '09 at 20:44

4

Have you tried using the HTML indentation script on the Vim site?

http://www.vim.org/scripts/script.php?script_id=2075

answered May 02 '09 at 20:44

JaredPar

733,204
149
1,241
1,454

+1, I didn't see that. It would be nice if I didn't need to run a script but it looks like this might be the only way. – mmcdole May 02 '09 at 20:45
This script is deprecated now, and a newer version comes with vim (e.g. `/usr/share/vim/vim74/indent/html.vim`). "2014 Jul 04: Vim 7.4.356 or later includes a descendant of this script (the official script is now maintained by Bram and includes massive changes)" – wisbucky Jun 22 '18 at 17:40

chtenb · Answer 10 · 2021-07-14T09:53:46.990

3

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.

edited Jul 14 '21 at 09:53

answered Jun 13 '15 at 15:58

chtenb

14,924
14
78
116

score 1 · Answer 11 · answered Jun 22 '18 at 17:47

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.

score 0 · Answer 12 · answered Apr 15 '22 at 20:39

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

How do I tidy up an HTML file's indentation in VI?

12 Answers12

Linked

Related