surround.vimの設定でHTMLの編集が便利になる設定をしてみました。surround.vimの使い方に関しては下記サイトがまとまってます。ホント便利っす、このプラグイン。

vim の text-object をより便利に使えるプラグイン - surround.vim - 川o・-・）＜2nd life

.vimrcの設定

設定はこんな感じです。

"for surround.vim
" [key map]
" 1 : <h1>|</h1>
" 2 : <h2>|</h2>
" 3 : <h3>|</h3>
" 4 : <h4>|</h4>
" 5 : <h5>|</h5>
" 6 : <h6>|</h6>
"
" p : <p>|</p>
" u : <ul>|</ul>
" o : <ol>|</ol>
" l : <li>|</li>
" a : <a href="">|</a>
" A : <a href="|"></a>
" i : <img src="|" alt="" />
" I : <img src="" alt"|" />
" d : <div>|</div>
" D : <div class="section">|</div>

autocmd FileType html let b:surround_49  = "<h1>\r</h1>"
autocmd FileType html let b:surround_50  = "<h2>\r</h2>"
autocmd FileType html let b:surround_51  = "<h3>\r</h3>"
autocmd FileType html let b:surround_52  = "<h4>\r</h4>"
autocmd FileType html let b:surround_53  = "<h5>\r</h5>"
autocmd FileType html let b:surround_54  = "<h6>\r</h6>"

autocmd FileType html let b:surround_112 = "<p>\r</p>"
autocmd FileType html let b:surround_117 = "<ul>\r</ul>"
autocmd FileType html let b:surround_111 = "<ol>\r</ol>"
autocmd FileType html let b:surround_108 = "<li>\r</li>"
autocmd FileType html let b:surround_97  = "<a href=\"\">\r</a>"
autocmd FileType html let b:surround_65  = "<a href=\"\r\"></a>"
autocmd FileType html let b:surround_105 = "<img src=\"\r\" alt=\"\" />"
autocmd FileType html let b:surround_73  = "<img src=\"\" alt=\"\r\" />"
autocmd FileType html let b:surround_100 = "<div>\r</div>"
autocmd FileType html let b:surround_68  = "<div class=\"section\">\r</div>"

key mapに書いてある|（パイプ）はカーソル位置です。aタグとかimgタグとかをカーソル位置を変えて複数登録してたり、よくつかう<div class="section">とかを設定してます。

使い方

追記: TTYShareでデモ動画を撮ってたんだけどTTYShareがお亡くなりになられたようです

入力モードで<C-g>sのあとに設定されてるキーを押すとタグが挿入されます。たとえば<C-g>s1で<h1>|</h1>です（gvimだと<C-s>でいけた）。

実際コーディングするときは、テキストをあらかじめ書き出してタグ付けするというフローが多いと思うんですが、ノーマルモードのときyssで挿入したり、ビジュアルモードで選択してsかSで挿入できます（Sだとインデントする）。実際こっちの使い方がメインになると思います。

テキストからHTMLにするところだけはDreamweaver使ったほうが早いと思ってたんだけど、これがあればもうDreamweaver使わなくなりそう。