Easy file management in VS Code
Tags: showdev, vscode, tools, webdev
Published: 2021-04-28 11:01:12

One area that is deficient in VS Code is the ability to perform file operations with commands. You need to jump into the File Explorer and get busy with your mouse most of the time. 🤕 I would like to stick to the keyboard for these actions, so I was looking for an extension to do this for me.

There are some decent options available in the marketplace, but they tend to focus on a niche such as creating a new file ([advanced-new-file](https://marketplace.visualstudio.com/items?itemName=patbenatar.advanced-new-file)), or they take a different approach to what I would like ([File Utils](https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils)). This is the `Move active file` command from *File Utils*. It requires you to edit a filepath, which is not the best UX.

![file utils - move active file command demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecmmtj3gl0g5dccn0qmz.gif)

What I would love is an extension that covers all file operations in an consistent way and does it intelligently. So, I decided to prototype what I would do differently. Enter [**File Bunny**](https://marketplace.visualstudio.com/items?itemName=robole.file-bunny). 🐰

## File Bunny

Below I showcase a few commands and describe how I have made this process easier. If you have some feedback, I'd love to hear it!

### 1. Use consolidated lists for quick file selection

For some operations, we can make a consolidated list of the files for quick selection. 

Take the **`File Bunny: Move Active File`** command, a QuickPick dialog lets you choose from all folders (and subfolders) in your workspace.

![file bunny - move active file command demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bw1405zh67gyfnnv31ni.gif)

You can see how this can be more efficient and less error-prone than the equivalent command in *File Utils*.

You can exclude folders from the list with an `excludes` settings option to keep the list lean. This is similar to the `Files: exclude` setting that exists in VS Code already.

### 2. Use incremental completion to find files quickly

Modal file dialogs suck! It would be more efficient to use the keyboard to find files, but how can we do this without hacking filepaths? 

We can use incremental completion to build the path quickly.

Take the command, **`File Bunny: Open a Folder`**.

![file bunny - open folder command demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s1cncftoix35us6lxnwz.gif)

In this example, I do the following to open my *Beer Advisor* project:

1. Type "and", which highlights  the *Android* folder as the first option. Press <kbd>Tab</kbd> to select it.
2. Type "beer", which highlights the *beer-advisor* folder as the first option. Press <kbd>Tab</kbd> to select it.
3.  Accept the current directory (first option) by pressing <kbd>Enter</kbd> to open it.

This process of building paths is quick and can help you find what you're looking super fast.

You can also walk the file system with the arrow keys when you need to search around to find something. Use the left arrow to go back, and right arrow to go forward through the file system. 

### 3. Actions for the active file

Quite often, you want to do something to a file you're already working on. It seems silly to find it in the file explorer in the sidebar, and then perform an action on it.

![file bunny - delete active file command demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrrkxes9iliq0vqsf4xb.gif)

Just, run a command such as **`File Bunny: Delete Active File`** and it's done! The file is deleted (put into trash). Focus is switched to the next open file, so you can carry on without needing to switch view. Other extensions don't do this, you need to click to get back to the editing context!

## Feedback

Give **[File Bunny](https://marketplace.visualstudio.com/items?itemName=robole.file-bunny)** a try, and let me what you think! I've been using myself for a couple of weeks and love using it so far (as biased as that sounds)!