How to use VSCode Macros

A quick guide to increasing your developer productivity with VSCode Macros (5x, 10x, 25x, 100x gains)

Guide

Resources

keybindings.json

[
    // other keybindings (remove this line)
    {
        "key": "alt+1",
        "command": "macros.newVueComponent"
    },
    {
        "key": "alt+2",
        "command": "macros.ifWrap"
    },
    {
        "key": "alt+3",
        "command": "macros.yarnRunDev"
    },
    {
        "key": "ctrl+e",
        "command": "macros.extractToVar"
    }
]
                

settings.json -> Yarn Run Dev

// other settings (remove this line)

"macros": {
    "yarnRunDev": [
        "workbench.action.terminal.focus",
        {
            "command": "workbench.action.terminal.sendSequence",
            "args": {
            "text": "open http://localhost:3000; yarn run dev --port 3000\n"
            }
        },
    ],

    // other macros (remove this line)
}
                

settings.json -> If Wrap

// other settings (remove this line)

"macros": {
    "ifWrap": [
      "editor.action.clipboardCutAction",
      {
        "command": "editor.action.insertSnippet",
        "args": {
          "name": "iff"
        }
      },
      {
        "command": "type",
        "args": { "text": "true" },
      },
      "cursorLineEnd",
      "cursorDown",
      "editor.action.clipboardPasteAction"
    ],

    // other macros (remove this line)
}
                

settings.json -> Extract string to variable

// other settings (remove this line)

"macros": {

    "extractToVar": [
      "editor.action.clipboardCutAction",
      {
        "command": "type",
        "args": { "text": "newVar" },
      },
      "cursorLineEnd",
      "cursorLineEnd",
      "editor.action.insertLineBefore",
      {
        "command": "type",
        "args": { "text": "const newVar = " },
      },
      "editor.action.clipboardPasteAction",
      {
        "command": "editor.actions.findWithArgs",
        "args": {
          "searchString": "newVar",
        }
      },
      "editor.action.nextMatchFindAction",
      "closeFindWidget",
      {
        "command": "editor.action.rename",
        "when": "editorTextFocus"
      },
    ],

    // other macros (remove this line)
}
                

settings.json -> Auto Generate New Vue Component

// other settings (remove this line)

"macros": {

    "newVueComponent": [
        "editor.action.clipboardCopyAction",
        {
          "command": "editor.actions.findWithArgs",
          "args": {"searchString": "<script"}
        },
        "editor.action.nextMatchFindAction",
        {
          "javascript": [
            "await new Promise(resolve => setTimeout(resolve, 200));"
          ],
        },
        "closeFindWidget",
        "cursorLineEnd",
        "editor.action.insertLineAfter",
        {
          "command": "type",
          "args": { "text": "import " },
        },
        "editor.action.clipboardPasteAction",
        {
          "command": "type",
          "args": { "text": " from './" },
        },
        "editor.action.clipboardPasteAction",
        {
          "command": "type",
          "args": { "text": ".vue'" },
        },
        "cursorLineEnd",
        "cursorLeft",
        "cursorWordEndLeftSelect",
        "cursorWordEndLeftSelect",
        "cursorWordEndLeftSelect",
        "editor.action.clipboardCopyAction",
        "explorer.newFile",
        "editor.action.clipboardPasteAction",
        "workbench.action.focusPanel",
        {
          "javascript": [
            "await new Promise(resolve => setTimeout(resolve, 500));"
          ],
        },
        {
          "command": "editor.action.insertSnippet",
          "args": {
            "name": "vues"
          }
        },
        "workbench.action.files.save",
        "workbench.action.previousEditor",
        "workbench.action.files.save",
        "cursorLineEnd",
        {
          "javascript": [
              "let response = await window.showInformationMessage('Wow that was fast!')"
          ]
        }
    ],

    // other macros (remove this line)
}