Visual Studio Code for console.log 中的快捷方式是什么

小开

最佳答案

2019年2月更新:

如果你想绑定一个快捷键来创建一个控制台日志语句，你可以这样做:

文件 > 参考资料 > 键盘快捷键
在右侧的搜索栏上方，你会看到这个图标 < img src = “ https://i.stack.imgur.com/0TEPb.png”alt = “ enter image description here”/> < img src = “ https://i.stack.imgur.com/0TEPb.png”alt = “在这里输入图片描述”/> 点击它。当鼠标悬停在它上面时，它会说: 打开键盘快捷键(JSON)
将其添加到 JSON 设置:

{
"key": "ctrl+shift+l",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
}
}

按 CTRL + 换班 + L将输出控制台代码片段。另外，如果您已经选择了文本，那么它将被放入 log 语句中。

如果你想要智能/自动完成:

转到偏好-> 用户代码段-> 选择 打印稿(或任何你想要的语言)或“全局代码段文件”根据你的需要。应该打开 json文件。您可以在那里添加代码段。

console.log已经有一个片段被注释掉了:

"Print to console": {
"scope": "javascript,typescript,javascriptreact",
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}

过去对每种语言都必须这样做，但是现在在“全局代码段文件”中，您可以设置 scope属性，该属性允许您显式声明多种语言。

如果您需要该语言的确切名称，请单击 VS Code 底部工具栏右侧的 Select Language Mode按钮进行检查。它将提示您在顶部选择一种语言，并且在该过程中将在括号中显示该语言的 JSON 名称，您可以像上面的示例那样在代码片段文件中输入该名称。

另外，您应该设置 "editor.snippetSuggestions": "top"，这样您的代码片段就会出现在智能感知之上！

您可以在 首选项-> 设置-> 文本编辑器-> 建议中找到代码片段建议

小开

@ Sebastian Sebald 的最佳答案非常好，但是遇到了一个类似的问题(不是特指 console. log，而是它“丢失”了) ，我也想贡献一个答案。

您的前缀确实工作-默认情况下，它的 log，在您的情况下，您已经更改为 c。当你输入 log(或者 c) VSCode 会根据许多因素(我不知道是什么因素，可能是类相关性)生成一个完整的“所有事情 TM”列表。

像片段这样的东西往往会被吸引到底部。不管它们的长度如何，把它们放到顶部，添加到你的设置中:

"editor.snippetSuggestions": "top"

小开

另一种方法是打开 键盘绑定 json文件并添加您想要的密钥组合:

{
"key": "cmd+shift+l",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "console.log($1)$0;"
}
}

小开

在 Atom 中有一个很好的 console. log ()快捷方式，我希望在 VS Code 中也有同样的快捷方式。

我使用的解决方案由 @ kamp，但它花了我一段时间，以找出如何做到这一点。以下是我使用的步骤。

转到: 文件 > 首选项 > 键盘快捷键
在页面顶部，你会看到一条信息: 对于高级定制，打开并编辑 keybindings.json

这将打开两个窗格: 默认键绑定和自定义绑定。

输入 @ kamp提供的代码

小开

如果有人有兴趣将目前选定的案文纳入 console.log()声明:

{
"key": "cmd+shift+l",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "console.log(${TM_SELECTED_TEXT}$1)$0;"
}
}

小开

以下是当前选定的单引号文本，希望对您有所帮助

// Place your key bindings in this file to overwrite the defaults
[{
"key": "ctrl+shift+c",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
}


}]

小开

以上所有的答案都很好，但是如果你不想改变视觉工作室代码的配置，而是希望自动完成 console.log(object); 你可以简单地使用这个快捷键 电话线路，然后按 Ctrl + 太空获得建议，然后按 进来
注意 : < em > 此特性在 安装 JavaScript (ES6)代码段扩展时可用。

同样，你也可以自动完成以下任务:

对于 console.log(object);，clg
对于 console.log('object :', object);，clo
对于 console.clear(object);，ccl
对于 console.error(object);，癌细胞数量
对于 console.trace(object);，ctr
对于 console.table(object);，ct
对于 console.info(object);来说，cin
对于 console.count(label);，cco

(这个列表继续...) < br/> < br/> 此外，在这方面的另一个很大的扩展是涡轮控制台日志。我个人在日常生活中使用这两种方法，并享受它们的组合。

参考文献:

JavaScript (ES6)代码段的链接:

Https://marketplace.visualstudio.com/items?itemname=xabikos

从 VisualStudio 代码预览:

小开

有个更好的办法

{
"key": "cmd+shift+c",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "console.log('${TM_SELECTED_TEXT}', $TM_SELECTED_TEXT$1);"
}
}

小开

键入 log并按 enter。它将自动完成 console.log();

小开

当你输入单词木头时，你会看到这样的东西:

如果您看到不同的日志选项，选择一个表示 登录到控制台的日志选项(当您有一些名称日志标识符时，这基本上是可能的。

点击回车。

智慧感应会完成它的工作！

小开

有人在找 对于高级定制，打开并编辑 keybindings.json 吗

单击这个小图标打开 keybindings.json。

使用此代码生成 console.log () & 为选定的文本生成 console.log (“ Word”)。

{
"key": "ctrl+shift+l",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
}
}

小开

Clg + tab

或者如上所述,

Log + enter (下拉列表中的第二个选项)

这是一个老问题，但我希望对其他人有用。

小开

作为替代方法，您可以创建一个容易编写的函数来调用 console.log，然后直接调用该函数。

 var a = funtion (x) {console.log(x)}
a(2*2);        //prints 4

小开

键入‘ clg’，然后按 Ctrl + 空间，按 进来，它会自动完成到 console.log()。
为此，您只需要安装一个扩展，即 JavaScript (ES6)代码段。

小开

我不知道我使用的是什么扩展，但我只是简单地输入 log 和 hit tab 来自动完成 console.log () ; 将光标放在大括号之间。

小开

输入 co然后按 标签或者 进来。

应该可以打破常规。

小开

我用自动热键来达到同样的效果, 只要输入“ cc”然后空格，它就会输出一个控制台日志

; vscode
#IfWinActive ahk_exe Code.exe


SetTitleMatchMode 2


; Move by word - Backwards
Capslock & d:: Send ^+k
::cc::console.log("test321:" {+}){left}
::cl::logger.info("test321:" {+}){left}
::cd::logger.debug("test321:" {+}){left}
::ss::JSON.stringify(test, null, 2){ctrl down}{left 3}{ctrl up}


#IfWinActive

小开

安装 ES7 React/Redux/GraphQL扩展，然后为 console.log()键入 clg + Enter/Return key

小开

打印一个变量的值是非常简单的，但也非常反复和频繁的需要和做的东西，所以它必须最快的捷径！

因此，我推荐另一种解决方案，其中您甚至不需要选择任何东西。您也不需要复制/粘贴变量的名称，也不需要键入代码片段的前缀。它也适用于所有语言，只有一个热键! :)(感谢 vscode 的“ when”表达式)

下面是它在实际工作中的预览:

下面是安装它的步骤:
1. 从扩展存储中安装多重指挥扩展。
2. 打开 vscode (如果你不知道怎么做，点击 < kbd > Ctrl + Shift + p 。这将在顶部打开一个命令调色板。在其中写入“ Preferences: Open Settings (JSON)”，然后按回车！)的 settings.json文件，然后向其中添加以下内容(将进行说明) :

  // generating a print statement of the current word on the next line, in different languages
"multiCommand.commands": [
{
"command": "multiCommand.jsGeneratePrint",
"sequence": [
"editor.action.addSelectionToNextFindMatch",
"editor.action.clipboardCopyAction",
"editor.action.insertLineAfter",
{
"command": "editor.action.insertSnippet",
"args": {
"snippet": "console.log(\"$CLIPBOARD: \", $CLIPBOARD);"
}
},
]
},
{
"command": "multiCommand.javaGeneratePrint",
"sequence": [
"editor.action.addSelectionToNextFindMatch",
"editor.action.clipboardCopyAction",
"editor.action.insertLineAfter",
{
"command": "editor.action.insertSnippet",
"args": {
"snippet": "System.out.println(\"$CLIPBOARD: \" + $CLIPBOARD);"
}
},
]
},
],

现在打开 keybindings.json文件(将其写入命令面板: “首选项: 打开键盘快捷键(JSON)”)并向其中添加以下内容(将对此进行说明) :

    {
"key": "ctrl+b",
"command": "multiCommand.jsGeneratePrint",
"when": "editorTextFocus && editorLangId == javascript"
},
{
"key": "ctrl+b",
"command": "multiCommand.javaGeneratePrint",
"when": "editorTextFocus && editorLangId == 'java'"
}

瞧！我们结束了。现在，只要把指针放在一个变量的名称上，然后点击 Ctrl + b(我对 Ctrl + b很满意，但是你可以根据自己的喜好来改变它)。

下面是它的工作原理(对于好奇的人) :
- 上面的第一个片段: 我们创建了一个“复合命令”(感谢“ multi-command”扩展) ，它仅仅意味着“将多个命令序列放在一起作为一个新命令”。我们使用的顺序是: 1。选择指针所在的当前单词，2。把它复制到剪贴板上，3。转到下一行4。使用已复制到剪贴板的单词生成 print 语句。瞧！但是请注意，我们必须为每种语言定义一个这样的复合命令，因为不同的编程语言在打印方式上是不同的！
- 上面的第二个片段: 我们创建 “两个不同的热键，但有相同的组合”。最重要的是，它们在“ where”条件下是不同的(在这个条件下，我们指定了这个热键必须在“ where”中工作的代码的语言) ，然后我们将每个复合命令添加到它自己的热键中。

您也可以通过重复相同的模式将此方法扩展到其他任何语言(它也可以通过其他方式进行扩展，但是我不再回答这个问题)。希望能帮你节省点时间。:)

小开

另一种选择，如果您使用 VSCode，是使用 涡轮控制台日志扩展，它不仅启用快捷方式，而且智能地插入自定义文本根据您选择的文本。您可以调整它的设置，以记录文件名/行号:

显示功能

显然，安装扩展不同于更改键盘快捷键，但如果您希望获得类似于@aderchox’s Response 的功能，那么这是一个很好的选择

小开

最佳组合

我学到了涡轮控制台日志的第一个特性(II，III，IV 对我没有用)。

然后添加了这个片段，这个片段非常适合 Turbo 控制台日志:

  {
"key": "ctrl+alt+l",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus && !editorHasSelection",
"args": {
"snippet": "console.log('$1')"
}
}

小开

最快的方法是:

按“ l”并在弹出列表中选择 log

现在，当你按“ l”的时候，你只需要按“ Enter”到 console.log()

小开

用3个简单的步骤制作你自己的片段。

从命令面板(Ctrl + 换挡 + P)中选择 Configure User Snippets
选择 Global Snippet或 Snippets for <your-project>

编辑文件，保存和利润

{
"consoleLog": {
"prefix": "clg",
"body": "console.log(${1:object});",
"description": "Displays a message in the console"
},
}

小开

将其添加到一个代码片段文件中，文件值为 $0:

"Print to console": {
"scope": "javascript,typescript",
"prefix": "cl",
"body": [
"console.log($0);",
],
"description": "Log output to console"
}

似乎0美元是一个更好的方法。如果使用 $1而不是 $0，当您想在圆括号之间键入某些内容(例如变量名)时，自动补全不起作用。

我想在评论中说明这一点，但评论对我来说是不可用的。