Vim

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

More than 5 years have passed since last update.

そもそも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ですね!

爆速爆速^^