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

Question

我想知道Visual Studio代码中console.log的快捷方式是什么？

Answer 1

2019年2月更新:

正如Adrian Smith和其他人所建议的那样:如果要绑定键盘快捷键来创建控制台日志语句,可以执行以下操作:

1. 文件>首选项>键盘快捷键
2. 在搜索栏下方,您会看到一条消息"打开高级自定义项并编辑keybindings.json",单击它
3. 将其添加到JSON设置:

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

按CTRL+ SHIFT+ L将输出控制台代码段.此外,如果您已经选择了文本,它将被放入日志语句中.

如果你想要intellisene/autocomplete:

转到首选项 - > 用户代码段 - >选择打字稿(或任何您想要的语言).一个json文件应该打开.您可以在那里添加代码段.

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

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

您必须为要使用该代码段的每种语言执行此操作...有点麻烦.

此外,您应该设置"editor.snippetSuggestions": "top",因此您的片段显示在intellisense上方.谢谢@Chris!

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

Answer 2

以上所有答案都可以正常工作,但是如果您不想更改visual studio代码的配置,而是想要自动完成,console.log(object); 您只需使用此快捷方式clg并按Ctrl+ Space进行建议并点击Enter
注意:此功能可用当您安装JavaScript(ES6)代码片段扩展时.

同样,您可以自动完成以下操作:

• clg forconsole.log(object);
• CLO的console.log('object :', object);
• ccl forconsole.clear(object);
• CER用于console.error(object);
• ctr for console.trace(object);
• clt forconsole.table(object);
• cin forconsole.info(object);
• cco for console.count(label);
  
  (此列表继续......)

JavaScript(ES6)代码段的链接:https://marketplace.visualstudio.com/items？itemName = xabikos.JavaScriptSnippets

Answer 3

@Sebastian Sebald的最佳答案非常好,但是遇到了类似的问题(特别是console.log,而不是"缺失")我想提供一个答案.

您的前缀确实有效 - 默认情况下,它log已经更改为c.当您键入log(或c)VSCode将基于许多因素生成"所有东西™"的完整列表(即我不知道哪些因素,可能是类相关性).

片段之类的东西倾向于倾向于底部.要将它们撞到顶部,尽管它们的长度,请将其添加到您的设置:

"editor.snippetSuggestions": "top"

Answer 4

在Atom中有一个很好的console.log()快捷方式,我想在VS Code中使用相同的快捷方式.

我使用了@kamp的解决方案,但我花了一些时间来弄清楚如何做到这一点.以下是我使用的步骤.

1. 转至:文件>首选项>键盘快捷键

2. 在页面顶部,您将看到一条消息: 对于高级自定义,请打开并编辑keybindings.json

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

4. 输入@kamp提供的代码

Answer 5

其他方法是打开keybindings.json文件并添加所需的组合键.在我的情况下它是:

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

Answer 6

输入log并点击enter.它会自动完成console.log();

Answer 7

寻找高级定制的任何人都可以打开和编辑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;"
  }
}

Answer 8

如果有人有兴趣将当前选定的文本放入console.log()声明中:

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

Answer 9

输入 'clg' 然后点击ctrl+space并点击enter，它会自动完成到console.log().
为此，您只需要安装一个扩展程序，即 JavaScript (ES6) 代码片段。

Answer 10

打印变量的值非常简单，但也是非常重复和频繁需要和完成的事情，因此需要最快的快捷方式！

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

• 以下是其实际工作原理的预览：

• 以下是安装它必须采取的步骤：

  1. 从扩展存储安装多命令扩展。

  2. 打开settings.json你的 vscode 文件（如果你不知道如何操作，请点击Ctrl + Shift + p。这将在顶部打开一个命令面板。在其中写入“首选项：打开设置（JSON）”，然后按 Enter！）然后添加下面的项目（将解释）：

  // 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);"
          }
        },
      ]
    },
  ],

4. 现在打开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，但您可以根据需要更改它）。

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

您可以通过重复相同的模式来扩展此方法以涵盖任何其他语言（它也可以以其他方式扩展，但我不会再做出这个答案）。希望这能为您节省一些时间。:)

Answer 11

只需 3 个简单步骤即可制作您自己的片段。

1. Configure User Snippets从命令面板中选择( Ctrl+ Shift+ P)

   

2. 选择Global Snippet或Snippets for <your-project>

3. 编辑文件，保存并获利！

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

Answer 12

clg +标签

或如上所述

日志+输入（下拉菜单中的第二个选项）

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

Answer 13

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

Answer 14

最快的方法是：

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

现在，每当您按下 时l，您只需按下Enter即可console.log()

Answer 15

当您输入单词log时，您将看到以下内容：

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

点击Enter。

智慧将尽其所能！

Answer 16

最佳组合

我学习了Turbo Console Log的第一个功能（II、III、IV 对我来说没有用）。

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

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