VSCodeでNERDTreeの操作を再現

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

再現と言っても，完全には再現できないため，以下の機能のみです。
- ファイル選択，フォルダの展開
- エディタとエクスプローラー間のフォーカス移動
- エクスプローラーの表示・非表示トグル
- `m`キーとの組み合わせによるファイルシステム操作

# 手順
1. `Code > 基本設定 > キーボードショートカット`を選択しキーボードショートカットの設定画面が出たら，右上の![スクリーンショット 2019-11-11 19.28.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133979/e3d4cb38-0a90-6379-0b0a-78c95bcb719f.png)から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](https://froggugugugu.com/posts/VSCode/20190320_003000vim)