Explain Codes LogoExplain Codes Logo

What is the shortcut in Visual Studio Code for console.log

javascript
snippet-engineering
debugging-tools
vscode-shortcuts
Nikita BarsukovbyNikita Barsukov·Mar 12, 2025
TLDR

In Visual Studio Code, the in-built shortcut for the console.log statement is log followed by pressing the Tab key. This converts your input to:

console.log();

Insert your content within the parentheses. Speed up your coding process by personalizing shortcuts in keybindings.json, or creating custom User Snippets.

Utilizing snippets for your own debugging

Personalized console.log() Shortcuts:

  1. Navigate via File > Preferences > User Snippets.
  2. Create a New Global Snippets file or choose an existing language.
  3. Customize the snippet 'prefix' to clg, then set 'body' for the desired console.log structure.
"Print to console": { "prefix": "clg", "body": ["console.log('$1');", "$2"], "description": "Custom console.log shortcut because we all deserve unique snippets!" }

Just type clg and press Tab, and it'll activate your new snippet.

Extensions can be your best friend:

There are a couple of community-created extensions providing additional value for logging:

  • JavaScript (ES6) code snippets: Opens a whole new world of abbreviations for faster JS coding.
  • Turbo Console Log: Speedrunner? This extension will automate the console.log process.

Feeding snippets with a custom dish

"Go beyond the Snippet":

User Snippets grant you the freedom to declare multiple languages with scope property:

"Print to console multiple": { "scope": "javascript,typescript,python", "prefix": "logm", "body": ["console.log('Can speak multiple languages: $1');", "$2"], "description": "Console.log for polyglots" }

To have your finger on snippet suggestions, prioritize them:

  • Find your way to File > Preferences > Settings.
  • Seek out the Editor: Snippet Suggestions.
  • Set this option to top to have your customized snippets on the front line.