DEV Community

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

Posted on • Edited on

51 5 1 1 2

VSCode - Create Files and Folders without using mouse

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
}


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 🖖

beer

Runner H image

New Hire? Let AI Handle Onboarding Tasks

From welcome docs to checklists to calendar invites — Runner H automates the entire onboarding workflow across Notion, Google Calendar, and forms.

Try Runner H

Top comments (13)

Collapse
 
luizfariasdev profile image
Luiz Farias

Hey this was really useful i created an account here just to say thanks!

Collapse
 
equiman profile image
Camilo Martinez

You welcome Luiz!

Collapse
 
pranto_paul_0087bf7b1c78e profile image
pranto paul

Try QuickPath extension instead !

extension link

It will make you development easy without mouse intervention

Collapse
 
attaryu profile image
M Attar • Edited

it's simple but usefull, thanks bro 🙌

Collapse
 
pranto_paul_0087bf7b1c78e profile image
pranto paul

Try QuickPath extension instead !

extension link

It will make you development easy without mouse intervention

Collapse
 
webdevhill profile image
Jeffrey Hill

thank you, creating component file structures in React just got quicker!

Collapse
 
lufc profile image
Luis Felipe CE

Awesome contribution, quick and simple, thanks

Collapse
 
martinacostadev profile image
Martín Dev.

Nice! Thanks. Do you know cafecito.app?

Collapse
 
equiman profile image
Camilo Martinez

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

Collapse
 
martinacostadev profile image
Martín Dev.

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

Collapse
 
pranto_paul_0087bf7b1c78e profile image
pranto paul

Try QuickPath extension instead !

extension link

It will make you development easy without mouse intervention

Collapse
 
equiman profile image
Camilo Martinez

You welcome!

Collapse
 
pranto_paul_0087bf7b1c78e profile image
pranto paul • Edited

Try QuickPath extension instead !

extension link

It will make you development easy without mouse intervention

AWS Q Developer image

Build your favorite retro game with Amazon Q Developer CLI in the Challenge & win a T-shirt!

Feeling nostalgic? Build Games Challenge is your chance to recreate your favorite retro arcade style game using Amazon Q Developer’s agentic coding experience in the command line interface, Q Developer CLI.

Participate Now

👋 Kindness is contagious

If this **helped, please leave a ❤️ or a friendly comment!

Okay