What is the shortcut in Visual Studio Code for console.log
Update Feb, 2019:
As suggested by Adrian Smith and others: If you want to bind a keyboard shortcut to create a console log statement, you can do the following:
- File > Preferences > Keyboard Shortcuts
- Above the search bar on the right you'll see this icon Click on it. (When hovered over it it says: Open keyboard shortcuts (JSON)
- Add this to the JSON settings:
{
"key": "ctrl+shift+l",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
}
}
Pressing CTRL+SHIFT+L will output the console snippet. Also, if you already have text selected it will be put inside the log statement.
If you rather want intellisene/autocomplete:
Go to Preferences -> User Snippets -> Choose Typescript (or whatever language you want) or a 'Global Snippet File' depending on your need. A json
file should open. You can add code snippets there.
There is already a snippet for console.log
commented out:
"Print to console": {
"scope": "javascript,typescript,javascriptreact",
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
You used to have to do this for every language, but now in the 'Global Snippet File' you can set the scope
property which allows you to explicitly declare multiple languages.
Should you need the exact name of the language: check it by clicking the Select Language Mode
button in the right side of the VS Code bottom toolbar. It will prompt you to select a language at the top and in the process will show the JSON name of the language in parenthesis, which you can enter in the snippet file as in the example above.
Also, you should set "editor.snippetSuggestions": "top"
, so your snippets appear above intellisense. Thanks @Chris!
You can find snippet suggestions in Preferences -> Settings -> Text Editor -> Suggestions
All the above answers works fine, but if you don't want to change the configuration of the visual studio code, rather want auto-completion for console.log(object);
you can simply use this shortcut clg and press Ctrl+Space for suggestion and hit Enter
Note : This feature is avaliable when you install JavaScript (ES6) code snippets extension.
Similarly you have auto-completion for :
-
clg for
console.log(object);
-
clo for
console.log('object :', object);
-
ccl for
console.clear(object);
-
cer for
console.error(object);
-
ctr for
console.trace(object);
-
clt for
console.table(object);
-
cin for
console.info(object);
-
cco for
console.count(label);
(This list continues...)
Also, Another great extension in this regard is Turbo Console Log. I'm personally using both of these on my daily basis and enjoy their combination.
References:
- link for JavaScript(ES6) code snippets :
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
- Preview from Visual Studio Code:
Type log
and hit enter
. It will auto-complete console.log();
The top answer by @Sebastian Sebald is perfectly fine, but hitting a similar problem (not console.log specifically, but rather it "missing") I wanted to also contribute an answer.
Your prefix is indeed working - by default its log
and in your case you have changed it to c
. When you type log
(or c
) VSCode will generate a full list of "all the things™" based on many factors (ie I don't know what factors, probably class relevance).
Things like snippets tend to gravitate towards the bottom. To bump them to the top, despite their length, add this to your settings:
"editor.snippetSuggestions": "top"