読者です 読者をやめる 読者になる 読者になる

もた日記

くだらないことを真面目にやる

Vimメモ : The NERD Treeでディレクトリツリーを表示してファイル操作

The NERD Tree


github.com

The NERD Treeというプラグインを使うと図のようにディレクトリツリーを表示することができ、ここからファイル表示、作成などのファイル操作が行える。

f:id:wonder-wall:20160405230406p:plain

インストール


NeoBundleの場合は下記行をvimrcに追加。

NeoBundle 'scrooloose/nerdtree'


基本的な使い方


:NERDTreeToggleというコマンドを実行するとディレクトリツリーの表示/非表示を切り替えられるが、毎回コマンドを打つのは大変なので以下のような設定をvimrcに追加。この場合は<C-n>キーで切り替えが可能になる。

map <C-n> :NERDTreeToggle<CR>

ディレクトリツリーのキー操作については?を押すとヘルプが表示されるので、これを参照すればよい。

f:id:wonder-wall:20160405233044p:plain

ファイルノード操作

キー 説明
o または <CR> 開く
go 開く(フォーカスはそのまま)
t 新しいタブで開く
T 新しいタブで開く(フォーカスはそのまま)
i 水平分割で開く
gi 水平分割で開く(フォーカスはそのまま)
s 垂直分割で開く
gs 垂直分割で開く(フォーカスはそのまま)


ディレクトリノード操作

キー 説明
o ディレクトリ開閉
O 再帰的にディレクトリを開く
x 親ディレクトリを閉じる
X 再帰的に子ディレクトリを閉じる
e 選択したディレクトリでツリー生成


ブックマークテーブル操作

よく使うディレクトリをブックマークしておくことができるので便利。ブックマークメニューを表示するにはBを押す。ブックマークメニューをデフォルトで表示しておきたい場合は下記設定をvimrcに追加。

let NERDTreeShowBookmarks=1
キー 説明
o 開く
t 新しいタブで開く
T 新しいタブで開く(フォーカスはそのまま)
D ブックマーク削除

ブックマーク用のコマンドを使用して操作する。

コマンド 説明
:Bookmark 選択したノードをブックマーク(引数でブックマーク名を指定可)
:BookmarkToRoot 引数で指定したブックマークをルートにしてツリー表示
:RevealBookmark 引数で指定したブックマークにカーソルを当てる(うまく動かなかった…)
:OpenBookmark 引数で指定したブックマークを開く(うまく動かなかった…)
:ClearBookmarks 選択したノードのブックマークをクリア(または引数でクリア対象を指定)
:ClearAllBookmarks 全てのブックマークをクリア


ツリーナビゲーション操作

キー 説明
P ルートへ移動
p 親ディレクトリへ移動
K 最初の子要素へ移動
J 最後の子要素へ移動
<C-j> 同一階層で上に移動
<C-k> 同一階層で下に移動


ファイルシステム操作

キー 説明
C 選択したディレクトリをルートに変更
u 親ディレクトリをルートに変更
U 親ディレクトリをルートに変更(ツリーの状態はそのまま)
r 選択したディレクトリをリフレッシュ
R ルートをリフレッシュ
m メニューを表示
cd CWDを選択したディレクトリに変更
CD ルートをCWDに変更

mキーで表示されるメニューは下図のようなものである。ここで、例えばaを押して名前を入力後にリターンキーを押せばファイルやディレクトリが作成される。
f:id:wonder-wall:20160406001220p:plain

ツリーフィルタリング操作

キー 説明
I 隠しファイル表示/非表示
f フィルタによるファイル表示/非表示
F ファイル表示/非表示
B ブックマークメニュー表示/非表示

フィルタは以下のような設定をvimrcに追加。この場合は末尾が.vim~のファイルが表示されなくなる。

let NERDTreeIgnore=['\.vim$', '\~$']


その他

キー 説明
q NERDTree終了
A NERDTree画面最大化
? ヘルプ表示/非表示


設定


Vim起動時に常に表示したい場合は下記行を追加。

autocmd vimenter * NERDTree


ファイル指定なしでVimを起動した場合だけ表示したい場合は下記行を追加。

autocmd VimEnter * if argc() == 0 && !exists("s:std_in") | NERDTree | endif


The NERD Treeのウィンドウだけが残るような場合にVimを終了したい場合は下記行を追加。

autocmd bufenter * if (winnr("$") == 1 && exists("b:NERDTree") && b:NERDTree.isTabTree()) | q | endif


ファイル拡張子により色を変更したい場合は下記リンクを参考に以下のような設定を追加。

Allow configuration for multiple highlighting based on file type. · Issue #433 · scrooloose/nerdtree · GitHub

function! NERDTreeHighlightFile(extension, fg, bg, guifg, guibg)
  exec 'autocmd filetype nerdtree highlight ' . a:extension .' ctermbg='. a:bg .' ctermfg='. a:fg .' guibg='. a:guibg .' guifg='. a:guifg
  exec 'autocmd filetype nerdtree syn match ' . a:extension .' #^\s\+.*'. a:extension .'$#'
endfunction
call NERDTreeHighlightFile('jade', 'green', 'none', 'green', '#151515')
call NERDTreeHighlightFile('ini', 'yellow', 'none', 'yellow', '#151515')
call NERDTreeHighlightFile('md', 'blue', 'none', '#3366FF', '#151515')
call NERDTreeHighlightFile('yml', 'yellow', 'none', 'yellow', '#151515')
call NERDTreeHighlightFile('config', 'yellow', 'none', 'yellow', '#151515')
call NERDTreeHighlightFile('conf', 'yellow', 'none', 'yellow', '#151515')
call NERDTreeHighlightFile('json', 'yellow', 'none', 'yellow', '#151515')
call NERDTreeHighlightFile('html', 'yellow', 'none', 'yellow', '#151515')
call NERDTreeHighlightFile('styl', 'cyan', 'none', 'cyan', '#151515')
call NERDTreeHighlightFile('css', 'cyan', 'none', 'cyan', '#151515')
call NERDTreeHighlightFile('coffee', 'Red', 'none', 'red', '#151515')
call NERDTreeHighlightFile('js', 'Red', 'none', '#ffa500', '#151515')
call NERDTreeHighlightFile('php', 'Magenta', 'none', '#ff00ff', '#151515')

f:id:wonder-wall:20160405234614p:plain

The NERD Treeのプラグイン


The NERD Treeを使いやすくするプラグインがある。使い方は下記リンクで。

wonderwall.hatenablog.com
wonderwall.hatenablog.com