creatersnest

Vimでのコーディングがより快適になるおすすめプラグイン20選


みなさん、Vim使ってますか?コーディングする上でテキストエディタにVimを使うと、慣れてくればスピーディーにコーディングを行なえます。
とはいえ、他のテキストエディタと比べると、かゆいところに手が届かない感もあるのではないでしょうか。
そこで、プラグインというVimの機能を強化する小さなソフトウェアを導入します。

ここでは、コーディングがより快適になるおすすめのVimプラグインを20個、紹介しますので、ぜひご覧ください。

NeoBundle

NeoBundle詳細

https://github.com/Shougo/neobundle.vim
NeoBundleは、プラグインをVimに導入するためのプラグインです。
.vimrcに使いたいプラグインを記述することで簡単に、Vimへプラグインをインストールしたり、そのプラグインを使う・使わないの指定が行なえます。
他のプラグインを導入する前に、まずはNeoBundleをインストールしてください。

 

 

lightline.vim

lightline.vim詳細
https://github.com/itchyny/lightline.vim
lightline.vimをインストールすると、Vimの画面の一番下にあるステータスラインの表示内容が強化されます。
現在のモードが色づけされて表示されるので、通常モード状態かinsertモード状態かがわかりやすくなるプラグインです。
さらに、編集しているファイル名やファイルの種類などの情報をステータスラインに表示してくれます。

 

 

molokai

molokai詳細

https://github.com/tomasr/molokai
molokaiは、カラースキーマと呼ばれるプラグインのひとつです。
カラースキーマを導入すると、HTMLやCSSのタグや属性の単語が色付けされ、コードが見やすくなります。
カラースキーマの中でもmolokaiは、その色の指定がそれぞれ、はっきりとした色合いで、他のカラースキーマよりもコードが見やすくて人気です。

 

 

vim-indent-guides

vim-indent-guides詳細

https://github.com/nathanaelkane/vim-indent-guides
HTMLのコードを記述していると、どうしてもインデントが深くなります。
vim-indent-guidesをインストールすると、インデントに色をつけてくれるので、
どの程度インデントしているか、その深さが視覚的にわかりやすくなるプラグインです。

 

 

vim-trailing-whitespace

vim-trailing-whitespace詳細

https://github.com/bronson/vim-trailing-whitespace
vim-trailing-whitespaceをインストールすると、各行の行末に不要に入ってしまったスペースを色つけて表示してくれます。
コードが長くなってくると、間違って行末にスペースを入れたまま改行して次のコードを入力することが多くなるので、
このプラグインをインストールして、行末のスペースに気づいたら削除するようにしましょう。

 

 

surround.vim

surround.vim詳細

https://github.com/tpope/vim-surround
シングルクォーテーションで囲った文字を、ダブルクォーテーションで囲むように修正したい場合があります。
その際に使えるプラグインが、surround.vimです。
このプラグインをインストールすると、たとえば「cs'”」というコマンドを入力するだけで、
シングルクォーテーションをダブルクォーテーションに置換してくれます。

 

 

tcomment.vim

tcomment詳細

https://github.com/tomtom/tcomment_vim
HTMLを編集していて、一部分をまとめてコメントアウトしたい場合、tcomment.vimが役に立ちます。
tcomment.vimをインストールすることで、指定した箇所をコメントアウトできるので便利です。

 

 

neosnippet.vim および neosnippet-snippets

neosnippet詳細

https://github.com/Shougo/neosnippet.vim
https://github.com/Shougo/neosnippet-snippets
スニペットは、入力途中のコードを自動で補完してくれる機能のことです。
neosnippet.vimをインストールすることで、Vimにコード補完機能を追加できます。
ただ、コード補完を実行できるようにするためには、補完可能な単語(タグや命令)が登録された辞書が必要です。
neosnippet-snippetsが、その辞書になりますので、併せてインストールしてください。

 

 

neocomplete.vim

neocomplete詳細

https://github.com/Shougo/neocomplete.vim
neosnippet.vimだけでもコード補完の機能を利用することができますが、
neocomplete.vimをインストールすることで、より便利にコード補完を利用することができます。
併せてインストールすることをおすすめします。

 

 

html5.vim

 

html5.vim詳細

https://github.com/othree/html5.vim
Vimは、特に設定を追加しなくてもHTMLタグに色をつけてくれますが、HTML5のタグまでは色がつきません。
そこで、html5.vimをインストールして、HTML5のタグにも色がつくようにします。

 

 

vim-css3-syntax

vim-css3-syntax詳細

https://github.com/hail2u/vim-css3-syntax
HTML5と同様、CSS3の内容についても色がつきません。
そこで、vim-css3-syntaxをインストールすることで、CSS3の内容にも色がつくようにします。

 

 

vim-javascript-syntax

vim-javascript-syntax詳細

https://github.com/jelera/vim-javascript-syntax
JavaScriptのコードも書いていますか?もし書いていましたら、vim-javascript-syntaxをインストールしてください。
HTML5やCSS3と同様、通常状態ではJavaScriptのコードには色がつきませんので、このプラグインによって色づけしてもらうようにします。

 

 

vim-html5validator

vim-html5validator詳細

https://github.com/hokaccha/vim-html5validator
validatorは、入力内容をチェックして、内容に問題のある箇所を表示してくれる機能のことです。
vim-html5validatorをインストールすることで、HTML5の文法チェックを実行することができ、文法上に問題のあるところを教えてもらえます。

 

 

open-browser.vim

open-browser詳細

https://github.com/tyru/open-browser.vim
ファイルに記載したURLを開くためにVimからブラウザへと表示を切り替えて、確認が済んだらブラウザからVimへ表示を切り替えるのは面倒です。
open-browser.vimをインストールすると、表示を切り替えることなく、Vimから特定のURLをブラウザで開くことができます。

 

 

vim-browsereload-mac

browsereload-mac.vim詳細

https://github.com/tell-k/vim-browsereload-mac
あなたがMacでコーディングを行なっているなら、ぜひおすすめしたいのがvim-browsereload-macです。
このプラグインをインストールすると、HTMLファイルを修正して保存したタイミングで、そのHTMLを表示しているブラウザが自動で再読み込みしてくれます。
修正内容を確認するたびにブラウザの再読み込みボタンを押す必要がなく、便利です。

 

 

emmet-vim

emmet-vim詳細

https://github.com/mattn/emmet-vim
emmetをご存知でしょうか。
HTMLやCSSを省略した形でコーディングでき、後で完全な形のHTMLやCSSに展開できるため、コーディングの記述量を減らすことができる技術です。
emmet-vimをインストールすると、このemmetをVimで使えるようになります。

 

 

sass-compile.vim

sass-compile.vim詳細

https://github.com/AtsushiM/sass-compile.vim
sassやscssをお使いでしょうか。もしお使いでしたら、sass-compile.vimをインストールしてください。
このプラグインは、sassやscssのファイルへの色づけ、インデントはもちろん、自動コンパイルまでしてくれるプラグインです。

 

 

unite.vim

Unite.vim詳細

https://github.com/Shougo/unite.vim
unite.vimをインストールすると、カレントディレクトリのファイル一覧や、現在開いているファイル(バッファ)の一覧、
最近開いたファイルの一覧を表示でき、その一覧からファイルを開くことができます。

 

 

NERDTree

NERDTree詳細

https://github.com/scrooloose/nerdtree
一つひとつのファイルだけではなく、プロジェクト(サイト)全体のファイル構成を知りたい場合があります。
その際に使えるプラグインが、NERDTreeです。
このプラグインをインストールすると、「:NERDTree」というコマンドを実行することで、カレントディレクトリをツリー表示することができます。

 

 

fugitive.vim

fugitive.vim詳細

https://github.com/tpope/vim-fugitive
ソースコードの共有や変更履歴の管理にGitを使っている人やプロジェクトも多いでしょう。
Gitを使うためにVimを終了するのは面倒です。
fugitive.vimをインストールすることで、Vimの中でGitのコマンドを実行することができるようになります。

 

 

さいごに

いががでしたでしょうか。
今回紹介した20個のプラグインを必ず全てインストールする必要はありません。便利だと思ったものだけインストールしてください。
NeoBundleを利用していれば、一度インストールしたプラグインを使わないようにすることも簡単にできます。
また、プラグインの中には、.vimrcに設定を追加することで表示や動きをカスタマイズできるものがあります。
ぜひ、そういったカスタマイズにも挑戦して、自分なりの便利なVim環境を構築してください。WS000026

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【Web制作】プログレッシブ・エンハンスメントの考え方とは?それを取り入れる必要性は?