webstorm 是否有 console.log 或 console.info 的快捷方式？

Question

只是厌倦了一次又一次地输入 console.log，并且没有找到像 Sysout + Control + Space 这样的方法在 Eclipse 中创建 System.out.println().

Answer 1

有一个预定义的 Postfix 模板，允许您在 JavaScript 表达式或字符串后键入 .log，然后按 Tab 键将其转换为 console.log()。

您还可以创建一个实时模板（请参阅“首选项”|“编辑器”|“实时模板”），一旦您键入选定的缩写并按 Tab 键，它就会扩展为代码片段。

更新：现在还有一个插件允许您使用快捷方式添加 console.log：https://plugins.jetbrains.com/plugin/10986-console-log

Answer 2

我制作了自己的模板，似乎可以使用。它可能对某些人有用。

缩写：ll

模板文本：

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

变量：（只需 select 通过单击下拉框给定的字段值）

名称 - jsDefineParameter()
VALUE - jsSuggestVariableName

Answer 3

我制作了一个自定义模板。这可以帮助你。

缩写：堵塞

模板代码：

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

Answer 4

是的是的，

<anything>.log 并按 Tab 键。这将导致 console.log(<anything>);

即

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

eg1:变量

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

eg2: 字符串

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

eg3: 字符串和变量

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

Answer 5

最简单的实时模板文本：

console.log($END$);

Answer 6

我将我发现最有效的内容包括在内，这些内容是我通过实时模板添加的 -> javascript -> 适用于 "Everything"。希望有人觉得它有用。

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

它的作用：当我键入 cl 并按 Tab 键时，它会创建日志，并且您键入的第一个内容会同时填充 MYSTRING 和 MYVAR 变量。如果您再次按 Tab 键，它会选择 MYVAR，您可以根据需要选择 rewrite/delete。第三次按 Tab 键将带您到行尾 $END。此代码段还打印行号，如 L123，但如果它没有帮助，您可以轻松删除它，因为显然大多数浏览器无论如何都会显示行号。

您还必须设置变量的行为，如下图所示：

Edit variables setup

Answer 7

使用宏！

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

我录制了一个宏，以我的光标所在的名称命名并创建

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

在下一行。并为其分配了键盘快捷键:)

超级简单，并且无法通过 1 个操作让实时模板获得相同的结果。

创建新宏：编辑 -> 宏 -> 开始宏录制。然后记录您的下一步行动并创建所需的结果。这是我的：

Answer 8

也许这是最近添加的，但您可以编写日志并点击制表符，console.log() 将出现在大括号之间的插入符号。

Ekaterina Prigara () 的回答对我很有用，但如果你想记录像 "Test" 这样的字符串，这种方法会更快。

Answer 9

[2020 年更新]

键入 log + 输入自动完成 console.log()

Answer 10

这是我的解决方案，它在某种程度上模仿了 turbo-console 方法，并为您提供了一定的构建自由。

第 1 步：转到编辑器 > 常规 > 后缀完成；

第 2 步：单击 JavaScript，单击 + 按钮，select JavaScript 和 TypeScript；

第 3 步：在按键输入中，为您的命令输入别名，我选择 'cl'；

第四步：在'Minimum language level'select你想要的首选项中，我选择ECMAScript 6+；

第 5 步：在下面的文本区域，添加您的逻辑，对我来说是 console.log('$EXPR$', $EXPR$, '$END$');

第 6 步：随心所欲地自定义。

那么所有这些有什么用呢？

让我们考虑以下几点：

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

对于长控制台，您需要做的就是输入

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

你会得到这个

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

将光标放在 $END$ 变量上，您可以在其中书写、一行或任何您喜欢的内容。

玩得开心！

Answer 11

试试 logit 插件。它默认提供下一个日志记录模式：

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

您可以配置它。

Answer 12

试试Dot Log (vscode extension), 可以自动将aaa.log转成console.log('aaa',aaa )

webstorm 是否有 console.log 或 console.info 的快捷方式？

Does webstorm have some shortcut for console.log or console.info?

webstorm

shortcut