VSCodeのキーボードショートカットでエクスプローラーをVim風に操作する

公開日:
目次

TL;DR

  • VSCodeのキーボードショートカットでエクスプローラーを操作できる
  • キー操作はkeybindings.jsonで設定する
  • エディタでもvimを使うなら、拡張機能のVimをインストールする

VSCodeのキーボードショートカットでエクスプローラーをVim風に操作する

VSCodeのキーボードショートカットをカスタマイズするには、keybindings.jsonを編集します。

keybindings.jsonは、VSCodeの設定画面から編集することができます。

vim風にする場合は、拡張機能のVimをインストールする

vim風にする場合は、拡張機能のVimをインストールしたほうがエディタもvimになるので、統一感が出ます。左のメニューバーから拡張機能を開いて、Vimと検索してインストールしてください。

keybindings.jsonで設定する

keybindings.jsonはkeyとcommandを設定することで、キーボードショートカットを設定することができます。

keybindings.jsonは、VSCodeのメニューバーをクリックしてコマンドパレットを開き、検索欄keyboardと入力してPreferences: Open Keyboard Shortcuts(JSON)を選択することで開くことができます。

このkeybindings.jsonに下記のように設定を追加することで、キーボードショートカットを設定することができます。

keybindings.json
[
  {
    "key": "key",
    "command": "command",
    "when": "when"
  },
]
  • keyは、キーボードショートカットのキーを設定します。
  • commandは、キーボードショートカットの動作を設定します。
  • whenは、キーボードショートカットが有効になる条件を設定します。

ここからはこのkeybindings.jsonに設定を追加していきます。

エクスプローラーをキーボードショートカットで開く

エクスプローラーをキーボードショートカットで開くには、下記のように設定します。vimの拡張機能を使わない場合は、&& vim.mode == 'Normal'を削除してください。

個人的に使いやすいのは、ctrl+jでエクスプローラーに移動して、ctrl+jでエクスプローラーを閉じる設定ですが、別のキーが使いやすい方はkeyを変更してください。

keybindings.json
    //エクスプローラーに移動・戻る
    {  
      "key": "ctrl+j",  
      "command": "workbench.view.explorer",
      "when": "editorFocus && vim.mode == 'Normal'"
    },  
    {  
      "key": "ctrl+j",  
      "command": "workbench.action.focusActiveEditorGroup",  
      "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"
    },

エクスプローラーに移動するだけでなく、エクスプローラー使っていない時は閉じたいという方は下記のようにしましょう。

keybindings.json
    //エクスプローラーを開閉
    {  
      "key": "ctrl+j",  
      "command": "workbench.view.explorer",  
      "when": "editorFocus && vim.mode == 'Normal'"
    },  
    {  
      "key": "ctrl+j",  
      "command": "workbench.action.closeSidebar",
      "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"
    },

エクスプローラーを上下に移動

エクスプローラーを上下に移動するには、下記のように設定します。vim風にするならjで下がってkで上がるようにします。

keybindings.json
    //エクスプローラーを上下に移動  
    {  
      "key": "j",  
      "command": "list.focusDown",  
      "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"  
    },  
    {  
      "key": "k",  
      "command": "list.focusUp",  
      "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"  
    },  

個人的にはエクスプローラー以外のリスト操作でも上下に移動したいので下記のように設定しています。

keybindings.json
    //リストを上下に移動
    {
        "key": "j",
        "command": "list.focusDown",
        "when": "listFocus && !inputFocus"
    },
    {
        "key": "k",
        "command": "list.focusUp",
        "when": "listFocus && !inputFocus"
    },

こうすることで、エクスプローラー以外のリストでもjで下がってkで上がるようになります。

新規ファイル作成

新規ファイル作成するには、下記のように設定します。

keybindings.json
  //新規ファイル作成
  {  
    "key": "n",  
    "command": "explorer.newFile",  
    "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"  
  },  

新規フォルダ作成

新規フォルダ作成するには、下記のように設定します。

keybindings.json
  //新規フォルダ作成  
  {  
    "key": "f",  
    "command": "explorer.newFolder",  
    "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"  
  },  

名前を変更する

名前の変更は、何もしなくてもenterキーでできるので、設定する必要はありませんが、個人的にはenterでファイルを開いたりフォルダを開閉したいので、名前を変更するにはrキーを設定しています。

名前を変更するには、まずenterキーの設定を通常から変更します。続いて下記の通り、renameFileを設定します。この時!inputFocusを設定しておかないと名前を変更するときにkeyが入っていた場合、再度コマンドが実行されてしまうので注意してください。

keybindings.json
  //enterキーの設定
  {
    "key": "enter",
    "command": "-renameFile",
    "when": "filesExplorerFocus && foldersViewVisible && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
  },
  //名前の変更
  {  
    "key": "r",  
    "command": "renameFile",  
    "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"  
  },  

削除する

削除するには、下記のように設定します。

keybindings.json
  //削除  
  {  
    "key": "d",  
    "command": "deleteFile",  
    "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"  
  },

コピーする

コピーするには、下記のように設定します。

keybindings.json
  //コピー
  {  
    "key": "y",  
    "command": "filesExplorer.copy",  
    "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"  
  },  

貼り付けする

貼り付けをするには、下記のように設定します。

keybindings.json
  //ペースト
  {  
    "key": "p",  
    "command": "filesExplorer.paste",  
    "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"  
  },  

ファイルを開く

ファイルを開くには、下記のように設定します。名前を変更するところでenterキーを変更した場合は、enterを押せばファイルが開かれるので、設定する必要はありません。

keybindings.json
  //ファイルを開く
  {  
    "key": "o",  
    "command": "explorer.openToSide",  
    "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"  
  },  

フォルダを開く

エクスプローラーでフォルダを開くには、下記のように設定します。名前を変更するところでenterキーを変更した場合は、enterを押せばフォルダ開閉されるので、設定する必要はありません。

keybindings.json
//フォルダを開く
  {  
    "key": "e",  
    "command": "revealFileInOS",  
    "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"  
  },  

自分が使っているエクスプローラー用のキーバインドを紹介

ひとまず使ってみたい方は個人的にオススメなキーバインドをコピペして使ってみてください。vimを使っているので、基本的にvimの拡張機能を入れている前提です。

keybinding.json
    {  
      "key": "ctrl+j",  
      "command": "workbench.view.explorer",
      "when": "editorFocus && vim.mode == 'Normal'"
    },  
    {  
      "key": "ctrl+j",  
      "command": "workbench.action.focusActiveEditorGroup",  
      "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"
    },
    {  
      "key": "j",  
      "command": "list.focusDown",  
      "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"  
    },  
    {  
      "key": "k",  
      "command": "list.focusUp",  
      "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"  
    },  
    {  
      "key": "n",  
      "command": "explorer.newFile",  
      "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"  
    },  
    {  
      "key": "f",  
      "command": "explorer.newFolder",  
      "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"  
    },  
    {
      "key": "enter",
      "command": "-renameFile",
      "when": "filesExplorerFocus && foldersViewVisible && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
    },
    {  
      "key": "r",  
      "command": "renameFile",  
      "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"  
    },  
    {  
      "key": "d",  
      "command": "deleteFile",  
      "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"  
    },
    {  
      "key": "y",  
      "command": "filesExplorer.copy",  
      "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"  
    },  
    {  
      "key": "p",  
      "command": "filesExplorer.paste",  
      "when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"  
    },