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

Question

I want to know what is the shortcut for console.log in Visual Studio code?

Solution 1

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:

1. File > Preferences > Keyboard Shortcuts
2. 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)
3. 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

Solution 2

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:

1. link for JavaScript(ES6) code snippets :

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

2. Preview from Visual Studio Code:

Solution 3

Type log and hit enter. It will auto-complete console.log();

Solution 4

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"

Solution 5

In Atom there is a nice shortcut for console.log() and I wanted the same in VS Code.

I used the solution by @kamp but it took me a while to figure out how to do it. Here are the steps I used.

1. Go to: File > Preferences > Keyboard Shortcuts

2. At the top of the page you will see a message that says: For advanced customizations open and edit keybindings.json

3. This opens two panes: the default keybindings, and your custom bindings.

4. Enter the code provided by @kamp

View more solutions

Comments

[Cristian Muscalu]

This used to work, but it doesn't anymore, since last update maybe? Is it just me? s17.postimg.org/5mxnx4umn/2017_02_14_11h10_03.jpg

[Sebastian Sebald]

The above defined prefix is "log" so typing "c" will not help ;) Start typing "l" instead.

[Cristian Muscalu]

Oh, i forgot to mention i had it changed to work with "c". I didn't change anything, and after update it's not working anymore. Don't have the snippet anymore, but this "prefix": "c", should make it work with "c" right?

[Sebastian Sebald]

If everything else is correct. Yes. Note that you also require to add the snippet to each language you want to use it. So if you added it to TS it will not work in JS, vice versa.

[Cristian Muscalu]

Here is the new proof with using "prefix" :"c" inside a js file s23.postimg.org/a8xwzsbrv/2017_02_14_12h16_00.jpg Can you confirm that is working with you?

[Sebastian Sebald]

Yes. But it is the last entry in a very long list.

[BinarySolo]

You're the hero I needed. Thanks!

[Chris]

Haha no worries at all

[russiansummer]

"ctrl+shift+c" for the "key" is a bit easier to click with one hand IMO and its not already taken by another keybinding if your using the default vs code keybindings

[Omtechguy]

How can i make the snippet to be first in the suggestion list? in my env, when i type log i get "log" of another lib and only then i see the snippet i just created.

[Sebastian Sebald]

See answer below :) "editor.snippetSuggestions": "top"

[t-bone]

I get an error saying Property editor.snippetSuggestions is not allowed though, what is that about?

[AJ H]

This is awesome!

[Ben Clarke]

I seem to have a bug where typing log and pressing enter only outputs console.log(); on some occasions, and I can't figure out why? Is it just me or can others type log then enter and get a consistent console.log(); output every time?

[nedemir]

You have to wait a few milisenconds / seconds for the command line to regonise what you have typed. sometimes it laggs a bit

[rdprado]

thanks, on mac had to go to code->preferences->keyboard shorcuts and than click on that button, than put the {...} inside the array.

[Aashish Chaubey]

You can alternatively click on the {} button beside the search bar to open the keybindings.json file -- Easiest way as I was not able to see the "For advanced customizations open and edit keybindings.json" message!

[Chris22]

Perfect. +1. This is what I was looking for -- not to have to make any config changes.

[Kris Lamote]

thanks man, someone should update the accepted answer so everyone else can skip 10 mins searching

[Sweet Chilly Philly]

This is not answering the OP's question as this would have to be imported over every project, and is just a straight up nuisance. Having an inbuilt keybind is definitely they way to go here

[Developer]

U Saved a lot of Time Man !! Thanks

[martinedwards]

This isn't there on my mac. I needed to do cmd+shift+p and then search for keyboard shortcuts (JSON)

[Joel Peltonen]

I think this might not be very reliable or is dependent on extensions. For me co+enter generates just the the text output and co+tab generates "confirm". Even "cons" + tab just generates "console".

[j b]

clg + tab gives ChannelMergerNode for me!

[palmaone]

I think you need to edit your keybindings as mentioned in the answers above ;)

[Amir Shabani]

Also 'cwa' for console.warn()

[bordeaux]

@Bossan "editor.snippetSuggestions": "top" should be placed in the settings.json file (ctrl+shift+p and type user settings) Alternatively, you can search for this property in the general user settings (Preferences > Settings) and use the dropdown menu to change it to top.

[Joey Baruch]

converts to console for me

[dziku86]

And if I want console log to appear one line under the selected text? Could this be done with a snippet?

[Jake]

Thanks. This was extremely useful. Here is my version using the clipboard, and adding a quick tag made up of the clipboard with all non-alphanumeric characters removed as an identifier incase there are multiple items logged: "snippet": "console.log(\"${CLIPBOARD/[^0-9^a-z]//gi}\", ${CLIPBOARD}$1);"

[rofrol]

No need to press ctrl+space. Suggestion appear without that.

[ejabu]

as for my use case, its better to remove the first element in sequence array. "editor.action.addSelectionToNextFindMatch" need to be removed

[Ian]

This did not work for me on Mac VSCode 1.64.2

[Arefe]

This is the best answer and very helpful. Thanks a lot.

[Arefe]

@BenClarke when you type the log, look the right-side for the texts that are coming. There are several options for the log and you need to choose the correct one for the console print. I suggest using the ES6 code snippets as answered above.

[Janis Basis Basovs]

this answer should start with 'intellisene/autocomplete' -> much better approach then keybindings.