Super charge your console.log snippets in Visual Studio Code

posted on 26/12/2021

Switching from PHPstorm to vs code has been great so far, though I have been missing some features, one of them was being able to do `.log` and log anything that was before the dot.
Here are the 2 methods I found to be good to replace this features.

method 1: use custom keybinding to replace text

    {
    "key": "cmd+shift+l",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "snippet": "console.log('${TM_SELECTED_TEXT}', ${TM_SELECTED_TEXT})"
    }
  },
Method 1 result

Method 2: macros extension

For this you will need to add macros - Visual Studio Marketplace this extension will allow you to easily use existing actions to log your selected
open the command palette, type `open settings` and pick `Open Settings (JSON)`
in this file replace ”macros”: null with the following:

  "macros": {
    "snippetWithDescription": [
      "editor.action.clipboardCopyAction",
      "editor.action.insertLineBefore",
      {
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
          "snippet": "console.log('$CLIPBOARD', $CLIPBOARD)$0"
        }
      }
    ]
  }

then in keybindings.json:

  {
    "key": "cmd+shift+l",
    "command": "macros.snippetWithDescription"
}

Method 2 result

Method 3: use custom snippet

Though this doesn’t really work that well, it came the closest to replacing it exactly as phpstorm had it
open the `command pallette` and type `configure user snippets` then add a new global snippet file and add the following:

  "Print to console": {
    "scope": "javascript,typescript",
    "prefix": "log",
    "body": ["console.log('${TM_SELECTED_TEXT}')"],
    "description": "console log"
  }
Method 3 result



Instagram