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

时间：2016-10-21 12:59:31

标签： typescript visual-studio-code

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

20 个答案:

答案 0 :(得分：99)

2019年2月更新：

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

  1. 文件＆gt;偏好＆gt;键盘快捷键
  2. 在搜索栏下方，您会看到一条消息＆＃34;对于高级自定义设置，请打开并编辑keybindings.json＆＃34; ，点击它
  3. 将此添加到JSON设置：
    4. {
  "key": "ctrl+shift+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
  }
}

    按 CTRL + SHIFT + L 将输出控制台片段。此外，如果您已经选择了文本，它将被放在日志语句中。

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

    转到偏好设置 - ＆gt; 用户代码段 - ＆gt;选择 Typescript （或您想要的任何语言）。应该打开json文件。您可以在那里添加代码段。

    console.log已经注释掉了一段代码：

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

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

    此外，您应该设置"editor.snippetSuggestions": "top"，因此您的代码段会显示在intellisense上方。谢谢@Chris！

    您可以在偏好设置 - ＆gt;中找到代码段建议。文字编辑器 - ＆gt;建议

答案 1 :(得分：33)

@Sebastian Sebald的最佳答案非常好，但是遇到了类似的问题（特别是console.log，而不是“缺失”）我想提供一个答案。

您的前缀确实有效 - 默认情况下为log，在您的情况下，您已将其更改为c。当您键入log（或c）时，VSCode将根据许多因素生成“所有内容™”的完整列表（即我不知道哪些因素，可能是类相关性）。

像片段之类的东西倾向于倾向于底部。要将它们撞到顶部，尽管它们的长度，请将其添加到您的设置中：

"editor.snippetSuggestions": "top"

答案 2 :(得分：23)

在Atom中有一个很好的console.log（）快捷方式，我想在VS Code中使用相同的。

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

  1. 转到：文件＆gt;偏好＆gt;键盘快捷键

  2. 在页面顶部，您会看到一条消息： 对于高级自定义设置，请打开并修改keybindings.json

    3. Click on link

    1. 这会打开两个窗格：默认的键绑定和自定义绑定。

      2. Enter code in right pane

      1. 输入@kamp
        2. 提供的代码

答案 3 :(得分：23)

以上所有答案都可以正常使用，但如果您不想更改visual studio代码的配置，则需要自动完成console.log(object); 您只需使用此快捷方式 clg 并按 Ctrl + Space 获取建议，然后按 Enter
注意：安装JavaScript（ES6）代码段扩展名时，此功能可用。

同样，您有以下自动完成功能：

  • clg console.log(object);
  • clo console.log('object :', object);
  • ccl console.clear(object);
  • cer console.error(object);
  • ctr console.trace(object);
  • clt 代表console.table(object);
  • cin console.info(object);
    • {li> cco console.count(label);

    （此列表继续......）

JavaScript（ES6）代码段的链接： https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

enter image description here

答案 4 :(得分：21)

其他方法是打开 keybindings.json 文件并添加所需的组合键。就我而言，它是：

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

答案 5 :(得分：15)

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

答案 6 :(得分：9)

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

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

答案 7 :(得分：9)

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

答案 8 :(得分：8)

寻找 进行高级自定义的任何人，打开并编辑keybindings.json

enter image description here

单击此小图标以打开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;"
  }
}

答案 9 :(得分：5)

我不知道我正在使用什么扩展名，但是我只是键入log并点击tab来自动完成console.log（）;将光标放在花括号之间。

答案 10 :(得分：4)

当您输入单词 log 时，您会看到类似以下内容的信息：

Choosing the method that says Log to the console

选择一个显示登录控制台的名称，以防万一您看到不同的日志选项（当您具有名称为log的标识符时，基本上可以做到这一点。

点击Enter。

console.log() typed automatically!

智慧将发挥作用！

答案 11 :(得分：2)

这是一个更好的解决方案

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

答案 12 :(得分：2)

以下是当前选中的单引号文本。希望它有所帮助

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

}]

答案 13 :(得分：1)

键入@failif(sys.platform == 'win32', reason='we do not support windows') def test(): ... ，然后按 tab 或 enter 。

应该开箱即用。

答案 14 :(得分：1)

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

enter image description here

答案 15 :(得分：0)

clg +标签

或如上所述，

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

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

答案 16 :(得分：0)

作为替代方案，您可以创建一个易于编写的函数，该函数调用console.log，然后仅调用该函数。 

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

答案 17 :(得分：0)

我用autohotkey来达到同样的效果， 只需输入“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

答案 18 :(得分：0)

打印一个变量的值很简单，但也是需要重复和经常做的事情，所以需要最快的捷径！

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

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

enter image description here

  • 以下是安装它所需的步骤：

    1. 从扩展商店安装 multi-command 扩展。

    2. 打开你的 vscode 的 settings.json 文件（如果你不知道怎么做，点击 Ctrl + Shift + p。这将打开一个命令顶部的调色板。在其中写入“首选项：打开设置（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);"
          }
        },
      ]
    },
  ],
  1. 现在打开 keybindings.json 文件（在命令面板中写入：“Preferences: Open keyboard Shortcuts (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. 使用已复制到剪贴板的单词生成打印语句。瞧！但是请注意，我们必须为每种语言定义这些复合命令之一，因为不同的编程语言在打印方式上有所不同！
    • 上面的第二个片段：我们创建了“两个不同的热键，但使用相同的组合键”。最重要的是，它们的“where”条件不同（我们在其中指定了该热键必须在“where”中工作的代码语言），然后我们将每个复合命令添加到其自己的热键中。

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

答案 19 :(得分：0)

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

GIF Showing functionality

显然，安装扩展程序与更改键盘快捷键不同，但如果您想要类似于@aderchox 的答案的功能，这是一个不错的选择

相关问题
最新问题