はじめに
NERDTreeはディレクトリツリーを表示してファイル操作を行うVimのプラグインです。
VSCodeは統合開発環境のためエクスプローラー機能が存在します。そのため,キーバインディングを変更することによって,NERDTreeをVSCodeで再現します。
再現と言っても,完全には再現できないため,以下の機能のみです。
- ファイル選択,フォルダの展開
- エディタとエクスプローラー間のフォーカス移動
- エクスプローラーの表示・非表示トグル
-
m
キーとの組み合わせによるファイルシステム操作
手順
keybindings.json
[
// --------------------------------------------------
// NERD Tree風
// --------------------------------------------------
// サイドバーの表示トグル(サイドバーの表示・非表示)
{
"key": "ctrl+d",
"command": "workbench.view.explorer",
"when": "!explorerViewletVisible && vim.mode != 'SearchInProgressMode' && vim.mode != 'Insert'"
},
{
"key": "ctrl+d",
"command": "workbench.action.toggleSidebarVisibility",
"when": "explorerViewletVisible && !searchViewletVisible && !inDebugMode && vim.mode != 'SearchInProgressMode' && vim.mode != 'Insert'"
},
// サイドバーフォーカストグル(サイドバーは表示したまま,フォーカスを切り替え)
{
"key": "ctrl+h",
"command": "workbench.action.focusSideBar",
"when": "editorFocus"
},
{
"key": "ctrl+h",
"command": "workbench.action.focusFirstEditorGroup",
"when": "!editorFocus"
},
// ファイルの時は"Enter" or "o"で同一タブで表示
{
"key": "Enter",
"command": "list.select",
"when": "explorerViewletFocus && explorerViewletVisible && !explorerResourceIsFolder && !inputFocus"
},
{
"key": "o",
"command": "list.select",
"when": "explorerViewletFocus && explorerViewletVisible && !explorerResourceIsFolder && !inputFocus"
},
//
// フォルダのときは"Enter" or "o"で展開
{
"key": "Enter",
"command": "list.toggleExpand",
"when": "explorerViewletFocus && explorerViewletVisible && explorerResourceIsFolder && !inputFocus"
},
// "s"で別ウィンドウで開く
{
"key": "s",
"command": "explorer.openToSide",
"when": "explorerViewletFocus && explorerViewletVisible && !explorerResourceIsFolder && !inputFocus"
},
// --- ファイルシステム系 ---
// "m + r"でリネーム
{
"key": "m r",
"command": "renameFile",
"when": "explorerViewletVisible && filesExplorerFocus && !inputFocus"
},
// "m + c"でコピー
{
"key": "m c",
"command": "filesExplorer.copy",
"when": "explorerViewletVisible && filesExplorerFocus && !inputFocus"
},
// "m + p"でペースト
{
"key": "m p",
"command": "filesExplorer.paste",
"when": "explorerViewletVisible && filesExplorerFocus && !inputFocus"
},
// "m + a"でファイル追加
{
"key": "m a",
"command": "explorer.newFile",
"when": "explorerViewletVisible && filesExplorerFocus && !inputFocus"
},
// "m + d"で削除
{
"key": "m d",
"command": "deleteFile",
"when": "explorerViewletVisible && filesExplorerFocus && !inputFocus"
},
// "m + f"でフォルダ追加
{
"key": "m f",
"command": "explorer.newFolder",
"when": "explorerViewletVisible && filesExplorerFocus && !inputFocus"
},
]
操作方法
コマンド | 説明 |
---|---|
Ctrl+n | エクスプローラーの表示・非表示 |
Ctrl+h | エクスプローラーとエディタ間のフォーカス移動 |
Enter, o | 同じウィンドウでファイルを開く(フォルダのときは展開) |
s | 別ウィンドウでファイルを開く(垂直方向) |
m+r | ファイル・フォルダリネーム |
m+c | ファイル・フォルダコピー |
m+p | ファイル・フォルダペースト |
m+a | ファイル追加 |
m+f | フォルダ追加 |
m+d | ファイル・フォルダ削除 |
補足
条件として!inputFocus
をつけているのは,ファイル追加などエクスプローラー上でテキスト編集を行う際に,コマンドとして使用しているキーを入力できるようにするため。