VIでHTMLファイルのインデントを整頓するにはどうすればよいですか?


130

すべて台無しにされた彼の巨大なhtmlファイルのインデントを修正するにはどうすればよいですか?

コードファイルのインデントを修正するために使用する通常の"gg=Gコマンドを試しました。ただし、HTMLファイルでは正しく機能しないようです。それは単にすべてのフォーマットを削除しました。

また:filetype = xml、を設定して、これをだまして、これがXMLファイルであると考えられるかどうかを確認しましたが、効果はありませんでした。

回答:


91

filetype indent on私の内部.vimrcは、VimインデントHTMLは非常にうまくファイル。

a shiftwidthが2の単純な例:

<html>
  <body>
    <p>
    text
    </p>
  </body>
</html>

15
この質問ページのhtmlをコピーしてhtmlファイルに貼り付けます。VIMで開き、「set smartindent」と入力してから「gg = G」と入力すると、ファイルのインデントが修正されません。
mmcdole 2009年

15
わたしにはできる。set ft = html <cr> set si <cr> gg = G <cr>。このページを適切にフォーマットします。
ドン・レバ

5
+1は、「filetype indent on / off」が魔法のオン/オフを切り替えることを確認しました。
Wim Coenen、

4
はい、スマートインデントを設定した後、filetype = htmlとfiletype identが機能しました。
mmcdole 2009年

22
chovy.com/web-development/fix-indentation-and-tabs-in-vimから、ファイルタイプインデントをオンにした後、:eでファイルをリロードする必要があることがわかりました。
Marc Stober、2012年

189

すべてを整える必要のあるものがいくつかあります。これらすべてを1つの場所にまとめます。

次のオプションを設定します。

:filetype indent on
:set filetype=html           # abbrev -  :set ft=html
:set smartindent             # abbrev -  :set si

次に、カーソルをファイルの上部に移動し、最後までインデントします。gg =G
または、インデントするテキストを選択して、インデントするためにクリックします=


@tyrel、ありがとう、でも私にとってはうまくいきません。これはファイルの内容です:pastebin.com/gagia8W2。ファイルはと呼ばれhome.htmlます。.phpファイルのインデントに問題はありません。:ここでは私の.vimrc持っpastebin.com/FAJ0MCA9
ziiweb

1
これを.vimrcに設定する方法はありますか?HTMLファイルを開くたびに、そのHTMLファイルであることを伝えたくありません。gg、=、Gショートカットをありがとう。本当に便利です。
zakishaheen 14

1
中にいることを注意vim 7.4デフォルトのインデント設定がされます失敗として、この例ではhtmlbodyと、pデフォルトではインデントされていません。この回答を参照してください。
Cory Klein

2
smartindent必要ありません。また、CおよびC ++用に調整されているので、autoindent代わりにより一般的なものを使用することを好みます。
Kos

vim7.4でうまく動作します。@tylerl 7.4のhtmlファイルに対してこの設定を永続化する方法はありますか?
xaph 2014年

62

スマートインデントを使用する場合の主な問題は、XML(またはHTML)が1行にある場合、curlリクエストから戻ってくる可能性gg=Gがあるため、うまくいきません。代わりに、VIから直接呼び出されるtidyを使用して良いインデントを経験しました。

:!tidy -mi -xml -wrap 0 %

これは基本的にVIにtidyを呼び出して、行を折り返さずにXMLファイルをクリーンアップして、デフォルトの68文字幅の行に収まるようにすることを示しています。29MBの大きなXMLファイルを処理したところ、5〜6秒かかりました。したがって、HTMLファイルの場合、コマンドは次のようになります。

:!tidy -mi -html -wrap 0 %

コメントで述べたように、tidyは多くの基本的なLinux / MacOSシステムで見つけることができる基本的なツールです。もしあなたがそれを持っていて欲しかったが持っていない場合のためのプロジェクトのページはここにあります:HTML Tidy


1
デフォルトではhtmlになっているので、htmlが必要であるとは思いません
lsiebert

4
@Isieberに同意してください。ただし、これによりロジックの理解が容易になり、一部の人々は優れたプラクティスと見なすこともできると思います。
oscaroscar 2015年

2
ちなみに、HTMLにSVG(グラフなど)が含まれていると、整頓されたチョークになります。
Alex Quinn

1
はい、htmlコードが1行にある場合、vim indentコマンドは機能しません!
wisbucky

辞書の単語以外の整頓とは何ですか?これは、プロジェクトにリンクしないと完全な答えにはなりません。
Bruno Bronosky、2018

49

tylerlが上記で説明したように、以下を設定します。

:filetype indent on
:set filetype=html
:set smartindent

しかし、ノートVIM 7.4 HTMLタグであることhtmlheadbody、およびいくつかの他はされないデフォルトではインデント。HTMLファイルのほぼすべてのコンテンツがこれらのタグに該当するため、これは理にかなっています。本当にしたい場合は、これらのタグを次のようにインデントすることができます。

:let g:html_indent_inctags = "html,body,head,tbody" 

詳細については、「コンパイルされたVim 7.4でHTMLインデントが機能しない、なんらかのアイデア」および「代替のHTMLインデントスクリプト」を参照してください。


これは私の本の勝者です!WindowsでVim 7.4を使用すると、これは素晴らしい働きをします!:D
マイケルJ

12

これは、「醜い」HTMLを適切な間隔で開くためにうまく機能する私のソリューションです。

vim fileIn.html -c "set sw=2 | %s/>/>\r/ | execute 'normal gg=G' | set nohlsearch | g/^\\s*\$/d"
  • sw私のデフォルトは4であるため、コマンドは、HTMLのために高すぎる、です。
  • 次の部分では、各要素(>)の後に改行を追加します(Vimは改行であると考えています)。
  • 次に、でファイル全体をインデントし直します=
  • 次に、強調表示を解除します>set hlsearchvimrcにあるため)。
  • 次に、すべての空/空白のみの行を削除します(詳細については、「Vimの空白行の削除」を参照してください。これもシェルにあるため、二重にエスケープされています)。

| wq! fileOut.htmlVimにまったく入りたくない場合は、最後に追加して、ファイルをクリーンアップすることもできます。


きちんとした解決策!私はそれを変更しました:%s/>\s*/>\r/ggグローバル置換のためにa を追加し、\s*末尾の空白を削除しました)。また:%s/</\r</g、開き角括弧の前に改行を追加することも追加しました。それ以外の場合、のようなタグ<td>foo</td><td>およびのように分割されfoo</td>ます。
wisbucky

公平に言えば、デフォルトでグローバル置換がオンになっているため、私のソリューションには含まれていません。
adam_0

7

私はこのスクリプトを使用します:https : //github.com/maksimr/vim-jsbeautify

上記のリンクには、すべての情報があります。

  1. インストール
  2. 構成(最初の例からコピー)
  3. 走る :call HtmlBeautify()

仕事は美しくします!


3
はは、なぜnode + jsを使用してvimでhtmlをクリーンアップしたいのですか。この機能はnodeが存在するよりも長く組み込まれています...
mb21

4

VimサイトでHTMLインデントスクリプトを使用してみましたか?


+1、見なかった。スクリプトを実行する必要がなかったらいいのですが、これが唯一の方法のようです。
mmcdole 2009年

このスクリプトは現在非推奨であり、新しいバージョンにはvim(例:)が付属してい/usr/share/vim/vim74/indent/html.vimます。「2014年7月4日:Vim 7.4.356以降には、このスクリプトの子孫が含まれています(公式スクリプトは現在Bramによって保守されており、大幅な変更が含まれています)」
wisbucky

4

ここでは、インデントを設定するヘビーウェイトソリューションに加えて、編集中に必ずしも気にする必要のないすべてのHTMLのきれいな印刷を紹介します。

まず、Tidyをダウンロードします。バイナリをパスに追加して、どこからでも呼び出せるようにしてください。

次に、お気に入りのHTMLフレーバーを記述する構成ファイルを作成します。ドキュメントはTidyにとって素晴らしいものではありませんが、概要すべてのオプションのリストを次に示します。これが私の設定ファイルです:

bare: yes
break-before-br: no
clean: yes
drop-proprietary-attributes: yes
fix-uri: yes
indent-spaces: 4
indent: yes
logical-emphasis: yes
markup: yes
output-xhtml: yes
quiet: yes
quote-marks: yes
replace-color: yes
tab-size: 4
uppercase-tags: no
vertical-space: yes
word-2000: yes
wrap: 0

これをフォルダー(vimfilesの下)に保存tidyrc_html.txtしますftplugin

もう1つのファイル:次の行も追加(または作成)html.vimftpluginます。

map <leader>tidy :%! tidy -config ~/vimfiles/ftplugin/tidyrc_html.txt <CR>

これを使用するには、HTMLファイルを開いてと入力し/tidyます。(それ/<leader>鍵です。)

よし!決して迅速な解決策ではありませんが、今では、これらの巨大なめちゃくちゃになったHTMLファイルを編集するための設備が少し良くなっています。



0

通常の「gg = G」コマンドを試しました。これは、コードファイルのインデントを修正するために使用するものです。ただし、HTMLファイルでは正しく機能しないようです。それは単にすべてのフォーマットを削除しました。

vimのautoformat / indent gg=Gが「壊れている」ように見える場合(すべての行を左インデントするなど)、おそらくインデントプラグインが有効になっていないか、ロードされていません。悪いインデントをするだけでなく、本当にエラーメッセージを出すべきです。そうでなければ、ユーザーはオートフォーマット/インデント機能が実際にかなり良いのにひどいと思っているだけです。

インデントプラグインが有効/ロードされているかどうかを確認するには、を実行し:scriptnamesます。.../indent/html.vimがリストにあるかどうかを確認します。そうでない場合、それはプラグインがロードされていないことを意味します。その場合は、次の行を追加し~/.vimrcます。

filetype plugin indent on

ファイルを開いて実行すると:scriptnames、表示されるはず.../indent/html.vimです。次にを実行するgg=Gと、正しいオートフォーマット/インデントが実行されます。(ただし、改行は追加されないため、すべてのHTMLコードが1行にある場合は、インデントされません)。

注:の:filetype plugin indent on代わりにvimコマンドラインで実行している場合は~/.vimrc、ファイルを再度開く必要があります:e

また、あなたが心配する必要はありませんautoindentし、smartindent設定、彼らはこのためには関係ありません。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.