vimで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"`とタイプ

![image4](http://cdn-ak.f.st-hatena.com/images/fotolife/y/yufu4/20130908/20130908092224.png) → ![image5](http://cdn-ak.f.st-hatena.com/images/fotolife/y/yufu4/20130908/20130908092418.png)

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

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

















### ctrl+v(矩形範囲)
矩形範囲を使うといろいろと便利
![img1](http://cdn-ak.f.st-hatena.com/images/fotolife/y/yufu4/20130908/20130908081835.png) → ![img2](http://cdn-ak.f.st-hatena.com/images/fotolife/y/yufu4/20130908/20130908081834.png) → ![img3](http://cdn-ak.f.st-hatena.com/images/fotolife/y/yufu4/20130908/20130908081832.png)
1. ctrl+vで縦に選択
2. `I`をタイプし適当に文字列を挿入
3. `esc`するとあら不思議。すべてに文字列が入る。

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

`2013/09/13 12:00追記`矩形範囲を使った行末の一括追加
一日一回以上使ってる気がしたので追記。
![img4](http://cdn-ak.f.st-hatena.com/images/fotolife/y/yufu4/20130913/20130913124453.png) → ![img5](http://cdn-ak.f.st-hatena.com/images/fotolife/y/yufu4/20130913/20130913124454.png) → ![img6](http://cdn-ak.f.st-hatena.com/images/fotolife/y/yufu4/20130913/20130913124456.png) → ![img7](http://cdn-ak.f.st-hatena.com/images/fotolife/y/yufu4/20130913/20130913124457.png)
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を使っていればあまり使わない。