Vim/NeoVimプラグインのNERDTree導入でVSCode化

2023年9月16日

reisuta

Webエンジニア | 20代中盤 | 大学時代はGmailすら知らないIT音痴でプログラミングとは無縁の生活を送る → 独学でプログラミングを学ぶ → Web系受託開発企業にエンジニアとして就職 → Web系自社サービス企業に転職 | 実務未経験の頃からVimを愛好しており、仕事でもプライベートでも開発はVimとTmuxを使っているので、VSCodeに疎いのが最近の悩み。何だかんだでやっぱりRubyが好き。

本記事では、主にプラグインの導入方法を解説します。
導入するプラグインとしては、NERDTreeという、
ファイルエクスプローラープラグインをインストールします。

NERDTreeは使用者も多く、
導入すると、劇的にVimが変化するので、
お試しプラグインとしておすすめできます。

対象読者としては、

こんな方におすすめ

Vimを使えるようになりたいけど、とっかかりが見つからない人
VSCodeからVimやNeovimに移行して、使えるようになりたい人
プラグインを導入方法が知りたい人

などが主です。

慣れれば、NERDTree以外のプラグインも、
自分なりにカスタマイズして導入できるようになります。

本記事では、Vimの設定を何もしていない状態から、
NERDTreeというプラグインをインストールして、
プラグイン導入の初めの一歩を踏み出します。

併せて、NERDTreeの基本操作についても
解説します。

記事ではなく、動画で観たい方は、
下記をご参考ください。

また、Vim全般について、0から解説している、
総集編動画もありますので、
併せて御覧ください。

Table of Contents

プラグイン導入方法

Vim設定ファイルの場所

まず、Vimの設定ファイルは、
~/.vimrc にあります。

ホームディレクトリ直下ですね。

もしこのファイルがなければ、
作成しましょう

touch ~/.vimrc

Vimの設定は、
基本的にすべてこのファイルに記述していきます。

ちなみに、NeoVimの場合は、
~/.config/nvim/init.vimに記述します。

Neovimの場合は、Luaの設定ファイルである、
init.luaで記述することも可能です。

プラグインマネージャーのインストール

さて、設定ファイルが見つかったところで、
早速プラグインを導入していきます。

一個一個ダウンロードして、
自分で管理するという方法もありますが、
それだと、Updateや依存関係なども、
割りと綿密に管理する必要があるので、
面倒です。

なので、基本的には、プラグインマネージャーという
プラグインをまとめて管理してくれるツールを使用するのが無難でしょう。

有名なプラグインマネージャーとしては、
vim-plug、dein.vim、Vundleなど色々あります。

使いやすいものや気に入ったものを使って管理するのが
いいと思います。(ちなみにNeovimだと、luaで書くために、
これらとは別のプラグインマネージャーを使うことが多いです。)

私は、vim-plugを使っているので、
本記事では、vim-plugの導入方法で進めていきます。

vim-plugは、使用者も多く、
直感的に使用できるので、
初めて使うプラグインマネージャーとしておすすめできます。

Vim-plug

vim-plugのインストール

vim-plugのインストール方法は、
基本的に上記のgithubに則って行えばいいのですが、
一応貼っておきます。

curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

記法としては、
call plug#begin()とcall plug#end()で
使用するプラグインを挟み込むようにして記述します。

call plug#begin()
Plug 'junegunn/vim-easy-align'
call plug#end()

上記だと、vim-easy-alignというプラグインをインストールします。

このあと、:PlugInstallを実行すれば
間に記載したプラグインをインストールしてくれます。

基本的な使い方としては、
これだけなので、シンプルで使いやすいかなと思います。

NERDTreeインストール

プラグインマネージャーも導入したので、
早速NERDTreeをインストールしてみたいと思います。

NERDTreeとは、
ファイルエクスプローラプラグインで、
ディレクトリなどをツリー上に表示できたり、
ファイルにアクセスしやすくするプラグインです。

NERDTreeのような、ファイルエクスプローラプラグインを使うと、
一気にVSCodeのように、ファイルの移動が楽になります。

NERDTree

NERDTreeだけでも、十分VSCodeっぽくなりますが、
他に、unite.vimやctrlp.vimなども入れると、
より検索性が上がって便利になります。

詳しくはこちらの記事で紹介しております。

: 参考【Vim/NeoVimプラグイン】これだけは入れておきたいプラグイン10選

プラグインをどれだけ入れるかは、その人の思想なども関係するので、一概にこれがいいというのはないかもしれません。プラグインを全く入れない人もいれば、100個以上入れる人もいます。ただそれでも、これだ ...

続きを見る

さて、NERDTreeのインストールは、
基本的には、上記のgithubの手順に従いインストールします。

といっても、やることはシンプルで、

call plug#begin()
  Plug 'preservim/nerdtree'
call plug#end()

を記述するだけです。

先程のvim-plugの記法の説明に戻りますと、
上記のように、Plugという風に使用したいプラグインを指定します。
githubのURLを指定しても問題ないので、

call plug#begin()
  Plug 'https://github.com/preservim/nerdtree'
call plug#end()

としても大丈夫です。

余談ですが、urlを指定してインストールすれば、
open-browser.vimというプラグインで、
URLを開く際に、すぐにプラグインのgithubに飛ぶことができるというメリットがあります。

https://github.com/tyru/open-browser.vim

さて、少し脱線しましたが、
記述したら、先述のように
vim-plugの場合、:PlugInstallを実行する必要があります。

一旦、.vimrcを保存して、
vimを再度開いて、

:PlugInstall

こんな感じですね。
実行すれば、インストールできるはずです。

あとは、上記のPlugInstallコマンドと同じように、

:NERDTree

でファイルが表示されます。

NERDTreeの設定

いちおうここまでで、
NERDTreeを使うことができるようになりましたが、
毎回:NERDTreeなどと打つのは面倒です。

なので、keymapに設定してしまうのが
便利だと思います。

やり方としては、公式でも紹介されていますが、

nnoremap <C-t> :NERDTreeToggle<CR>

のようにすると、良いかなと思います。

これで、Ctrl + tでNERDTreeを表示したり、
非表示にしたりできます。

nnoremapは、キーマップの設定で、
<C-t>を :NERDTreeToggle<CR>と打ったのと同じことにします。

<C-t>は、Ctrl + tで、<C-でCtrlと何かという風になります。
最後の<CR>はenterと同じ意味です。

上記のnnoremapのようなキーマップの詳細については、
下記の記事で解説しているので、詳しくはこちらを御覧ください。

: 参考【Vim/Neovimキーマップ】map/noremapやLeaderキー

VimやNeovimを使っていくにあたって、どのようなキーマップを設定するかは、その人の個性であり、答えのない探求です。それぐらい、キーマップの設定は、Vimを使いこなす上で必須の設定と言えます。し ...

続きを見る

NERDTreeで覚えておきたい操作チートシート

これで、基本的なNERDTreeの使い方としては、
十分かと思います。

最後に、NERDTreeのチートシートを掲載しておきます。

コマンド	内容
o または enter	ファイルやフォルダを開く
O	再帰的にディレクトリをすべて開く
x	親ディレクトリを閉じる
X	再帰的にディレクトリを閉じる
go	ファイルを開く(カーソルはツリーのまま)
t	タブでファイルを開く
i	水平分割でファイルを開く
s	垂直分割でファイルを開く
C	ツリーのルートを選択したディレクトリにする
u	ツリーのルートを上の階層にする
r	選択したディレクトリを再読み込み
m	メニューを表示(ファイルやディレクトリの追加削除などができる)
I	隠しファイルの表示、非表示