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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7148270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 10:11:08  来源:igfitidea点击:

How to fold/unfold HTML tags with Vim

htmlvimfoldingfold

提问by nsbm

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.

是否有一些插件可以在 Vim 中折叠 HTML 标签?
或者还有另一种方法来设置折叠或展开 html 标签的快捷方式?
我想折叠/展开 html 标签,就像我对缩进折叠一样。

回答by James Lai

I have found zfat(or, equally, zfit) works well for folding with HTML documents. zawill toggle (open or close) an existing fold. zRopens all the folds in the current document, zMeffectively re-enables all existing folds marked in the document.

我发现zfat(或同样地,zfit)适用于折叠 HTML 文档。za将切换(打开或关闭)现有折叠。zR打开当前文档中的所有折叠,zM有效地重新启用文档中标记的所有现有折叠。

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

如果你发现自己广泛使用折叠,你可以在你的 .vimrc.

回答by ihohbeto

If you indent your HTML the following should work:

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

set foldmethod=indent

The problem with this, I find, is there are too manyfolds. To get around this I use zOand zcto open and close nested folds, respectively.

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

See help fold-indentfor more information:

有关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.

回答by soarinblue

Folding html with foldmethod syntax, which is simpler.

用foldmethod语法折叠html,比较简单。

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

这个答案基于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
    
  1. 使用以下内容将您的 fold 方法设置为语法:

    vim 命令行 :set foldmethod=syntax

    或将设置放入 ~/.vim/after/ftplugin/html.vim

    setlocal foldmethod=syntax
    
  2. 还请注意,默认语法脚本只折叠多行标签本身,而不是开始和结束标签之间的文本。

        So, this gets folded:
    
            <div
                class="foo"
                id="bar"
            > 
    
        And this doesn't
    
            <div>
                <b>text between here</b>
            </div>
    
  3. 要在标签之间折叠,您需要扩展语法脚本,通过以下,最好的地方到 ~/.vim/after/syntax/html.vim

    语法折叠在除 void html 元素之外的所有元素之间执行(那些没有关闭的兄弟元素,例如<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
    

回答by kainan

Install js-beautifycommand(JavaScript version)

安装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.hkorignal html:

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

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

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

js-beautify and vim fold:

js-beautify 和 vim 折叠:

js-beautify and vim fold

js-beautify 和 vim 折叠

回答by ken

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

添加由 James Lai 回答。最初我的 foldmethod=syntax 所以 zfat 不起作用。解决方法是将foldemethod设置为manual

:setlocal foldmethod=manual

to check which foldmethod in use,

检查正在使用的折叠方法,

:setlocal foldmethod?

回答by Ryan Chou

Firstly set foldmethod=syntaxand try zfitto fold start tag and zoto unfold tags, It works well on my vim.

首先set foldmethod=syntax,尝试zfit折叠开始标签并zo展开标签,它在我的 vim 上运行良好。