94

Just tired of typing console.log again and again, and do not find a way like Sysout + Control + Space in Eclipse will create System.out.println().

1

13 Answers 13

158

There's a predefined Postfix template that allows you to type .log after a JavaScript expression or string and hit Tab to transform it to console.log(<something you've typed>).

You can also create a Live template (see Preferences | Editor | Live templates) that would expand into a code snippet once you type the selected abbreviation and hit Tab.

Update: there's now also a plugin that allows you to add console.log with a shortcut: https://plugins.jetbrains.com/plugin/10986-console-log

4
  • 28
    Can also use $END$ in live template like this: console.log($END$); to set the cursor between the brackets in the end of autocompletion.
    – olessia
    Commented Dec 20, 2015 at 15:43
  • 7
    Remember to set up Define section to enable for whatever the scripting you use. Commented Jul 19, 2016 at 4:58
  • In WebStorm today from what I see the shortcut is cl in default not `.log And live templates rock! love how dynamic and customizable it is
    – greensin
    Commented Jan 9, 2021 at 7:34
  • Live template for cl as mentioned is the way to go! Under dropdown for scope don't forget to check Expression, Statement, and Other under the "Javascript" section so that the cl + TAB works within an if statement too. Not sure if was anything else I'm missing but that's what I actually ended up doing. Commented Mar 9, 2021 at 22:18
116

Yes it does,

<anything>.log and press Tab key. This will result in console.log(<anything>);

ie,

<anything>.log + Tab => console.log(<anything>);


eg1: variable

let my_var = 'Hello, World!';
my_var.log + Tab => console.log(my_var);

eg2: string

'hello'.log + Tab => console.log('hello');

eg3: string and variable

'hello', my_var.log + Tab => console.log('hello', my_var);
4
  • 11
    I'm 2000% more efficient with this one right now ... :-D thanks! Commented Dec 28, 2018 at 9:18
  • 1
    much better than sysout...! Commented Mar 20, 2019 at 22:40
  • 2
    @SaravanabalagiRamachandran, brilliant! I just figured out that the all the built-in live templates are also editable. I would like to tweak this one, but I can only find the default log+tab template, and not the <anything>+tab. Do you know where it is in the editor settings, maybe? Commented Dec 6, 2019 at 15:03
  • @programstinator, The built-in.log + <TAB> is handled with "Postfix Code Completion", not Live Templates. jetbrains.com/help/idea/2020.3/…
    – kaliatech
    Commented Dec 18, 2020 at 22:43
19

[UPDATE 2023]

Typing log + Enter autocompletes to console.log()

2
  • @Chopper Lee this should work today without any further configuration
    – db306
    Commented Nov 16, 2020 at 13:25
  • I am 1 million times more efficient with this right now.. together we are stronger! Commented Apr 19, 2021 at 14:34
9

I made my own template that seems to work. It may be useful for somebody.

Abbreviation: ll

Template text:

console.log('$NAME$ ', $VALUE$);
    $END$

Variables: (just select the given field values by clicking drop down box)

  1. NAME - jsDefineParameter()
  2. VALUE - jsSuggestVariableName
2
  • Can't get this to work. I added it to Live Templates, under Javascript. But typing ||<tab> it just tabs...no template insert. Is there something I missed?
    – Scott
    Commented May 30, 2018 at 16:46
  • 2
    Scott, I think you forgot to write variables. Look at this screen with my live template/shortkeys. yadi.sk/i/2AaC_ja33Z342U
    – zato
    Commented Jul 10, 2018 at 19:56
7

I'm including what I find to be the most efficient, which I added via live templates -> javascript -> applicable to "Everything". Hopefully someone finds it useful.

console.log('L$LINE$ $MYSTRING$ ===', $MYVAR$);$END$

What it does: When I type cl and press tab, it creates the log and the first thing you type fills both MYSTRING and MYVAR variables. If you tab again, it selects MYVAR where you can rewrite/delete as desired. The third time you hit tab will take you to the end of the line at $END. This snippet also prints the line number like L123 but you can easily remove that if it isn't helpful because obviously most browsers show line number anyway.

You also have to set the variables' behaviour as seen in the image below:

Edit variables setup

4
  • This is really amazing and worth the 4 minutes I just spent following your directions. Thank you. Commented Sep 23, 2019 at 5:40
  • 2
    Marvellous!! I made one tiny super-simple change which allows me to have autocomplete for $MYVAR$ (and consequently for $MYSTRING$ at the same time). In the Edit variables dialogue, I simply replaced $MYVAR$ with $MYSTRING$ so that $MYVAR$ is now on top. Here's an image of that, it's easier to understand.
    – Bloke
    Commented Jul 15, 2020 at 19:08
  • @Bloke That's really amazing. Have you figured out how to prevent having to press enter 2x after selecting a var from the auto-completion menu?
    – ViBoNaCci
    Commented May 13, 2021 at 21:43
  • @ViBoNaCci No, unfortunately not. I haven't really tried, though, I'm more or less fine with that
    – Bloke
    Commented May 14, 2021 at 14:55
4

use Macros!

https://www.jetbrains.com/help/webstorm/using-macros-in-the-editor.html

I recorded a macro that takes the name my cursor is on and create

console.log("#### name = ", name);

on the next line. and assigned a keyboard shortcut to it :)

super easy, and couldn't get Live Template to get the same result with 1 action.

to create a new macro: Edit -> Macros -> Start Macro Recording. then record your next moves and create the desired result. this is mine:

enter image description here

2
  • Hi Idan, could you share it with us please? Commented Jan 13, 2020 at 9:59
  • Hey David, i've edited the post to add some more info. i think it's better to record a macro than to edit by hand but added a screenshot of the result i got. good luck
    – idan hav
    Commented Mar 5, 2020 at 14:43
4

Try a logit plugin. It provides the next logging pattern by default:

const data = 'data';    
console.log('-> data', data);

You can configure it.

enter image description here

3
  • 1
    This is what I'm using, however, One of Turbo Console Log's great powers is being able to remove all log messages at once. Haven't been able to replicate that in Webstorm.
    – David
    Commented Aug 5, 2023 at 11:49
  • LogIt is not usable on latest version of PHPStorm now, now sure about WebStorm Commented Oct 5, 2023 at 4:30
  • 1
    @duong-nguyen It works on the latest WebStorm (2023.2.2). Commented Oct 6, 2023 at 7:28
2

This is my solution, it somewhat mimics a turbo-console approach and gives you certain freedoms to build on it.

Step 1: Go to Editor > General > Postfix Completion;

Step 2: Click on JavaScript, click the + button, select JavaScript and TypeScript;

Step 3: In the Key input, type a alias for your command, I choose 'cl' for mine;

Step 4: In the 'Minimum language level' select your desired preference, I choose ECMAScript 6+;

Step 5: In the bellow text area, add your logic, for me it is console.log('$EXPR$', $EXPR$, '$END$');

Step 6: Customize however you like.

So what does all of this do?

Lets consider the following:

const willNeedToBeLogged = 'some value you want to check';

All you need to do for a console long is type

willNeedToBeLogged.cl + press (Tab, Enter or Spance)

And you will get this

console.log('willNeedToBeLogged', willNeedToBeLogged, '');

With your cursor being on the $END$ variable, where you could write, a line, or anything you like.

Have fun!

0
1

I made a custom template. This can help you.

Abbreviation: clog

Template code:

console.log("\n\n--------------------------------");
console.log($END$);
console.log("--------------------------------\n\n");
1

Simplest live template text:

console.log($END$);
0

Maybe it is a recent addition but you can write log and hit tab and console.log() will appear with the caret in between the braces.

The answer from Ekaterina Prigara (https://stackoverflow.com/a/32975087/5653914) was very useful to me but if you want to log a string like "Test" this method is quicker.

0

Go to Settings => Editor => Live Templates

Template text:

console.log("'zxc', '$VALUE$'", $VALUE$);

Press 'Edit Variables' button and chose for $VALUE$ as clipboard()

In the code just copy the required variable and press 'cl' + Tab

'zxc' will allow you to filter the desired console.log in the debugger or find it in the code

-1

Try Dot Log (vscode extension), It can automatically transfer aaa.log to console.log('aaa', aaa )

1
  • VS Code extensions are not compatibles with IntelliJ IDEs. Commented Apr 27, 2023 at 21:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.