Shortcut For Creating a New MyComponent.jsx file in VScode

Question

I'd like to be able to create a new .jsx file with a single keystroke in VSCode. Currently, using the default "new file" shortcut ctrl+n creates Untitled-X file with no extension, and the file does not immediately appear in my project folder myProject, but in "Open Editors".

I'm not sure why this is the default behavior. Hitting the "New File" button in the file browser creates a new file in the currently focused folder, as you would expect.

How hitting the new file button differs from using the "New File" command in the command palette is a mystery to me.

What I would like to happen is that with ctrl+n, a new .jsx file is created. Additionally, it'd be great if the new file could use some kind of template variable scheme. So I'd get something like this when I use ctrl+n:

Maybe such functionality would be better achieved with a bash script?

Answer 1

For part one of the question: VS Code - Add a new file under the selected working directory, ctrl+n can be remapped to "command": "explorer.newFile".

For part two of the question, the addon Auto Snippet allows automatically inserts a predefined snippet when a file is created, or an empty file is opened. So I can run a snippet to create a default .tsx react component.

Combining the new shortcut binding and the extension met my needs.

Note: When configuring Auto Snippet, you need to provide the name of the snippet in your <LANGUAGE>.json file, not the prefix for the snippet. This confused me at first:

//typescript.json
  "const": { //<--- snippet name to use in settings.json
    "prefix": "co",
    "body": ["const ${1:varname} = ${2:value} "],
    "description": ""
  },

  //settings.json
  //runs whenever a new .ts file is created
  "autoSnippet.snippets": [
    {
      "language": "typescript",
      "snippet": "const",
      "commands": ["editor.action.commentLine"]
    },
  ]