Open a project in VS Code in a flash 📂⚡
Tags: tooling, vscode, productivity, bash
Published: 2022-07-18 09:16:24


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*.

<video preload="none" poster="https://www.roboleary.net/assets/img/blog/2022-07-18-open-a-project-in-vscode-in-a-flash/ocode-preview.jpg" controls="" muted="" >
<source src="https://www.roboleary.net/assets/img/blog/2022-07-18-open-a-project-in-vscode-in-a-flash/ocode-command.mp4" type="video/mp4"></source>
</video>

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`](https://github.com/junegunn/fzf), and the file finder utility [`fd`](https://github.com/sharkdp/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`](https://www.man7.org/linux/man-pages/man1/find.1.html) (typically pre-installed on Linux) because it is faster and respects *.gitignore*.

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

```shell
# 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*.

<img src="https://www.roboleary.net/assets/img/blog/2022-07-18-open-a-project-in-vscode-in-a-flash/ocode-example.png" alt="running ocode command in audiobooks folder" width="930" height="156" loading="lazy">

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

```shell
# 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 <kbd>Ctrl</kbd> + <kbd>R</kbd> (or run the command `File: Open Recent...`), and it will open your recently opened folders in the quickpick dropdown, as below.

<img src="https://www.roboleary.net/assets/img/blog/2022-07-18-open-a-project-in-vscode-in-a-flash/vscode-open-recent-command.png" alt="vscode open recent command" width="901" height="513" loading="lazy">

You can type the name and hit <kbd>Enter</kbd> 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 <kbd>Ctrl</kbd> + <kbd>O</kbd> (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. 🖱️

<img src="https://www.roboleary.net/assets/img/blog/2022-07-18-open-a-project-in-vscode-in-a-flash/vscode-open-folder-command.png" alt="vscode open folder command" width="893" height="619" loading="lazy">

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](https://marketplace.visualstudio.com/items?itemName=robole.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:

<img src="https://www.roboleary.net/assets/img/blog/2022-07-18-open-a-project-in-vscode-in-a-flash/vscode-file-bunny-open-folder-command.png" alt="vscode file bunny open folder command" width="893" height="619" loading="lazy">

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*.

<video preload="none" poster="https://www.roboleary.net/assets/img/blog/2022-07-18-open-a-project-in-vscode-in-a-flash/file-bunny-open-folder-preview.jpg" controls="" muted="" >
<source src="https://www.roboleary.net/assets/img/blog/2022-07-18-open-a-project-in-vscode-in-a-flash/file-bunny-open-folder.mp4" type="video/mp4"></source>
</video>

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:

1. I typed "j" and the *js* folder was the first option. I hit <kbd>Enter</kbd> to jump to that folder.
2. I type "vs" and the *vscode* folder is the first option. I hit <kbd>Enter</kbd> to jump to that folder.
3. I type "file" and the *vscode-file-bunny* folder is the first option. I hit <kbd>Enter</kbd> to jump to that folder.
4. The first option is *This Folder*.  I hit <kbd>Enter</kbd> 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! 😅