如何使用Vim折叠/展开HTML标签

71

有没有Vim插件可以折叠HTML标签?
或者有其他方式设置快捷键来折叠或展开HTML标签吗?
我想像缩进折叠一样折叠或展开HTML标签。


2
"set foldmethod=syntax" 对 HTML 有效。 - Hai Feng Kao
@HaiFengKao 你怎么使用那个一次设置? - nilon
1
@nilon zc 关闭一个折叠。zo 打开一个折叠。 - Hai Feng Kao
6个回答

96

我发现使用 zfat(或同样有效的 zfit)可以很好地在HTML文档中折叠内容。使用 za 可以切换打开或关闭已有的折叠,zR 打开当前文档中的所有折叠,zM 重新启用文档中标记的所有已存在的折叠。

如果您经常使用折叠功能,可以在您的 .vimrc 文件中为自己创建一些方便的键绑定。


3
你的答案只适用于手动折叠方法,不能用于其他折叠方法。 - soarinblue
只要我打开文件,所有这些都有效。一旦关闭并重新打开,我就必须重新开始。有什么方法可以避免这种情况吗?也就是说:文件记录折叠行,以便从关闭到重新打开时视图保持相同。 - nilon
1
vim-wiki的双重答案:折叠自动化视图 - nilon
1
什么是zfat?你在说什么? - Piliponful
@Piliponful,zfat:在标记(at)周围创建折叠(zf)。将整个标记转换为折叠。 - Thiago Chaves

27

如果您对HTML进行缩进,以下内容应该有效:

set foldmethod=indent

我发现这个问题在于,有太多的折叠。为了解决这个问题,我使用zOzc来分别打开和关闭嵌套的折叠。

有关更多信息,请参见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.

尝试将fdl设置为3,以默认关闭第三级折叠及更高级别的折叠;zc仍然可以关闭已打开的折叠。 - JRG

8

使用折叠方法语法折叠HTML,更加简单。

本答案基于 Vim中的HTML语法折叠,作者为@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
    

5
安装 js-beautify 命令(JavaScript版本)。
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 原始 HTML 标记:

http://www.google.com.hk 原始

使用 js-beautify 和 vim 折叠后的效果:

js-beautify 和 vim 折叠


2

补充一下James Lai的回答。 最初我的foldmethod=syntax,所以zfat无法使用。 解决方案是将foldemethod设置为manual。

:setlocal foldmethod=manual

要检查使用的折叠方法,请执行以下操作:

:setlocal foldmethod?

1

首先使用set foldmethod=syntax,然后尝试使用zfit来折叠起始标签和zo展开标签,在我的vim中效果很好。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接