在我的自定义代码段中使用 TM_SELECTED_TEXT

Question

随着 2016 年 11 月（版本 1.8）发布 VSCode Snippet Variables 现在支持，特别是 TM_SELECTED_TEXT.

这让我很高兴，因为我在 Sublime Text 和 TextMate 中大量使用了这些。

我不知道如何让它在 VSCode 中工作。我创建了他们用作示例的代码段：

"in quotes": {
    "prefix": "inq",
    "body": "'${TM_SELECTED_TEXT:${1:type_here}}'"
}

然后我输入一些文本，突出显示它，这就是事情开始中断的地方。

想法是突出显示一些文本，运行代码段，然后 ${TM_SELECTED_TEXT:${1:type_here}} 替换为突出显示的文本。我遇到的问题是，要运行您需要键入 prefix 值（在本例中为 inq）到运行覆盖您突出显示的文本的代码段会把一切搞砸。

在 Sublime/Textmate 中，我通过键盘组合启动了代码段，这让我的文本突出显示。

在 VSCode 中，有没有办法让它按原样工作，或者像 Sublime 中那样通过组合键启动代码段？

Answer 1

突出显示单词后，按 F1 和运行命令 "Insert Snippet"，然后 select 您的代码段出现在列表中。

您还可以通过转至文件>首选项>键盘快捷键来编辑您的快捷键并为 "editor.action.showSnippets" 命令添加一些快捷方式，如下所示：

{
    "key": "ctrl+alt+s",
    "command": "editor.action.showSnippets",
    "when": "editorTextFocus"
}

Answer 2

即将在 1.49 中推出（在本次编辑时它位于 Insiders' Build 中）您的示例最终将按您的预期运行。参见 merged pull request。

Vscode 现在将“记住”您选择的文本（如果有的话），并且当您键入代码段前缀时，将其插入到 TM_SELECTED_TEXT 变量中，即使您似乎输入过多了所选文本。

从 v1.20 开始，由于添加了新变量 $CLIPBOARD，这变得更容易了，请参阅 new snippet variables。所以不需要分配和运行快捷方式 - 但你必须将选择复制到剪贴板 CTRL-C.

您的示例现在可以是：

"in quotes": {
    "prefix": "inq",
    "body": "'$CLIPBOARD:${1:type_here}'"
}

注意：$CLIPBOARD 有效。不需要额外的大括号 {$CLIPBOARD}.

Answer 3

https://github.com/Microsoft/vscode/issues/17780

根据此线程，您可以通过提供 args 将确切的片段分配给键绑定。 bootstrap 媒体查询的键绑定示例

{
    "key": "ctrl+alt+b",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
        "name": "bsup"
    }
},
{
    "key": "ctrl+alt+shift+b",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
        "name": "bsup_copy"
    }
},

片段示例

"bsup": {
    "prefix": "bsup",
    "body": [
        "@include media-breakpoint-up(md){",
        "\t${TM_SELECTED_TEXT}",
        "}"
    ],
    "description": "Bootstrap media up"
},
"bsup_copy": {
    "prefix": "bsup_copy",
    "body": [
        "${1:${TM_SELECTED_TEXT}}",
        "@include media-breakpoint-up(md){",
        "\t${2:${TM_SELECTED_TEXT}}",
        "}"
    ],
    "description": "Bootstrap media up + copy selected text"
},

UPD: 此外 - 你可以直接在 keybindings.json 中定义片段，这对我来说似乎更方便部分案例

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

Answer 4

使用来自 https://code.visualstudio.com/docs/editor/userdefinedsnippets 的文档，我能够自定义片段，我正在使用 'surround with' 扩展，并且可以将我自己的片段放入 settings.json，如下所示：

"html_h3-name": {
  "label": "h3",
  "description": "wrap by h3 with <a name=''>, top",
  "snippet": "<h3><a name=\"${TM_SELECTED_TEXT/[\s]/-/g}\"></a>$TM_SELECTED_TEXT\n\t<a class=\"small\" href=\"#top\">top</a>\n</h3>"

},

它采用 VSCode 中突出显示的代码并从中创建 h3 header，名称为 link:

it converts  'aaa bbb ccc' to 
<h3><a name="aaa-bbb-ccc"></a>aaa bbb ccc
    <a class="small" href="#top">top</a>
</h3>

在我的自定义代码段中使用 TM_SELECTED_TEXT

Using TM_SELECTED_TEXT in my custom snippets

visual-studio-code

code-generation

sublimetext

code-snippets

vscode-snippets