VSCode Bindings to Toggle File Explorer

I published an extension the other day that tries to replicate the NERDTree menu and in the screen cast I did for the post I navigate to and around the file explorer menu via the keyboard without explaining how I setup my key bindings to do that.

To open the file explorer I setup a binding through the Vim plugin. In order to toggle it closed, I had to set it up through the non-Vim key bindings as the Vim key bindings don’t trigger from the file explorer menu. To toggle the file explorer open, I use the following:

// settings.json

        {
            "before": [
                "leader",
                "e",
                "w"
            ],
            "after": [],
            "commands": [
                {
                    "command": "workbench.files.action.focusFilesExplorer",
                    "args": []
                }
            ]
        },

To be able to toggle this closed when the file explorer is open, I use the following:

// keybindings.json

{
  "key": ", e w", 
  "command": "workbench.action.toggleSidebarVisibility", 
  "when": "filesExplorerFocus && !editorTextFocus
},

I believe VSCode doesn’t match the ‘w’ here (i.e. “, e” will trigger the toggle), but I left it in so it’s easier for me to find if I’m searching this file for the binding.

The second part of my setup is the ability to navigate up and down the file explorer list and I do this with the following settings:

    {
        "key": "j",
        "command": "list.focusDown",
        "when": "explorerViewletVisible && filesExplorerFocus && !inputFocus"
    },
    {
        "key": "k",
        "command": "list.focusUp",
        "when": "explorerViewletVisible && filesExplorerFocus && !inputFocus"
    },

Here’s a quick screen cast showing this in action:

Attempting to replicate NERDTree’s menu in VSCode.

I’ve been a pretty happy Vim user for a while, but I wanted to give VSCode a try but often give up because I miss too much from Vim. This time around I made a list of things I wanted to be able to do in VSCode that I missed from Vim and one of the things on my list was the menu in NERDTree.

I looked around a little and couldn’t find anything similar so tried to play with the settings in VSCode. I was able to replicate some functionality (keyboard shortcuts to do different actions in the File Explorer view) but it didn’t quite feel the same. My muscle memory missed being able to hit ‘m’ while in File Explorer and then quickly select what I was going to do next.

As I’ve been trying to build more and also was curious about the internals of VSCode, I thought this was a good opportunity to build a plugin to help close this gap for me and learn a little bit more about how VSCode worked under the hood. A few days later and I’ve got my first published plugin vscode-file-explorer-menu (VSCode market place link here).

It’s a little hacky, but I’m pretty happy with it for now as it does what I missed from my Vim flow and am hopeful it’s useful to others.

Trying to write more

I’ve been thinking for a while I wanted to write more and realized I always struggled to maintain and curate a blog because I wrestled with mixing the personal with the less personal, so I decided to just create a blog for just tech thoughts and leave my personal blog over here.