소개

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
파일 및 폴더 삭제

보충

조건으로 Code > 基本設定 > キーボードショートカット를 붙이고 있는 것은, 파일 추가 등 익스플로러상에서 텍스트 편집을 실시할 때에, 커멘드로서 사용하고 있는 키를 입력할 수 있도록 하기 위해서.

참고