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

そもそも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の導入
下記のコードをNeoBundleでインストールしてください

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とは？動画
HTML / CSS 爆速コーディングプラグイン
vimmer + Web業界な人で、これを入れていない人はいない程有名なプラグインです。

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

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を日本語に指定する設定をすると良いと思います。
オススメの設定

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 <div> で<div>abc</div>と書き換えることが出来ます

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

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

open-browser.vim

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

オススメの設定

vim-browsereload-mac

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

オススメの設定

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

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

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

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

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

html5

sass-compile.vim

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

デザイナーならば、VimではなくGUIで操作してもいいですね

vim-coffee-script

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

詳しくは、正しいcoffee-scriptの環境づくり vim をご覧ください

まとめ

一括で設定したい場合は、NeoBundleの設定をした後に下記を追加するといいと思いますZ！
オススメの設定

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

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