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

今回はVimでHTMLやCSSを編集する際に便利な小技についてまとめておきます。

特にHTMLの編集は<と>の入力が煩雑(Shiftキー＋右手薬指or小指を多用)なこともあり、面倒に感じている人も多いのではないでしょうか。

Vimでは、標準機能(と、プラグインひとつ)を利用するだけで、極力<と>の入力を減らしてHTMLを記述していくことができます。

htmlファイル新規作成時のテンプレート

まず、html/head/bodyなどのお決まりのタグはテンプレートを作り、.htmlファイルの新規作成時に自動的に読み込まれるようにしてしまいましょう。

入力するよりも消すほうが簡単なので、テンプレートにはいろいろ詰め込んでおくと便利です。

お手軽テンプレート - new Error(”exeception throw”)
テンプレートの適用方法はこちらに分かりやすく書かれています。

例えばテンプレートはこんな感じで「$HOME/vimfiles/templates/skel.html」に保存。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="./style.css" />
  <script type="text/javascript" src="./jquery-1.2.6.min.js"></script>
  <style type="text/css">
    <!--
    -->
  </style>
  <script type="text/javascript">
    //<![CDATA[
    //]]>
  </script>
</head>
<body>

</body>
</html>

vimrcに、拡張子.htmlでファイルを作成したときこのテンプレートが読み込まれるよう設定を追加します。

augroup SkeletonAu
    autocmd!
    autocmd BufNewFile *.html 0r $HOME/vimfiles/templates/skel.html
augroup END

設定追加後、vimを再起動して「:e 任意のファイル名.html」でファイルを作成すれば動作確認できるはず。

htmlタグ編集を効率化

テキストオブジェクトを活用したタグ編集

では本題。htmlタグを編集するときに便利になるのが、vim7の標準機能であるテキストオブジェクトです。

テキストオブジェクトは”"や()などの記号で囲まれた文字列の「囲いの中(i)」や「囲い全体(a)」を選択して処理できる機能で、タグにも対応しています。

ここではHTMLの編集でよく使いそうなコマンドだけ紹介するので、より詳しく知りたい人は「:h text-object」を参照して下さい。

vim の text-object をより便利に使えるプラグイン - surround.vim - 川o・-・）＜2nd life
テキストオブジェクトを扱う上ではこのプラグインがほぼ必須。「囲い自体(s)」が編集可能になります。是非入れておきましょう。(冒頭「プラグインひとつ」と書いたのはこれのこと)
vim/plugin/surround - EthnaWiki
こちらもテキストオブジェクトとsurround.vimの分かりやすい説明。

カレント行をタグで囲う

ノーマルモードでysstと入力すると、コマンド行にフォーカスが移り、タグ名の入力待ちになります。(yssはsurround.vimのカレント行を囲い込むコマンド。tはタグの意)

以下は「タイトル」と入力された行でysstを実行したところ。

タグ名を入力してEnterキーで確定します

カレント行が指定したタグで囲まれました

ySStとした場合は改行付きのタグで囲まれます。

改行付きのpタグで囲んだところ

なお、インサートモードだけでHTMLタグを記述したい場合は、<C-G>s(または<C-G>S)に続けて「<タグ名」を入力すれば閉じタグを含めた空要素が入力できます。お好みで。

選択範囲をタグで囲う

行内の一部分だけをタグで囲いたい場合は、範囲選択したビジュアルモードの状態でstを入力します。

するとこちらもタグ名の入力待ちになるので、あとは囲みたいタグ名を入力して確定するだけ。

タグを削除する

タグの削除は、ノーマルモードでタグで囲まれた部分にカーソルを移し、dstと入力します。

ちなみに、タグを含む要素全体の削除はdatと入力して行います。

タグを置き換える

タグの置き換えは、ノーマルモードでタグで囲まれた部分にカーソルを移し、cstと入力します。

タグ名の入力待ちになるので、置き換え先のタグ名を入力(このとき、はじめに「<」の入力が必要なので注意)して確定します。

autocomplpop.vimでHTMLとCSSの賢い補完

htmlタグの属性や、cssファイルの編集時にはautocomplpop.vimで文脈に応じた賢い補完が可能になります。

属性の入力補完

スタイルの入力補完

autocomplpop.vimについては以前に記事を書いているので、詳しくはそちらを参照して下さい。(現行バージョンはこの時よりだいぶ進化しているようですが)

autocomplpop.vimでリアルタイムにキーワード補完 - ナレッジエース
 autocomplpop.vimがバージョンアップしてRubyのオムニ補完とファイル名補完に対応 - ナレッジエース

ブラウザで表示確認

現在のファイルをブラウザで開く

簡単な設定だけで、現在のhtmlファイルをブラウザで開くことができます。

"<leader>Wで現在のファイルをFirefoxで開く
noremap <Leader>W :silent !start firefox %<CR>

(~~ただ、私の環境だとたまに、実行時にDOS窓が残ってブラウザを閉じるまでファイルが編集不能になる現象が発生します。なぜだろう。~~コメントで対策を教えてもらいました。「start」を入れるとDOS窓が開かず、いい感じです。コードを修正しておきました。)

保存したら自動的にブラウザをリロード

ブラウザの自動リロードは、エディタ側で実装しようと悩むより、以下のJavaScriptをGreaseMonkeyに登録してしまうほうが遥かに簡単です。

エディタで編集するだけでhtmlファイルをリロードするJavaScriptライブラリ - 素人がプログラミングを勉強するブログ

GreaseMonkeyの「新規ユーザスクリプト」メニューから「AutoReload」などの名前で登録し、「ユーザスクリプトを実行するページ」を「file:///*」とすれば使えます。

連載一覧

長くなってきたので「Web屋のためのVim設定・Tipsまとめ 2/2」へ続く予定。(追記@2009-01-24：連載完了しましたっ。)