Does webstorm have some shortcut for console.log or console.info?
WebstormShortcutWebstorm Problem Overview
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()
.
Webstorm Solutions
Solution 1 - Webstorm
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(
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
Solution 2 - Webstorm
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);
Solution 3 - Webstorm
[UPDATE 2020]
Typing log
+ Enter autocompletes to console.log()
Solution 4 - Webstorm
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
Solution 5 - Webstorm
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:
Solution 6 - Webstorm
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:
Solution 7 - Webstorm
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!
Solution 8 - Webstorm
I made a custom template. This can help you.
Abbreviation: clog
Template code:
console.log("\n\n--------------------------------");
console.log($END$);
console.log("--------------------------------\n\n");
Solution 9 - Webstorm
Simplest live template text:
console.log($END$);
Solution 10 - Webstorm
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.
Solution 11 - Webstorm
Try a logit plugin. It provides the next logging pattern by default:
const data = 'data';
console.log('-> data', data);
You can configure it.
Solution 12 - Webstorm
Try Dot Log (vscode extension), It can automatically transfer aaa.log to console.log('aaa', aaa )