DEV Community

Cover image for VSCode - Create Files and Folders without using mouse
Camilo Martinez
Camilo Martinez

Posted on • Updated on

VSCode - Create Files and Folders without using mouse

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


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
}
Enter fullscreen mode Exit fullscreen mode
settings.json

auto-reveal

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"
    }
]
Enter fullscreen mode Exit fullscreen mode

keyboard-config

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"
    }
]
Enter fullscreen mode Exit fullscreen mode

Use

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

demo


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.

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} 
Enter fullscreen mode Exit fullscreen mode

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


That’s All Folks!
Happy Coding 🖖

Buy me a coffee

Discussion (5)

Collapse
martindevaluado profile image
Martín Dev.

Nice! Thanks. Do you know cafecito.app?

Collapse
equiman profile image
Camilo Martinez Author

Yes, but I think only works with Mercado Page. Am I right?

Collapse
martindevaluado profile image
Martín Dev.

Hi Camilo, sorry for the delay. Actually yes, but they are working to use anothers services.

Collapse
equiman profile image
Camilo Martinez Author

You welcome!