VSCode Snippet: console.log on a Hotkey

I used to rely on a VSCode extension for this. At some point I decided to remove it and write my own keybinding instead. Turns out it only takes a few lines of JSON.

• Press it with nothing selected → inserts console.log() with the cursor inside
• Press it with a variable selected → inserts console.log('variableName', variableName) on the next line

The Setup

Open the Command Palette with Cmd+Shift+P, search for Open Keyboard Shortcuts (JSON), and add these two entries:

1
[
2
  {
3
    "key": "cmd+shift+l",
4
    "command": "editor.action.insertSnippet",
5
    "when": "editorTextFocus && !editorHasSelection",
6
    "args": {
7
      "snippet": "console.log($1)$0"
8
    }
9
  },
10
  {
11
    "key": "cmd+shift+l",
12
    "command": "runCommands",
13
    "when": "editorTextFocus && editorHasSelection",
14
    "args": {
15
      "commands": [
16
        "editor.action.clipboardCopyAction",
17
        "cursorLineEnd",
18
        {
19
          "command": "editor.action.insertSnippet",
20
          "args": {
21
            "snippet": "\nconsole.log('$CLIPBOARD', $CLIPBOARD)$0"
22
          }
23
        }
24
      ]
25
    }
26
  }
27
]

On Windows or Linux, replace cmd with ctrl.

How It Works

The two when conditions — editorHasSelection and !editorHasSelection — make sure the right variant fires.

When no text is selected, a simple snippet inserts console.log() and places the cursor inside the parentheses.

When a variable is selected, three commands run in sequence:

1. clipboardCopyAction — copies the selected text
2. cursorLineEnd — moves the cursor to the end of the line, clearing the selection
3. insertSnippet — inserts the log statement on a new line, reading the variable name from $CLIPBOARD

So selecting DEVICE_NAME and pressing the hotkey gives:

1
const DEVICE_NAME = 'GlucoKeto-Monitor'
2
console.log('DEVICE_NAME', DEVICE_NAME)

No extensions needed. runCommands is built into VSCode.