How to simultaneously create a new folder and multiple files in VSCode?

Viewed 4527

I discovered recently in Visual Studio Code that I can create a new folder and a new file simultaneously by using the following patten: Test/Test.jsx

eg.

1: Right click and select 'New File'. New File

2: Enter desired folder and file name. Enter folder and file name

3: The result from step 1 & 2. Folder and file creation

Anyone know if it's possible to create a folder with multiple files using a similar pattern? This is what I'd like to be able to do. Add multiple files to a new folder

1 Answers

I don't think you can do it the way you showed, but it is pretty easy to do it with a task. In your tasks.json:

{
  "version": "2.0.0",

  "tasks": [
    {
      "label": "new react folder and files",

      "command": "mkdir ${input:dirName} && touch '${input:dirName}/${input:dirName}.component.jsx' '${input:dirName}/${input:dirName}.styles.jsx'",

      "type": "shell",
      "problemMatcher": [],
      "presentation": {
        "echo": false,
        "reveal": "silent",
        "focus": false,
        "panel": "shared",
        "showReuseMessage": false,
        "clear": true
      },
   }
],  

// ........................................................................................
  
  "inputs": [

    {
      "type": "promptString",
      "id": "dirName",
      "description": "Complete my folder name",
      "default": "jsx folder to create"
    }
  ]
}

And some keybinding to trigger the task (in your keybindings.json):

[
  {
    "key": "alt+j",
    "command": "workbench.action.tasks.runTask",
    "args": "new react folder and files",
  }
]

This will prompt for the directory name and then create the folder and two files within it.

[I used bash commands mkdir and touch to create the folder and files, if you are using a shell without those commands swap out the ones you have.]

create a react folder and files with a task

Related