VSCode - Create Files and Folders without using mouse

#vscode #productivity #terminal #programming

Language: [🇪🇸] Español - [🇺🇸] English

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:

{
    "explorer.autoReveal": true
}

settings.json

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.

[
    {
        "key": "ctrl+n",
        "command": "explorer.newFile",
        "when": "explorerViewletFocus"
    },
    {
        "key": "ctrl+shift+n",
        "command": "explorer.newFolder",
        "when": "explorerViewletFocus"
    }
]

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

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

Use

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

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.

iTerm2 + Oh My Zsh! + Powerlevel10K best terminal combination for Geeks!

Camilo Martinez ・ Sep 25 '18

#productivity #terminal #macos #zsh

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:

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.