如何将此 Sublime 片段转换为 VS 代码片段？

Question

请看下面我的尝试和结果。 Sublime sn-p 优先：

<snippet>
    <content>
        <![CDATA[<${1:p}>${2:$SELECTION}</${1/([^ ]+).*/$1/}>]]>
    </content>
    <tabTrigger>&lt;</tabTrigger>
    <scope>text.xml</scope>
    <description>Long Tag</description>
</snippet>

和键绑定：

{ "keys": ["super+shift+o"], "command": "insert_snippet", "args": { "name": "Packages/XML/long-tag.sublime-snippet" } },

它的作用如下：

1. 按 Cmd + Shift + O 将创建一个带有 p 链接的 html 标签 <p></p>可以开始打字，它会更新双方。按 T​​ab 键会将光标放在标签的中心。

2. 突出显示一个部分，然后按 cmd + shift + O 将用标签包围该部分。

我自己设法尝试的是 VS Code 中的以下内容：

{
    "blank_tag": {
        "prefix": "<cmdso>",
        "body": [
            // "<$1>$2</$1>$3"
            "<${1:p}>${2:$SELECTION}</$1/([^ ]+).*}>"
        ],
        "description": "Adds a blank tag to use"
    }
}

这几乎得到了我想要的，但并不完全。我对正则表达式不是很好，但是这个打印的结果<p></p/([^ ]+).*}> 我可以删除最后一点正则表达式，它会让#1 满意。上面的#2 非常有帮助，我想弄清楚我做错了什么。我敢打赌，最后一点正则表达式可以让您突出显示一个部分并用标签包围它。

你能帮我解决这个问题并满足 #1 和 #2 吗？

Answer 1

好的，这是两个不同的 sn-ps，第一个你已经做过，所以我要谈谈第二个：

你想在一个基于快捷方式的标签中包围一个文本，你首先需要做两件事来创建sn-p，然后添加快捷方式

这个 sn-p 插入后会在你的文本周围加上一个 p 标签，当你写的时候它会立即改变。

"surround_tag": {
        "prefix": "<stag>",
        "body": [
            "<${1:p}>${TM_SELECTED_TEXT}</$1>"
        ],
        "description": "surround text by tag"
    }

请注意，我们正在使用一个名为 TM_SELECTED_TEXT 的特定变量，您可以在此处找到有关这些变量的更多信息，https://code.visualstudio.com/docs/editor/userdefinedsnippets

然后添加一个键盘快捷键来插入那个sn-p

{
    "key": "cmd+w cmd+t",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "name": "surround_tag", 
    }
  }

// in args here you can add a key langId to specify specific languages like
 "args": {
      "langId": "javascript",
      "name": "surround_tag", 
    }

你可以在这里找到语言标识符https://code.visualstudio.com/docs/languages/identifiers

当然，您也可以使用 insertSnippet 命令插入不使用键盘快捷键的 sn-p（CMD + Shift + P 然后 insertSnippet，然后选择你的那个）

您也可以使用以下站点为vscode和sublime生成sn-ps https://snippet-generator.app/

Answer 2

您可以使用

修复您的代码

"blank_tag": {
    "prefix": "<cmdso>",
    "body": [
        "<${1:p}>${2:$SELECTION}</${1/(\\S+).*/$1/}>"
    ],
    "description": "Adds a blank tag to use"
}

[^ ] 在代码中可以写成\\S+，\S+ 匹配 1 个或多个非空白字符。语法是${ID/pattern/replacement/flags}，所以你的代码不完整。

Answer 3

如果您使用的是 Sublime Text，您可以使用 Atomizr 包在编辑器中转换 sn-ps。

示例：

1. 使用包控制安装包
2. 打开一个 Sublime Text sn-p
3. 运行 Atomizr: Sublime Text to Visual Studio Code 命令（或 CtrlS、CtrlV 在 macOS 上）

要转换多个文件，安装CLI equivalent 可能更方便（需要NodeJS）

示例：

# Single conversion
atomizr example.sublime-snippet --target vscode

# Batch conversion
atomizr *.sublime-snippet --target vscode

Answer 4

如果您想将相同的键绑定用于两个不同的操作，就像您看起来那样，那么您将必须找到一种方法来区分当时存在的条件以便正确触发适当的版本。

在您的情况下，这涉及在一种情况下使用它，您将从选定的文本开始。所以我们可以使用when子句editorHasSelection来区分twp期望的动作。

在您的 keybindings.json 中：

  {
    "key": "cmd+shift+O",
    "command": "editor.action.insertSnippet",
    "args": {
      "snippet": "<${1:p}>$0</$1>"
    },
    "when": "editorTextFocus && !editorHasSelection"
  },

  {
    "key": "cmd+shift+O",
    "command": "editor.action.insertSnippet",
    "args": {
      "snippet": "<${1:p}>${TM_SELECTED_TEXT}</$1>"
    },
    "when": "editorTextFocus && editorHasSelection"
  }

我们看到如果编辑器中有选择，只会触发第二个命令！！

!editorHasSelection表示如果没有选择，就触发这个。否则，我们将触发另一个命令。

请注意，已经有一个命令也绑定到 Cmd+Shift+O：workbench.action.gotoSymbol 如果您想要坚持使用 Cmd+Shift+O 作为触发器。这将禁用它：

{
  "key": "cmd+shift+O",
  "command": "-workbench.action.gotoSymbol"
},

这是它的工作演示：