Visual Studio Code片段作为键盘快捷键

Question

Visual Studio Code片段作为键盘快捷键

jsonvisual-studio-code

33

我知道如何修改和创建代码片段，也知道如何修改快捷键，但是如何将这两者结合起来呢？

- yodalr

1

您可以通过输入代码片段的标识符的开头来访问它们。据我所知，您无法为它们分配自定义热键，至少没有不使用扩展程序（我不知道有哪些扩展程序）的方法。我让我的模板都以特定字符开头，通过后续字母来识别它们，就像热键一样简单。 - Ray

你可以使用 AutoHotkey。 - Mat Jones

4个回答

14

看起来，从1.9版本开始，Visual Studio Code就能够完成您需要的功能，不需要任何其他扩展。

来自https://code.visualstudio.com/updates/v1_9#_insert-snippets

“您现在可以将喜欢的片段绑定到键绑定上。一个将选择包含在单引号中的示例如下所示：”

请将以下代码片段添加到keybindings.json文件中（打开“键盘快捷方式”编辑器，并单击“要进行高级自定义，请打开并编辑keybindings.json链接”）

{
    "key": "cmd+k",
    "command": "editor.action.insertSnippet",
    "args": { "snippet": "'$TM_SELECTED_TEXT'" }
}

- Jason

7

以下是创建代码片段并添加快捷方式的3个步骤：

1. Code（代码） -> Preferences（偏好设置） -> Keyboard Shortcuts（键盘快捷键）

2. 点击keybindings.json文件的图标

3. 添加JavaScript对象以创建代码片段/快捷方式

例如，我创建了用于记录目的的代码片段，因为我大多数时间都在使用JavaScript框架。

1. 使用快捷键Control（或Ctrl）⌃+ l来输出console.log('')

2. 使用快捷键Control（或Ctrl）⌃+ w来输出console.warn('')

3. 使用快捷键Control（或Ctrl）⌃+ e来输出console.error('')

代码：

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

- WasitShafi

1

Call Command Palette in View menu
Hit "shortcuts json" and OK

Then append under code blocks

{
  "key": "shift+alt+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus && editorLangId == 'js'",
    "args": {
    "snippet": "console.log($1);$0",
    }
},
{
  "key": "shift+alt+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus && editorLangId == 'dart'",
  "args": {
    "snippet": "print($1);$0",
  }
},

如果你在JavaScript中按下Shift+Alt+L，那么就在你的编辑器中输入"console.log();"，

而如果你在Dart中按下Shift+Alt+L，则在你的编辑器中输入"print();"，

使用相同的快捷键。

- Kim Ki Won

如果您正在使用一些非常简单的代码片段，这将非常有用。 - PenutChen

如果您使用一些非常简单的代码片段，这将非常有用。 - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stefan Gabos · Accepted Answer

请注意，下面的行将打开当前所使用语言定义的片段列表（而您不希望这样）。

"args": { "snippet": "'$TM_SELECTED_TEXT'" }

与上面的代码不同，下面这行代码中作为参数给出的代码片段将会立即执行。

"args": { "name": "your_snippets_name" }

这是我如何为HTML定义一个片段，当我想要选择文本并按下CTRL+B时，文本会被包含在标签中：

"make_strong": {
    "prefix": "strong",
    "body": [
        "<strong>$TM_SELECTED_TEXT${1:}</strong>"
    ],
    "description": "Encloses selected text in <strong></strong> tags"
}

注意上方的${1:}，它的作用是将光标放置在此处。这使您可以在光标位置按CTRL+B，然后将光标放置在标签内部。选择一个字符串并按下CTRL+B，该字符串将被包含在标签中，并将光标放置在闭合标签之前。此时按下TAB，将把光标放在闭合标签之后。同时我在我的keybindings.json中添加了以下内容：

{
    "key": "ctrl+b",
    "command": "editor.action.insertSnippet",
    "args": { "name": "make_strong" }
}

2021年6月2日更新：

由于这篇文章的阅读量很高，我将发布一些我使用的代码片段，也许对某些人有用。

{
    "key": "ctrl+alt+u",
    "command": "editor.action.transformToUppercase"
},
{
    "key": "ctrl+alt+l",
    "command": "editor.action.transformToLowercase"
},
{
    "key": "ctrl+b",
    "command": "editor.action.insertSnippet",
    "args": { "name": "insert_strong" }
},
{
    "key": "ctrl+i",
    "command": "editor.action.insertSnippet",
    "args": { "name": "insert_italic" }
},
{
    "key": "ctrl+u",
    "command": "editor.action.insertSnippet",
    "args": { "name": "insert_underline" }
},
{
    "key": "ctrl+alt+p",
    "command": "editor.action.insertSnippet",
    "args": { "name": "insert_paragraph" }
},
{
    "key": "ctrl+shift+space",
    "command": "editor.action.insertSnippet",
    "args": { "name": "insert_nbsp" }
},
{
    "key": "ctrl+enter",
    "command": "editor.action.insertSnippet",
    "args": { "name": "insert_br" }
},