Help us understand the problem. What is going on with this article?

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ですね!
爆速爆速^^

alpaca_taichou
アルパカ隊長だぞーう
https://alpaca.tc
moneyforward
「お金を前へ。人生をもっと前へ。」をMissionとして、個人向け、法人向け様々なFintechサービスを開発、提供しています。
https://moneyforward.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした