VSCode - Create Files and Folders without using mouse
Tags: vscode, productivity, terminal, programming
Published: 2020-10-02 16:13:19

Language: [🇪🇸] [Español](https://dev.to/equimancho/vscode-crear-archivos-y-directorios-sin-usar-el-raton-1c19) - [🇺🇸] [English](https://dev.to/equiman/vscode-create-files-and-folders-on-the-go-2hd6)

---

> Look ma, no ~~hands~~ mouse!

If you are trying to reduce the interaction with the mouse during development in order to increase productivity, you are in the correct place.

In old days I converted myself into a keyboard shortcut maniac when used to work with Excel creating reports and macros because my deadline was always: "I need that report for yesterday".

When someone asks me to teach excel for business, the first lesson is to disconnect the mouse, they struggle at first, but it's necessary because you are going to need to move really really fast.

---

On VSCode creating files and folders by default need a lot of mouse interactions, and I hate it. If you are like me, I'll be going to share the way that I found to do it fast, obviously, without mouse interaction.

## Learn

First we need to know an useful shortcut. It's a combination of toggle between code and file explorer.

| OS | Shortcut |
|---|---|
| mac | `Command + Shift + E` |
| win/linux | `Ctrl + Shift + E` |

Adding this configuration also it will reveals the active file focus in the sidebar:

```json
{
    "explorer.autoReveal": true
}
```
<figcaption>settings.json</figcaption>

![auto-reveal](https://dev-to-uploads.s3.amazonaws.com/i/7xhy52t7f80l8dp29mp0.gif)

I like this configuration because I didn't need to use navigation keys inside file explorer. Sometimes it's better sometimes not, so it's up to you!

## Create

The next step it's adding my secret keyboard shortcut settings. 

```json
[
    {
        "key": "ctrl+n",
        "command": "explorer.newFile",
        "when": "explorerViewletFocus"
    },
    {
        "key": "ctrl+shift+n",
        "command": "explorer.newFolder",
        "when": "explorerViewletFocus"
    }
]
```
![keyboard-config](https://dev-to-uploads.s3.amazonaws.com/i/ycd0einx7mkgnu7n7lq3.gif)

On Windows and Linux, you also need to add this configuration to disable the `new window` option when it's focused on file explorer.

```json
[
    {
        "key": "ctrl+shift+n",
        "command": "workbench.action.newWindow",
        "when": "!explorerViewletFocus"
    }
]
```

## Use

It's done. Unplug your mouse and enjoy it!

![demo](https://dev-to-uploads.s3.amazonaws.com/i/fu4sf4xv4zjb023ulud5.gif)

---

## Alternative

I also love the terminal. If you are not using `ZSH`, I'll recommend you give a try, and believe me you'll never come back.

{% link https://dev.to/equiman/iterm2--oh-my-zsh--powerlevel9k-best-terminal-combination-for-geeks-58l5 %}

> This post is for macOS user, but `ZSH` it's also available for Linux y and now for Windows using WSL.

On `ZSH` we have two magic commands:

- `take` create a directory and change the path to it. Instead of `mkdir` and `cd` commands.
- `touch` create a file or multiple files at the same time.

The trick to creating a component in one line is:

```bash
take Name && touch name{.css,.js,.test.js} 
```

Explained: 

- `take Name` command will create a folder called `Name` and change the path on it. 
- Then inside this folder with `touch name{.css,.js,.test.js}` command will use the same prefix `name` and create 3 files `name.css`, `name.js` and `name.test.js` with each value inside curly braces.

![command-line](https://dev-to-uploads.s3.amazonaws.com/i/g24j8nkx0g9tzv2zqfni.gif)

---

**That’s All Folks!**
**Happy Coding** 🖖

[![beer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkgsx4aw6qn9i9ax6as9.png)](https://github.com/sponsors/deinsoftware)