visual-studio-codemacrosvscode-tasks

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


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?


Solution

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

    selection to new file