Open a project in VS Code in a flash 📂⚡

#tooling #vscode #productivity #bash

The one thing that you do all the time with VS Code is open a folder. Wouldn't it be nice to find your project and open it in VS Code really quickly?

Let's look at how you can do that on the command-line, and inside VS Code.

On the command-line

I am going to create a custom shell command to create a dynamic menu to fuzzy find any folder on my system and open it with VS Code. I will call the command ocode.

The video below demonstrates me opening the JavaScript project vscode-file-bunny.

It takes me 6 seconds to find and open the folder. I am trying to go more slowly to show you clearly in the video. I go faster normally! The real limit is your brain communicating with your fingers!

Let's walk through how I made this command!

I use the excellent fuzzy finding utility fzf, and the file finder utility fd. You must install both of these for the following to work, and they can be installed on any Operating System.

I prefer to use fd over find (typically pre-installed on Linux) because it is faster and respects .gitignore.

You can add the following to your .bashrc or .zshrc:

# choose a folder to open with vs code
ocode() {
  folder=$(fd --type d --exclude node_modules | fzf)

  if [ -n "$folder" ];
  then
    code $folder
  fi
}

We use fd to grab all of the folders, beginning from the current working directory, and exclude node_modules. We pipe this output to fzf, which will present this input as an interactive menu. The if statement checks that a selection was actually made, so we don't open vscode unnecessarily. The selection made is passed as an argument to code, which is the command for vscode. And presto, it opens the folder.

For example, if I am in /home/rob/audiobooks, it will only look for folders inside audiobooks.

If you prefer the search to start in your home directory always, then you can use this command instead:

# choose a folder to open with vs code, always starts at home directory
ocode() {
  folder=$(fd --type d --exclude node_modules . $HOME | fzf)

  if [ -n "$folder" ];
  then
    code $folder
  fi
}

Swap out $HOME with another folder if you want to start from somewhere else.

In VS Code

To open a recent project is handled by VS Code. You can press Ctrl + R (or run the command File: Open Recent...), and it will open your recently opened folders in the quickpick dropdown, as below.

You can type the name and hit Enter when you hit on a match to open it. It is quick!

What if you haven't opened a folder before?

If you are opening a new folder, it is slow. If you press Ctrl + O (or run the command File: Open Folder...), you get a native file picker dialog to make your selection, as below. You need to click through to the location of the folder. 🖱️

In my case, the dialog starts in my desktop folder. All of my code project folders are in home/rob/programming/workspace, I have to click at least 5 times to get to a specific project folder!

I wrote an extension called File Bunny to help out with this. It has a command File Bunny: Open Folder. The difference with this command is that you you can do everything with the keyboard in a quickpick dropdown. And you can choose the starting location!

This is what you get when you run the commmand:

Notice how it starts in home/rob/programming/workspace? 🙌

You can quickly get to the folder you want by building the path incrementally. It is easier to demonstrate with an example..

Again, I want to find the vscode-file-bunny project folder. I know it is contained below in my workspace, in js/vscode/vscode-file-bunny.

It takes me 10 seconds to find and open the folder with no clicking! Once you are familar, you can do it faster!

Here is a summary of what I did:

I typed "j" and the js folder was the first option. I hit Enter to jump to that folder.
I type "vs" and the vscode folder is the first option. I hit Enter to jump to that folder.
I type "file" and the vscode-file-bunny folder is the first option. I hit Enter to jump to that folder.
The first option is This Folder. I hit Enter and it opens the vscode-file-bunny folder.

In comparison to the ocode command, it may seem a bit tedious, but I like this method a lot too. It is far better than a file dialog IMO!

You may ask, why don't I copy the behaviour of ocode into the File Bunny extension?

It is possible, but I do not know if it is worth the effort to try to emulate it. You need a really good fuzzy finding library, and I do not know if there is Node library at the same level as fzf.

Of course, you can just run the command ocode in the integrated terminal! The only thing is that this will open a new window rather than open the folder in the current window.

Wrapping up

I love making improvements like this to my workflow. Any friction I can remove to get started on a task more quickly can help create momentum and foster a positive feeling. Finding and opening the right project is always a good start! 😅