vimでhtmlをスラスラ書くためのレシピ #HTML

ただの、自己満足乱れ書き
ふむ、下々の文章でも見てやるかって人だけ見てくれればおｋ
対象はvimはじめたいという人から中級者ぐらい

vimでhtmlファイルを編集するときに知ってると気持ち良くなれるコマンド

というか最低限覚えておかないと、コーディング時間が3倍以上になる系のコマンド。

アクション範囲ターゲットの3つの組み合わせコマンド

例)citとタイプ

<div>text</div> => <div></div>
                       ↑消えて挿入モードに移行

citのcはアクション。cの場合は削除して挿入モードに変更。他のアクションに置き換える事も可。d(削除)v(選択)など。
citのiは範囲。iはタグの中身が範囲でaに置き換えるとタグ全体が範囲になる。上記の場合でaにすると<div></div>ごと消えて挿入モードになる。
citのtはターゲット。tの場合はタグに対して行う。他にも'や"、<>、{}、()と言ったような何かで挟むものに使える。<>のような左右で違う記号はどちらか一方で良い。例ci<。

その逆はプラグインsurround.vimで。(下の方で紹介)

アクション+検索の組み合わせコマンド

例)ct"とタイプ

→

ct"のcは削除して挿入モード。もちろん他のアクションなども使える。dやvなど。
ct"のtは次に挿入した文字の手前までカーソルを移動。fの場合は検索する文字も含める。
ct"の”は検索する文字

ちなみに、t(文字単体)のかわりに/(文字列)使うのも結構強力。
例)c/</div>などするとカーソル位置から</div>まで削除して挿入モード。

ctrl+v(矩形範囲)

矩形範囲を使うといろいろと便利
→ →
1. ctrl+vで縦に選択
2. Iをタイプし適当に文字列を挿入
3. escするとあら不思議。すべてに文字列が入る。

Iを他のアクションに変える事も可。例えばdとタイプしたら選択しているところを削除。
これを使えるようになると数行一気にインデントにしたり、コメントアウトしたり、いろいろと使える。

2013/09/13 12:00追記矩形範囲を使った行末の一括追加
一日一回以上使ってる気がしたので追記。
→ → →
1. ctrl+vで縦に選択
2. $をタイプ
3. Aをタイプ後、文字列挿入
4. escするとあら不思議。すべての行末に文字列が入る。

入れていると気持ち良くなれるプラグイン

surround.vim

DL => http://www.vim.org/scripts/script.php?script_id=1697

unzip surround.zip
cp ./surround/plugin/surround.vim ~/.vim/plugin/

使用例

こんにちは ← vで選択後にS<div>と入力
<div>こんにちは</div>

タグ以外にも'や"、括弧系もできる。
逆ももちろんできる。

<div>こんにちは</div> ← dstと入力
こんにちは

削除して別のものに付け替える

<div>こんにちは</div> ← cst<span>と入力
<span>こんにちは</span>

他にもあるが、主要なのはこの三つ。

emmet.vim (zen coding)

DL => https://github.com/mattn/emmet-vim

unzip emmet-vim-master.zip
cp ./emmet-vim/plugin/emmet.vim ~/.vim/plugin/
cp ./emmet-vim/autoload/emmet.vim ~/.vim/autoload/
cp -a ./emmet-vim/pautoload/emmet ~/.vim/autoload/

使用例

html:5 ← 入力後に<ctrl+y>,と入力

<!DOCTYPE html>
<html lang="en">←enをjaに変え方は一番したに記述
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

div>ul>li.class#id_$$*5 ← 入力後に<ctrl+y>,と入力

<div>
    <ul>
        <li id="id_01" class="class"></li>
        <li id="id_02" class="class"></li>
        <li id="id_03" class="class"></li>
        <li id="id_04" class="class"></li>
        <li id="id_05" class="class"></li>
    </ul>
</div>

説明

>は下の階層
+は同階層
*数値は個数
$は連番が入る　$を並べた数の桁が使える
.はクラス名　#はID名
()はブロックにできる　複雑な階層があるときなどに使用

div>(ul>li*5)+span

[]はプロパティなど設定

a[href=http// sytle=display:none;] → <a href="http//" sytle="display:none;"></a>

ちなみに、a:linkと書くと<a href="http://"></a>になるみたいな書き方も用意されているが、量が多いので割愛。
cssも用意されている(pos:rでposition:relative;など)が量が多いので割愛。
zen coding css 一覧で先生に聞くか、ドキュメントを確認。

設定 lang="en"を"ja"に変更

sed -i -e "s/'lang': \"en\",/'lang': \"ja\",/g" ~/.vim/autoload/emmet.vim

~/.vim/autoload/emmet.vimの中にある'lang': "en"を'lang': "ja"に変更すればおｋ

2013/09/08 13:32追記コメントにてご指摘を受けたので追記
ソースをわざわざいじらなくてもvimrcの設定で行けるみたいです。

let g:user_emmet_settings = {
\   'lang' : 'ja'
\ }

yankring.vim

yankの履歴をさかのぼる(コピペの履歴をさかのぼる)

DL => http://www.vim.org/scripts/script.php?script_id=1234

unzip yankring_170.zip
cp ./yankring_170/plugin/yankring.vim ~/.vim/plugin/

使用方法
pでペーストした後、ctrl+nで昔のyankにさかのぼれる。反対はctrl+p。

後あれば編集に役立つプラグイン(詳しくは先生に聞いて下さい)

NERD_tree.vim ディレクトリのtree表示
changed.vim 最後に保存したときからどこの行に追加、削除、変更があったかを左側に表示
closetag.vim 閉じタグを自動挿入
mru.vim 開いたファイルの履歴を管理。NERD_treeを使っていればあまり使わない。