如何使用Vim折疊/展開HTML標簽

Question

是否有一些插件可以在Vim中折疊HTML標簽？
或者還有另一種方法來設置折疊或展開html標簽的快捷方式？
我想折疊/展開html標簽，就像我用縮進折疊一樣。

Answer 1

我發現zfat （或者同樣， zfit ）適用於HTML文檔折疊。 za將切換（打開或關閉）現有折疊。 zR打開當前文檔中的所有折疊， zM有效地重新啟用文檔中標記的所有現有折疊。

如果您發現自己廣泛使用折疊，您可以在.vimrc.為自己制作一些方便的鍵綁定.vimrc.

Answer 2

如果您縮進HTML，則以下內容應該有效：

set foldmethod=indent

我發現，這個問題是有太多的折疊。 為了解決這個問題，我使用zO和zc分別打開和關閉嵌套折疊。

有關更多信息，請參閱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

使用foldmethod語法折疊html，這更簡單。

這個答案基於vim中的HTML語法折疊 。 作者是@Ingo Karcat。

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\\>\\)\\@![az-]\\+\\>\\)\\%(\\_s*\\_[^/]\\?>\\|\\_s\\_[^>]*\\_[^>/]>\\)" end="</\\z1\\_s*>" fold transparent keepend extend containedin=htmlHead,htmlH\\d 

Answer 4

安裝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 orignal html：

js-beautify和vim fold：

Answer 5

繼續回答James Lai的回答。 最初我的foldmethod =語法，所以zfat將無法正常工作。 解決方案是將foldemethod設置為手動

:setlocal foldmethod=manual

檢查使用哪種折疊方法，

:setlocal foldmethod?

Answer 6

首先set foldmethod=syntax ，並嘗試zfit折疊開始標記和zo展開標簽，它運作良好，我的活力。