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()
.
13 Answers
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
-
28Can also use $END$ in live template like this:
console.log($END$);
to set the cursor between the brackets in the end of autocompletion.– olessiaCommented Dec 20, 2015 at 15:43 -
7Remember 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– greensinCommented 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 thecl + 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
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);
-
11I'm 2000% more efficient with this one right now ... :-D thanks! Commented Dec 28, 2018 at 9:18
-
1
-
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/… Commented Dec 18, 2020 at 22:43
[UPDATE 2023]
Typing log
+ Enter autocompletes to console.log()
-
@Chopper Lee this should work today without any further configuration– db306Commented 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
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)
- NAME - jsDefineParameter()
- VALUE - jsSuggestVariableName
-
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?– ScottCommented May 30, 2018 at 16:46
-
2Scott, I think you forgot to write variables. Look at this screen with my live template/shortkeys. yadi.sk/i/2AaC_ja33Z342U– zatoCommented Jul 10, 2018 at 19:56
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:
-
This is really amazing and worth the 4 minutes I just spent following your directions. Thank you. Commented Sep 23, 2019 at 5:40
-
2Marvellous!! I made one tiny super-simple change which allows me to have autocomplete for
$MYVAR$
(and consequently for$MYSTRING$
at the same time). In theEdit 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.– BlokeCommented 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? 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– BlokeCommented May 14, 2021 at 14:55
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:
-
-
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 havCommented Mar 5, 2020 at 14:43
Try a logit plugin. It provides the next logging pattern by default:
const data = 'data';
console.log('-> data', data);
You can configure it.
-
1This 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.– DavidCommented 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
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!
I made a custom template. This can help you.
Abbreviation: clog
Template code:
console.log("\n\n--------------------------------");
console.log($END$);
console.log("--------------------------------\n\n");
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.
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
Try Dot Log (vscode extension), It can automatically transfer aaa.log to console.log('aaa', aaa )
-
VS Code extensions are not compatibles with IntelliJ IDEs. Commented Apr 27, 2023 at 21:13