在我的自定义片段中使用 TM_SELECTED_TEXT答案

【问题标题】：Using TM_SELECTED_TEXT in my custom snippets在我的自定义片段中使用 TM_SELECTED_TEXT
【发布时间】：2017-05-02 15:26:23
【问题描述】：

现在支持 2016 年 11 月版（1.8 版）的 VSCode Snippet Variables，特别是 TM_SELECTED_TEXT。

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

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

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

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

这个想法是突出显示一些文本，运行 sn-p 然后将${TM_SELECTED_TEXT:${1:type_here}} 替换为突出显示的文本。我遇到的问题是，要运行 sn-p，您需要输入 prefix 值（在本例中为 inq）来运行覆盖您突出显示的文本的 sn-p把一切都搞砸了。

在 Sublime/Textmate 中，我从键盘组合启动了 sn-p，使我的文本突出显示。

在 VSCode 中，有没有办法让这项工作按原样工作，或者从 Sublime 中可用的组合键启动 sn-p？

【问题讨论】：

标签： visual-studio-code code-generation sublimetext code-snippets vscode-snippets

【解决方案1】：

突出显示单词后，按 F1 并运行命令“插入片段”，然后在列表中选择您的 sn-p。

您还可以通过转到文件>首选项>键盘快捷方式来编辑您的键绑定，并在“editor.action”中添加一些快捷方式。 showSnippets”命令，如下所示：

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

【讨论】：

【解决方案2】：

在 1.49 中（它在本次编辑的 Insiders' Build 中）您的示例最终将按您的预期工作。见merged pull request。

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

从 v1.20 开始，这变得更加容易，因为添加了一个新变量 $CLIPBOARD，请参阅new snippet variables。因此无需分配和运行快捷方式 - 但您必须将选择复制到剪贴板 CTRL-C.

您的示例现在可以是：

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

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

【讨论】：

太棒了，如果可能的话，我会投多个赞成票。在 v1.51.1 上测试。没用

【解决方案3】：

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

根据这个线程，您可以通过提供args 将精确的 sn-p 分配给键绑定。引导媒体查询的键绑定示例

{
    "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"
    }
},

sn-p 示例

"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中定义sn-p，这在某些情况下对我来说似乎更方便

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

【讨论】：

【解决方案4】：

使用来自https://code.visualstudio.com/docs/editor/userdefinedsnippets 的文档，我能够自定义 sn-ps，我正在使用 'surround with' 扩展，并且可以将我自己的 sn-p 放入 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 标头：

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

【讨论】：