HTMLファイルを折りたたむ by Vim

2006年11月21日 オフ 投稿者: KYO
Table of Contents

今日、仕事でCSSデザインのページをスクリプト側からCMS的に更新するものをメンテナンス。
その時、出た「Validateエラー」の対処方法。
忘れることは無いけど、メモ代わりに。。。。


HTMLを書く場合、< table >デザインでもCSSデザインでもそうなんですが、タグの階層が深くなると、閉じタグを探すのが大変になったりします。
< table >デザインであれば、インデントを付けていけばおおよそ対処可能ですが。
CSSデザインのファイルをVimで扱えば楽。
ホントは・・・DreamWeaverでも可能ですが。
このソフト・・・嫌いなので使ってません。
デバッグも出来るので便利なんですけど、UIがうるさい感じがして^^;
で・・・いつも使ってるVimで。
ここでは、Vimの機能である「折りたたみ(Folding)」と「置換コマンド」を利用。
※改行コードが絡むのでもしかすると・・・「^@」などが行末に表示されるかも。
方法:
■HTMLファイルを開く。
コメントを使用するため、1行目と最終行にPHPタグを挿入。
※ここでは、Vimに折りたたみをさせるため擬似的にPHP化。
1 2  3
….
n
x ?>
■開始タグ、終了タグの前後に「折りたたみ」用のコメントを一括挿入(置換)
Vimコマンド :%s/

Vimコマンド :%s/<\/div/\r\/\/{{{end div\r<\/div/
この2つの置換コマンドを実行させれば、OK
■折りたたみを操作
・[ zo ]でカーソル行の展開
・[ zc ]でカーソル行を折りたたみ
・[ zO ]で全ての折りたたみを展開
・[ zC ]で全ての行を折りたたみ
■確認方法
全てを折りたたんだ状態から、展開しながら見ていくだけ。
インデント関係が崩れるので、その部分は別途作業が必要。
⇒ 一括でインデントする場合(整形)、Vimのコマンドから利用する