そもそも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>,を押すと下記のように展開されます。
<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に追加してください
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ですね！
爆速爆速＾＾