does webstorm have some shortcut for console.log or console.info

问题

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:

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

回答2:

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);

回答3:

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

回答4:

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

回答5:

I made a custom template. This can help you.

Abbreviation: clog

Template code:

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

回答6:

Simplest live template text:

console.log($END$);

回答7:

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.

来源：https://stackoverflow.com/questions/32960725/does-webstorm-have-some-shortcut-for-console-log-or-console-info

标签

WebStorm

shortcut