Is there a VS Code shortcut for creating a new file from selected or clipboard code?

Question

I work with large html files that I would like to fragment into separate files. The process of doing this is quite tedious as it requires copying the code, creating a new file, pasting it in the new file, and then selecting a folder and a new name to save it under.

Is there a built-in shortcut, macro or extension for VS Code for making this easier?

Mild

Answer 1

Just a note for others that since this is an html file, the new refactor Move to a new file is not available. It does what you want and will work in some other languages (like js/ts), but not html. You can access it by selecting the text to move and in the context menu choose Refactor.. - it may even add import statements to the old file if supported.

---

This uses the built-in runCommands command which can run multiple commands. The following keybinding will get the selected text, paste it into a new untitled file and the saveAs command will prompt you for a fileName.

In keybindings.json:

{
  "key": "alt+q",
  "command": "runCommands",
  "args": {
    "commands": [
      // choose which one you want
      "editor.action.clipboardCutAction",
      // "editor.action.clipboardCopyAction",
      
      "workbench.action.files.newUntitledFile",
      "editor.action.clipboardPasteAction",
      
      // prompt for save immediately
      "workbench.action.files.saveAs",
      
    ]
  },
  "when": "editorFocus"
}

I don't know how to automate the "selecting a folder and a new name to save it under" part of your question. I think you are still going to have to do that manually, but there is some handy "intellisense" for that in the "saveAs" dialog.

---

Update in 2020

After I came up with this answer, see in vscode how can I quickly generate a new file with datetime in the name?

I thought there might be a better way to handle creating the file with a task and prompting for a folder and filename in one go. You lose the saveAs intellisense on your folder structure, but it is a pretty good technique to know in any case. And a macro isn't needed. In a bash shell:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "newFile",

        // assuming your folder name isn't static
      "command": "echo '${selectedText}' > ${input:folderName}/${input:fileName}.html",
      "type": "shell",
      "problemMatcher": [],
      "presentation": {    // terminal handling which you may not care about and could delete
        "echo": false,
        "reveal": "silent",
        "focus": false,
        "panel": "shared",
        "showReuseMessage": false,
        "clear": true
      },
      "promptOnClose": false
    }
  ],
  
  "inputs": [
    {
      "type": "promptString",     
      "id": "folderName",
      "description": "Complete my folder name.",
      "default": "folder"
    },
    {
      "type": "promptString",
      "id": "fileName",
      "description": "Complete my file name.",
      "default": "new file name"
    }
  ]
}

Some keybinding to run that task (or just run it from the command palette Run Task command):

{
  "key": "alt+r",    // whatever you choose
  "command": "workbench.action.tasks.runTask",
  "args": "newFile"
},

That's it, select your text, and run the task Alt+R.

Dynamometer

WTF!? This is awesome! I can't believe this isn't a default feature. This is going to save me so much time and effort. – Mild

You should release it as a plugin! – Mild