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

What is the shortcut in Visual Studio Code for console.log

提问by Petko Kamenov

I want to know what is the shortcut for console.log in Visual Studio code?

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

回答by Sebastian Sebald

Update Feb, 2019:

2019 年 2 月更新：

As suggested by Adrian Smithand others: If you want to bind a keyboard shortcut to create a console log statement, you can do the following:

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

1. File > Preferences > Keyboard Shortcuts
2. Below the search bar you'll see a message "For advanced customizations open and edit keybindings.json", click on it
3. Add this to the JSON settings:

1. 文件 > 首选项 > 键盘快捷键
2. 在搜索栏下方，您将看到一条消息“对于高级自定义打开并编辑 keybindings.json”，单击它
3. 将此添加到 JSON 设置中：

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

Pressing CTRL+SHIFT+Lwill output the console snippet. Also, if you already have text selected it will be put inside the log statement.

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

---

---

If you rather want intellisene/autocomplete:

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

Go to Preferences-> User Snippets-> Choose Typescript(or whatever language you want). A jsonfile should open. You can add code snippets there.

转到首选项->用户片段-> 选择Typescript（或任何你想要的语言）。json应该打开一个文件。您可以在那里添加代码片段。

There is already a snippet for console.logcommented out:

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

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

You have to do this for every language you want to use the snippet ... is kinda bothering.

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

---

---

Also, you should set "editor.snippetSuggestions": "top", so your snippets appear above intellisense. Thanks @Chris!

此外，您应该设置"editor.snippetSuggestions": "top"，以便您的代码段出现在智能感知之上。谢谢@克里斯！

You can find snippet suggestions in Preferences -> Text Editor -> Suggestions

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

回答by Sabunkar Tejas Sahailesh

All the above answers works fine, but if you don't want to change the configuration of the visual studio code, rather want auto-completion for console.log(object);you can simply use this shortcut clgand press Ctrl+Spacefor suggestion and hit Enter
Note: This feature is avaliable when you install JavaScript (ES6) code snippets extension.

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

Similarly you have auto-completion for :

同样，您可以自动完成：

• clgfor console.log(object);
• clofor console.log('object :', object);
• cclfor console.clear(object);
• cerfor console.error(object);
• ctrfor console.trace(object);
• cltfor console.table(object);
• cinfor console.info(object);
• ccofor console.count(label);
  
  (This list continues...)

• CLG的console.log(object);
• 克洛为console.log('object :', object);
• CCL为console.clear(object);
• CER用于console.error(object);
• ctr为 console.trace(object);
• CLT为console.table(object);
• CIN为console.info(object);
• ccofor console.count(label);
  
  （此列表继续...）

---

---

link for JavaScript(ES6) code snippets : https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

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

回答by Chris

The top answer by @Sebastian Sebald is perfectly fine, but hitting a similar problem (not console.log specifically, but rather it "missing") I wanted to also contribute an answer.

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

Your prefix is indeed working - by default its logand in your case you have changed it to c. When you type log(or c) VSCode will generate a full list of "all the things?" based on many factors (ie I don't know what factors, probably class relevance).

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

Things like snippets tend to gravitate towards the bottom. To bump them to the top, despite their length, add this to your settings:

诸如片段之类的东西往往会被吸引到底部。要将它们顶到顶部，尽管它们很长，请将其添加到您的设置中：

"editor.snippetSuggestions": "top"

回答by nedemir

Type logand hit enter. It will auto-complete console.log();

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

回答by Adrian Smith

In Atom there is a nice shortcut for console.log() and I wanted the same in VS Code.

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

I used the solution by @kampbut it took me a while to figure out how to do it. Here are the steps I used.

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

1. Go to: File > Preferences > Keyboard Shortcuts

2. At the top of the page you will see a message that says: For advanced customizations open and edit keybindings.json

1. 转到：文件 > 首选项 > 键盘快捷键

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

1. This opens two panes: the default keybindings, and your custom bindings.

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

1. Enter the code provided by @kamp

4. 输入@kamp提供的代码

回答by kamp

Other way is to open keybindings.jsonfile and add your desired key combination. In my case it's:

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

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

回答by Hiran D.A Walawage

Anyone looking for For advanced customizations open and edit keybindings.json

任何寻找高级定制的人都可以打开并编辑 keybindings.json

Click this little icon to open keybindings.json.

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

Use this code for generate both console.log() & to generate console.log("Word") for selected text.

使用此代码生成 console.log() & 为所选文本生成 console.log("Word") 。

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

回答by medoingthings

In case anybody is interested in putting the currently selected text into the console.log()statement:

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

##代码##

回答by Srishti

When you type the word log, you will see something like this:

当您输入log一词时，您将看到如下内容：

Choose the one which says Log to the consolein case you see different log options (that would basically be possible when you have some identifier with the name log.

如果您看到不同的日志选项，请选择“登录到控制台”的选项（当您有一些名称为 log.log 的标识符时，这基本上是可能的）。

Click Enter.

单击输入。

The intellisense will do its job!

智能感知将完成它的工作！

回答by palmaone

clg + tab

clg + 标签

or as mentioned above,

或如上所述，

log + enter (second option in dropdown)

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

This is an old question, but I hope is useful to some one else.

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