How to collapse / expand HTML tags with Vim

Question

Is there any plugin for bending HTML tags in Vim?
Or is there another way to set up a shortcut to collapse or expand html tags?
I would like to fold / expand html tags in the same way as indented.

Answer 1

I found zfat (or equally zfit ) works well for folding with HTML documents. za will switch (open or close) the existing fold. zR opens all the folds in the current document, zM effectively re-includes all existing folds marked in the document.

If you use creases heavily, you can make some handy keys for yourself in your .vimrc.

Answer 2

If you backtrack from your HTML, then the following should work:

 set foldmethod=indent 

The problem with this, I think there are too many folds. To get around this, I use zO and zc to open and close nested folds, respectively.

For more information, see help fold-indent :

 The folds are automatically defined by the indent of the lines. The foldlevel is computed from the indent of the line, divided by the 'shiftwidth' (rounded down). A sequence of lines with the same or higher fold level form a fold, with the lines with a higher level forming a nested fold. The nesting of folds is limited with 'foldnestmax'. Some lines are ignored and get the fold level of the line above or below it, whichever is lower. These are empty or white lines and lines starting with a character in 'foldignore'. White space is skipped before checking for characters in 'foldignore'. For C use "#" to ignore preprocessor lines. When you want to ignore lines in another way, use the 'expr' method. The indent() function can be used in 'foldexpr' to get the indent of a line. 

Answer 3

Install js-beautify command (JavaScript version)

 npm -g install js-beautify wget --no-check-certificate https://www.google.com.hk/ -O google.index.html js-beautify -f google.index.html -o google.index.bt.html 

http://www.google.com.hk orignal html:

js-beautify and vim fold:

Answer 4

Add an answer to reply James Lye. Originally my foldmethod = syntax, so zfat will not work. The solution is to set the foldemethod to manual

 :setlocal foldmethod=manual 

to check which folding method is used,

 :setlocal foldmethod? 

Answer 5

Foldable html with foldmethod syntax, which is simpler.

This answer is based on HTML syntax in vim . by @Ingo Karcat.

• set your fold method as syntax with the following:

  :set foldmethod=syntax command line :set foldmethod=syntax

  or set the value to ~/.vim/after/ftplugin/html.vim

   setlocal foldmethod=syntax 

• Also note that the default syntax of the script only resets the multi-line tag, not the text between the open and close tags.

    So, this gets folded: <div class="foo" id="bar" > And this doesn't <div> <b>text between here</b> </div> 

• To collapse between tags, you need to extend the script syntax, through the following, the best place in ~/.vim/after/syntax/html.vim

  Syntax folding is performed between all elements except void html (those that do not have a closing brother, for example <br> )

   syntax region htmlFold start="<\z(\<\(area\|base\|br\|col\|command\|embed\|hr\|img\|input\|keygen\|link\|meta\|para\|source\|track\|wbr\>\)\@![az-]\+\>\)\%(\_s*\_[^/]\?>\|\_s\_[^>]*\_[^>/]>\)" end="</\z1\_s*>" fold transparent keepend extend containedin=htmlHead,htmlH\d 

Answer 6

First set foldmethod=syntax and try zfit to reset the start tag and zo to expand the tags, it works well on my vim.