VS Code - configure shortcut to insert console.log() in JavaScript or TypeScript

In this short article, I whould like to explain how to create shortcut that inserts console.log() in VS Code.

The solution uses built in snippet feature.

Simple steps:

1. Go to: File -> Preferences -> Keyboard Shortcuts (or just press Ctrl+k  Ctrl+s),

2. In the top right corner click Open Keyboard Shortcuts (JSON) icon to see JSON editor,

3. Paste the following item:

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

4. Save configuration (you can press Ctrl+s),

5. Open some JavaScript file, select some text, and press Ctrl+Shift+L keys.

Hints to JSON "snippet" field:

• $1 tells where carriage should be moved after snippet insert operation completed,
• $2 tells from where Tab key pressed, inserts new tabs to source code - before $2 position it just jumps to the new positions,
• $1 and $2 are called Tabstops - check official documentation here.

References

1. Snippets in Visual Studio Code - VS Code Docs