vim使っているデザイナー/コーダーで、これ入れてないのはヤバっしょプラグインまとめ　8個

そもそもqiita見ているデザイナー&&vimmerっているんですか(´;ω;｀)ねー

会社の情報共有を兼ねて、使い方から導入方法まで。
紹介するプラグインは以下の通りです。

- **emmet-vim**　　あまりにも有名なhtml/CSS入力補助プラグイン
- **surround.vim**　　　vimのテキストオブジェクトを拡張するプラグイン
- **open-browser.vim**　URLを開いたり、ググったり出来る
- **vim-browsereload-mac**　ブラウザを自動更新するプラグイン(Mac Only)
- **vim-css3-syntax**　html5のコードをシンタックス表示する
- **vim-javascript**　　vimにjsのシンタックスを追加する
- **vim-coffee-script**　coffee scriptのサポート
- **sass-compile.vim**　sassのサポート

## インストール

vimのプラグイン管理にはNeoBundleを使います。
使い方は以下を参照。

[ NeoBundleの導入 ]( http://qiita.com/items/1c32d3f24cc2919203eb )
下記のコードをNeoBundleでインストールしてください

```vimrc
NeoBundle 'mattn/emmet-vim'
NeoBundle 'taichouchou2/surround.vim'
NeoBundle 'open-browser.vim'
NeoBundle 'mattn/webapi-vim'
NeoBundle 'tell-k/vim-browsereload-mac'
NeoBundle 'hail2u/vim-css3-syntax'
NeoBundle 'taichouchou2/html5.vim'
NeoBundle 'taichouchou2/vim-javascript'
NeoBundle 'kchmck/vim-coffee-script'
```

### emmet-vim

emmet-vimはzencodingの後継プラグインです。

[Zen Codingとは？動画]( http://vimeo.com/7405114 )
**HTML / CSS 爆速コーディングプラグイン**
vimmer + Web業界な人で、これを入れていない人はいない程有名なプラグインです。

`ul>li*3>a>img`と打ち込んで、`<C-Y>,`を押すと下記のように展開されます。

```html:index.html
<ul>
    <li><a href=""><img src="" alt="" /></a></li>
    <li><a href=""><img src="" alt="" /></a></li>
    <li><a href=""><img src="" alt="" /></a></li>
</ul>
```

最低限、htmlを日本語に指定する設定をすると良いと思います。
[ オススメの設定 ](https://gist.github.com/6879605)

### surround.vim

surround.vimはvimのテキストオブジェクトを拡張するプラグインです。

#### text-objectsとは？

vimには、テキストオブジェクトという機能があります。
`w`でワード移動が出来たり、

`"abc"` というテキストに対して
`di"`   と打つと -> delete inner " でダブルクオーテーションの中を削除して`""`となります

`<a href="">abc</a>` というテキストに対して
`dat`と打つと -> delete a tag タグごと消えます

テキストオブジェクトについて知りたい人は、`:h text-objects`とコマンドを打てばヘルプが出てきます。

#### surround.vimは何をするか

その名の通り、surround(周りを取り囲むもの)というテキストオブジェクトを追加します。

例えば、
`<h2>abc</h2>`というコードのh2をdivに変えるとします。
`cst<div>`と打つと -> change surround tag &lt;div&gt; で`<div>abc</div>`と書き換えることが出来ます

他にも、
`abc`というテキストに対して、ビジュアルモードで選択した状態から、`s"`と入力すると`"abc"`と一発で囲むことも出来ます。

プラグインをインストールすれば、設定は不要です。

### open-browser.vim

URLに対してコマンドを打つ事で、ブラウザを表示させたり
キーワード上でコマンドを打つ事で、ググったりする事が出来ます。

[ オススメの設定 ]( https://gist.github.com/3668363 )

### vim-browsereload-mac

保存する度にブラウザを自動リロードしてくれます。
僕は、デュアルディスプレイで片方にブラウザを起動させて、もう片方でvimを起動させて作業をするようにしています。

[ オススメの設定 ]( https://gist.github.com/3668388 )

> 正直もうこれが無いとvimでコーディングをするのは辛い！

と昔は言っていましたが、Livereloadというchromeのextensionの方が便利でした。えへへ。
機能はほぼ同じなので、誰かまとめ記事を書いて、編集リクエスト送ってください！

### vim-css3-syntax, vim-javascript, html5.vim

vimは標準でjsやcss3のシンタックスを用意していません。htmlにjsコードを挿入するて、インデントが崩れた経験がある方は必須です。
こちらは、インストールするだけでインデントや色付けを行ってくれるので、必ず入れましょう。
先ほどNeoBundleで示したvim-javascriptは、jQueryも色付けするようにカスタマイズしてあります。

html5のコードも対応していないので、プラグインを追加する必要があります。もし、プラグインを追加しても色がつかない場合は、下記のコードを.vimrcに追加してください

[html5]( https://gist.github.com/3668961 )

### sass-compile.vim

sassやscssを編修するときに、色づけ、インデント、自動コンパイルを行ってくれるプラグインです。
下記設定を追加するだけで、保存と同時にコンパイルを行ってくれます。(compassのプロジェクトなら、設定を読み込んで正しいディレクトリに保存してくれます)
[ オススメの設定 ]( https://gist.github.com/3668482 )

デザイナーならば、Vimではなく[GUIで操作してもいいですね]( http://liginc.co.jp/designer/archives/11623 )

### vim-coffee-script

coffee-scriptは、jsをより簡単に書く事が出来る言語です。
coffee-scriptまで触れるデザイナー/コーダーはとっても頼もしいですよね。
そういう人がいるかどうかは、社風によるのでしょうか。

詳しくは、[ 正しいcoffee-scriptの環境づくり vim ]( http://qiita.com/items/fb442cfa78f91634cfaa )をご覧ください

## まとめ

一括で設定したい場合は、NeoBundleの設定をした後に下記を追加するといいと思いますZ！
[ オススメの設定 ]( https://gist.github.com/3668558 )

やっぱり、codaもいいですけど本気スピード + js,scss,coffeeをコーディングしようと思ったらvimですね！
爆速爆速＾＾