jump to navigation

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

2009-01-24 18:28 Posted by
nase
in : ウェブ
cloud.jpg

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

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

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

=キーで自動インデント

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

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

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

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

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

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

記号の一括エスケープ

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

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

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

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

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

vim_html_ss7.gif
カラーコードの強調表示

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のシンタックスエラー確認などと同じ)

vim_html_ss8_s.gif
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版 入門vi 第6版

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


ユニバーサルHTML/XHTML ユニバーサルHTML/XHTML

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


連載一覧

Comments»

1. ゲスト - 2009-7-1

「CSS内のカラーコード色表示」の項目が上手くいきません><
下記のページを見てもcss.vimをどこに置いてどうすればいいのか。さっぱりです。。教えていただけないでしょうか。
http://d.hatena.ne.jp/y_yanbe/20080611/1213172745

2. nase - 2009-7-1

css_color.vimは通常、環境変数HOMEで指定したディレクトリ以下のvimfiles/after/syntax/css.vimの場所に配置します。

環境変数HOMEを指定していない場合はVimインストールディレクトリのruntimeフォルダ以下after/syntax/css.vimの場所に置いても同様に動作すると思います。

環境変数HOMEを指定する方が、カスタマイズ部分を分けて管理できるのでおすすめです。こんな回答で大丈夫でしょうか?(^^;

3. nase - 2009-7-1

css_color.vimのinstall detailsには.vimと書かれていますが、これはUnix/Linux環境の話ですね。
http://vimwiki.net/?%27runtimepath%27


*Comments and trackbacks will appear after it is approved by the administrator.