VSCodeでNERDTreeの操作を再現

はじめに

NERDTreeはディレクトリツリーを表示してファイル操作を行うVimのプラグインです。
VSCodeは統合開発環境のためエクスプローラー機能が存在します。そのため，キーバインディングを変更することによって，NERDTreeをVSCodeで再現します。

再現と言っても，完全には再現できないため，以下の機能のみです。

• ファイル選択，フォルダの展開
• エディタとエクスプローラー間のフォーカス移動
• エクスプローラーの表示・非表示トグル
• mキーとの組み合わせによるファイルシステム操作

手順

1. Code > 基本設定 > キーボードショートカットを選択しキーボードショートカットの設定画面が出たら，右上のからJSON表示に切り替える。

2. 以下のコードを貼り付ける．

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をつけているのは，ファイル追加などエクスプローラー上でテキスト編集を行う際に，コマンドとして使用しているキーを入力できるようにするため。

参考

VSCodeとVimとNERDTree