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

【问题标题】：What is the shortcut in Visual Studio Code for console.log什么是 Visual Studio Code 中 console.log 的快捷方式
【发布时间】：2017-03-03 19:19:56
【问题描述】：

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

【问题讨论】：

标签： typescript visual-studio-code

【解决方案1】：

2019 年 2 月更新：

如Adrian Smith等人建议：如果要绑定键盘快捷键创建控制台日志语句，可以这样做：

文件 > 首选项 > 键盘快捷键
在右侧的搜索栏上方，您会看到这个图标点击它。（将鼠标悬停在上面时会显示：打开键盘快捷键 (JSON)
将此添加到 JSON 设置中：

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

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

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

转到 Preferences -> User Snippets -> 选择 Typescript（或您想要的任何语言）或“全局片段文件”，具体取决于根据您的需要。 json 文件应该打开。你可以在那里添加代码sn-ps。

console.log 的 sn-p 已被注释掉：

"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 名称，您可以在 sn-p 文件中输入该名称，如上例所示。

另外，你应该设置"editor.snippetSuggestions": "top"，这样你的sn-ps就会出现在intellisense之上。谢谢@Chris！

您可以在首选项 -> 设置 -> 文本编辑器 -> 建议中找到 sn-p 建议

【讨论】：

这曾经可以工作，但现在不行了，也许是上次更新？只有我吗？ s17.postimg.org/5mxnx4umn/2017_02_14_11h10_03.jpg
上面定义的前缀是“log”，所以输入“c”将无济于事；）开始输入“l”。
哦，我忘了说我已经把它改成与“c”一起工作了。我没有改变任何东西，更新后它不再工作了。不再有 sn-p，但是这个 "prefix": "c", 应该可以与“c”一起使用，对吧？
您也可以单击搜索栏旁边的{} 按钮打开keybindings.json 文件——最简单的方法是我看不到“高级自定义打开和编辑 keybindings.json" 消息！
谢谢。这非常有用。这是我使用剪贴板的版本，并添加了一个由剪贴板组成的快速标签，其中所有非字母数字字符都被删除作为标识符，以防记录多个项目："snippet": "console.log(\"${CLIPBOARD/[^0-9^a-z]//gi}\", ${CLIPBOARD}$1);"

【解决方案2】：

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

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

像 sn-ps 这样的东西往往会被吸引到底部。要将它们推到顶部，尽管它们很长，请将其添加到您的设置中：

"editor.snippetSuggestions": "top"

【讨论】：

你是我需要的英雄。谢谢！
哈哈完全不用担心
我收到一个错误提示 Property editor.snippetSuggestions is not allowed，这是怎么回事？
@Bossan "editor.snippetSuggestions": "top" 应该放在 settings.json 文件中（ctrl+shift+p 并输入 user settings）或者，您可以在常规用户设置中搜索此属性（首选项>设置）并使用下拉菜单将其更改为top。

【解决方案3】：

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

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

【讨论】：

"ctrl+shift+c" for the "key" 用一只手 IMO 更容易点击，如果您使用默认的 vs 代码键绑定，它还没有被另一个键绑定占用

【解决方案4】：

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

我使用了@kamp 的解决方案，但我花了一段时间才弄清楚如何去做。这是我使用的步骤。

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

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

输入@kamp提供的代码

【讨论】：

感谢您的详细步骤

【解决方案5】：

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

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

【讨论】：

这太棒了！

【解决方案6】：

以下是当前选中的带有单引号的文本。希望对你有帮助

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

}]

【讨论】：

【解决方案7】：

以上所有答案都可以正常工作，但如果您不想更改 Visual Studio 代码的配置，而是希望自动完成 console.log(object); 您可以简单地使用此快捷方式 clg 并按 Ctrl+Space 获得建议，然后按 Enter
注意：当您安装 JavaScript (ES6) 代码 sn-ps 扩展时，此功能可用。

同样，您可以自动完成：

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);
cco 为console.count(label);

（此列表继续...）

此外，这方面的另一个很好的扩展是Turbo Console Log。我个人每天都在使用这两种方法，并享受它们的组合。

参考资料：

JavaScript(ES6) 代码 sn-ps 的链接：

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

从 Visual Studio Code 预览：

【讨论】：

完美。 +1。这就是我一直在寻找的——不必进行任何配置更改。
无需按ctrl+space。没有那个建议就会出现。

【解决方案8】：

这里有一个更好的解决方案

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

【讨论】：

如果我希望控制台日志出现在所选文本下方的一行？这可以用 sn-p 完成吗？

【解决方案9】：

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

【讨论】：

我似乎有一个错误，在某些情况下输入log 并按Enter 只输出console.log();，我不知道为什么？是我自己还是其他人可以输入log，然后每次输入并获得一致的console.log(); 输出？
您必须等待几毫秒/秒，命令行才能重新确定您输入的内容。有时会有点滞后

【解决方案10】：

当您输入单词 log 时，您会看到如下内容：

如果您看到不同的日志选项，请选择 Log to the console 选项（当您有一些名称为 log 的标识符时，这基本上是可能的。

点击进入。

智能感知将发挥作用！

【讨论】：

【解决方案11】：

任何人都在寻找对于高级自定义打开和编辑 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;"
  }
}

【讨论】：

谢谢，在 mac 上必须转到 code->preferences->keyboard shorcuts 然后单击该按钮，然后将 {...} 放入数组中。
谢谢，有人应该更新接受的答案，以便其他人可以跳过 10 分钟的搜索
你节省了很多时间！谢谢
我的 Mac 上没有这个。我需要执行 cmd+shift+p 然后搜索键盘快捷键 (JSON)

【解决方案12】：

clg + 制表符

或者如上所述，

log + enter（下拉菜单中的第二个选项）

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

【讨论】：

clg + tab 给我ChannelMergerNode！
我认为您需要编辑您的键绑定，如上述答案中所述；）

【解决方案13】：

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

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

【讨论】：

这不是回答 OP 的问题，因为这必须在每个项目中导入，而且只是一个直接的麻烦。拥有一个内置的键绑定绝对是他们去这里的方式

【解决方案14】：

输入 'clg' 然后点击 ctrl + space 并点击 enter，它会自动补全到console.log()。
为此，您只需要安装一个扩展，即 JavaScript (ES6) 代码 sn-ps。

【讨论】：

console.warn() 也是 'cwa'

【解决方案15】：

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

【讨论】：

【解决方案16】：

输入 co 并点击 tab 或 enter。

应该开箱即用。

【讨论】：

我认为这可能不是很可靠或依赖于扩展。对我来说 co+enter 只生成文本输出，而 co+tab 生成“确认”。甚至 "cons" + tab 也只会生成 "console"。
为我转换为console

【解决方案17】：

我使用autohotkey来达到同样的效果，只需键入“cc”然后空格，它就会输出一个控制台日志。没试过sn-ps，不知道对比如何

; 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】：

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

【讨论】：

【解决方案19】：

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

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

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

以下是您必须采取的安装步骤：
1. 从扩展商店安装multi-command 扩展。
2. 打开您的 vscode 的 settings.json 文件（如果您不知道如何操作，请按 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);"
          }
        },
      ]
    },
  ],

现在打开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 很满意，但您可以随意更改）。

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

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

【讨论】：

【解决方案20】：

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

GIF Showing functionality

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

【讨论】：

【解决方案21】：

最佳组合

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

然后添加了这个非常适合 Turbo 控制台日志的 sn-p：

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

【讨论】：

【解决方案22】：

最快的方法是：

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

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

【讨论】：

【解决方案23】：

通过 3 个简单的步骤制作您自己的 sn-ps。

从命令面板中选择配置用户片段
如果你想要全局 sn-p 或项目文件，请选择

编辑文件，保存并获利！ ?

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

【讨论】：