Web屋のためのVim設定・Tipsまとめ 2/2

「Web屋のためのVim設定・Tipsまとめ 1/2」からの続き。

Vimを使ったHTMLとCSSの編集について、さらに関係しそうな事項を紹介します。

HTML編集でもよく使うVim基本機能

=キーで自動インデント

HTMLのインデントが崩れているときは、範囲選択して=キーを押せば、自動的にタグの入れ子を認識してインデント調整されます。

ばらばら→範囲選択→「=」ですっきり

カレント行だけインデント調整したい場合はノーマルモードで==とすれば可能です。

なお、手動でインデントを上げ下げするには、ノーマルモードでは>と<、インサートモードでは<C-t>と<C-d>が使えます。

gfで相対パスのリンク先ファイルを開く

head内のlinkやdoby内のaタグから相対パスでリンクしているファイルは、ファイル名にカーソルを合わせてgfと入力すれば対象のファイルがVimで開きます。

記号の一括エスケープ

「<」「>」などの記号を本文に含める場合は実態参照(「<」「>」など)にエスケープする必要がありますが、この変換を自動化できる便利なスクリプトが公開されています。

2の実装例を見つけたので、お好きな方を。

Tanablog: HTML のスペシャルキャラクタをエスケープする Vim スクリプトを書いた
 vim で HTML文字実体参照の変換を行うスクリプト : Serendip - Webデザイン・ホームページ制作

CSS内のカラーコード色表示

文字で書いたカラーコードを、その色自体を背景色としてカラー強調表示してくれるスクリプトがあります。HTMLのHEAD内に記述したスタイルにも対応していて便利。

カラーコードの強調表示

css_color.vim - CSS color preview : vim online
ダウンロードはこちらから。
[Vim7]CSSで使っている色を分かりやすくする | 東京嫉妬
以前はこっちのものを使っていたんですが、現在は旧式扱いのようなので注意。

HTML構文チェック

HTML記述のうっかりミスはありがちです。VimではHTML Tidyを使ってその場でHTMLの構文をチェックすることができます。(ある程度の間違いはHTML Tidyに自動修正させることも可能)

やり方は以下の参考ページに分かりやすく書かれているので、そちらを参照して下さい。

なおHTML Tidyは、例えばCドライブ直下にbinフォルダを作ってその中に実行ファイルを配置し、このフォルダを環境変数「PATH」に追加しておけば使えるようになります。

参考ページ

鳥獣保護区 | Vim で HTML の文法チェック
HTML Tidyのバイナリは「Other Builds」の一番上にあるものが新しそう。
Cleanup your HTML - Vim Tips Wiki - a Wikia wiki
上の記事内で「文法チェックの方法」としてリンクされているVimTipsのページは現在移動しており、新しいURLはたぶん↑ここ。
Vim と HTML Tidy - KBDAHOLIC - やぬすさんとこ
HTML Tidyに自動修正させる場合の設定例。

:makeでチェック結果のメッセージを表示した後は、:cwでQuickFixを呼び出してエラー箇所の一覧表示や次エラー箇所への移動などが可能になります。(このあたりの操作はrubyのシンタックスエラー確認などと同じ)

HTML構文のエラー箇所をQuickFixで一覧表示

残念ながら標準ではeuc-jp以外の文字コードで日本語を含むファイルは上手く処理できませんでした。オプション指定が必要かも。

ちなみに、:make実行時に表示されるHTML Tidyのメッセージは、一つ目のエラーしか表示されないようで、ほとんど不要。どうせならメッセージ自体が表示されないようにしたいところですが、方法はよく分かりません。

HTML.vim

今回の連載ではVimの比較的汎用的な機能を使ってHTMLとCSSの記述を支援する方法を紹介してきました。しかし、実は他にもHTMLの編集に特化したプラグインとしてHTML.vimというスクリプトが存在します。

HTML/XHTML Editing in Vim

私は使ったことがないのですが、興味のある方はリンク先のページをたどって調べてみて下さい。

参考ページ

HTML.vimを試す。 - YKMbPP
インサートモード時のキーワード展開がいろいろ定義されている様子。
Nishiaki’s Log: HTML.vimでVimでのHTML編集が楽になる
評判良さそうです。

その他

以下は、今回の調査でカバーしきれなかった部分。とりあえずリンクだけ載せておきます。

Vim: Editing HTML Files
英語で色々書いてあります。英語苦手なので(^^;
closetag.vim : HTML／XML 閉じタグを挿入 ― 名無しのvim使い
実はautocomplpop.vimを使うと閉じタグも賢く補完してくれるので、それほど必要にはならないかも。
autocomplpop.vimでJavaScriptのomni補完をできるようにする - 素人がプログラミングを勉強するブログ
JavaScriptをよく書く人はチェックされてみては。

参考書籍

入門vi 第6版

もしVimに興味を持ったら、まずはこの本を読んでみて下さい。オライリーなのに薄くて読みやすい、とてつもない良書です。あと、私もVim入門的な記事を書いているので、よければ併せてどうぞ→Vim初心者的導入メモ 1/3 「使い方」編

ユニバーサルHTML/XHTML

正しいHTMLを書きたいと思うならばこの本は必読。HTML本来の役割を理解することができる名著です。Amazonに在庫がないようですが、まさか絶版？

連載一覧