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

Question

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'.

2: Enter desired folder and file name.

3: The result from step 1 & 2.

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.

Also see my answer at https://stackoverflow.com/questions/63980558/recording-a-macro-or-a-serios-of-actions-in-visual-studio-code/64289429#64289429 which creates a folder and number of files with default content in each for a different approach. Your situation was simpler since you didn't require any content added to each file. — Mark, Oct 11 '20 at 01:43
I still was thinking they would use the same glob format as webpack. ```Test/Test.{component,styles}.jsx``` — mattmischuk, Mar 25 '21 at 21:33
I think it would be nice if we could do something like `MyNewFolder/index.tsx,styles.ts` using the comma to declare the two new files under the new folder. — Guilherme Abacherli, Apr 28 '22 at 21:50

Mark · Accepted Answer · 2020-10-07T19:30:59.017

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.]

Thanks Mark! This looks like it would do the trick. More initial setup then I wanted, but it will be worth it. Can you direct me how to get to my tasks.JSON and keybindings.JSON? — DigitalM0nkey, Oct 07 '20 at 18:13
Under the `.vscode` folder just create a `tasks.json` file and you can paste in what I showed. For the `keybindings.json`, look for `Open Keyboard Shortcuts (JSON)` in the command palette. — Mark, Oct 07 '20 at 19:30
I've found this extension https://marketplace.visualstudio.com/items?itemName=liuyang.quick-create . If necessary, you can use Google Translate to understand the instructions ;) — ghashi, Dec 14 '20 at 15:56

score 1 · Answer 2 · answered Aug 24 '23 at 10:54

I think faster would be to use Intergrated Terminal option

After select Git Bash (any bash interpreter)

and paste command with i.e "test" as directory and after / files you want to create (u get the idea ). If you want to create only files u can use "touch" instead of "mkdir -p"

mkdir -p test/validateAdAccounts.ts \
test/validateAccountsInPask.ts \
test/validateUsers.ts \
test/validateGroups.ts \
test/validateMainMappingAttributes.ts

and enter

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

2 Answers2

Linked