web-dev-qa-db-ja.com

VimでHTMLタグを折りたたみ/展開する方法

VimでHTMLタグを折りたたむプラグインはありますか？
または、HTMLタグを折りたたみまたは展開するためのショートカットを設定する別の方法がありますか？
インデントの折りたたみと同様に、htmlタグを折りたたみ/展開したいと思います。

htmlvimfoldingfold
56
nsbm

zfat（または同様にzfit）がHTMLドキュメントで折り畳むのにうまく機能することがわかりました。 zaは、既存のフォールドを切り替えます（開いたり閉じたりします）。 zRは現在のドキュメント内のすべての折り畳みを開き、zMはドキュメント内でマークされた既存のすべての折り畳みを有効にします。

ひだを広範囲に使用していることに気付いた場合は、.vimrc.

76
James Lai

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.
18
ihohbeto

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

インストール js-beautify command（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 orignal

js-beautifyとvim fold：

js-beautify and vim fold

3
kainan

ジェームス・ライによる回答に追加してください。最初はfoldmethod = syntaxなので、zfatは機能しません。解決策はfoldemethodをmanualに設定することです

:setlocal foldmethod=manual

使用中のfoldmethodを確認するには、

:setlocal foldmethod?
2
ken

まずset foldmethod=syntaxとzfitを使って開始タグを折りたたみ、zoを使ってタグを展開します。これは私のvimでうまく機能します。

1
Ryan Chou