71

Is there some plugin to fold HTML tags in Vim?
Or there is another way to setup a shortcut to fold or unfold html tags?
I would like to fold/unfold html tags just like I do with indentation folding.

3
  • 2
    set foldmethod=syntax works for HTML Feb 17, 2016 at 16:45
  • @HaiFengKao how do you use that once set?
    – nilon
    Aug 17, 2018 at 13:27
  • 1
    @nilon zc closes a fold. zo opens a fold. Aug 23, 2018 at 15:24

6 Answers 6

97

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

If you find yourself using folds extensively, you could make some handy keybindings for yourself in your .vimrc.

5
  • 3
    Your answer only works on the foldmethod of manual, and cann't work on other foldmethods.
    – soarinblue
    Jul 9, 2016 at 3:52
  • All of this works once I open the file. Once closed and reopened I have to begin all again. Anyway to avoid this? That is: that the file records the collapsed lines so the view is equal from closed to reopened.
    – nilon
    Aug 17, 2018 at 21:45
  • 1
    Two-fold answer from vim-wiki: Folding, and Make views automatic.
    – nilon
    Aug 17, 2018 at 21:58
  • 1
    what is zfat?? what are you talking about?
    – Piliponful
    Aug 19, 2022 at 11:08
  • @Piliponful, zfat: create fold (zf) around tag (at). Turns the entire tag into a fold. Sep 6, 2022 at 19:32
27

If you indent your HTML the following should work:

set foldmethod=indent

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

See help fold-indent for more information:

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.
1
  • Try set fdl=3 to close third-level folds and higher by default; zc still closes the opened folds.
    – JRG
    Aug 22, 2013 at 2:07
9

Folding html with foldmethod syntax, which is simpler.

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

  1. set your fold method to be syntax with the following:

    vim command line :set foldmethod=syntax

    or put the setting in ~/.vim/after/ftplugin/html.vim

    setlocal foldmethod=syntax
    
  2. Also note so far, the default syntax script only folds a multi-line tag itself, not the text between the opening and closing tag.

        So, this gets folded:
    
            <div
                class="foo"
                id="bar"
            > 
    
        And this doesn't
    
            <div>
                <b>text between here</b>
            </div>
    
  3. To get folded between tags, you need extend the syntax script, via the following, best place into ~/.vim/after/syntax/html.vim

    The syntax folding is performed between all but void html elements (those which don't have a closing sibling, like <br>)

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

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:

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

js-beautify and vim fold:

js-beautify and vim fold

2

Add on to answer by James Lai. Initially my foldmethod=syntax so zfat won't work. Solution is to set the foldemethod to manual

:setlocal foldmethod=manual

to check which foldmethod in use,

:setlocal foldmethod?
0

Firstly set foldmethod=syntax and try zfit to fold start tag and zo to unfold tags, It works well on my vim.

1
  • zfit only works with foldmethod=manual.
    – Jim Hessin
    Mar 7 at 3:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.