DEV Community

loading...
Cover image for VSCode - Create Files and Folders on the go

VSCode - Create Files and Folders on the go

equiman profile image Camilo Martinez Updated on ・2 min read

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 usefull shortcut:

OS Shortcut
mac Command + Shift + E
win/linux Ctrl + Shift + E

It's a combination of toggle between code and file explorer. Adding this configuration 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.

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 cofee

Discussion (5)

pic
Editor guide
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