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

Question

请参阅下面我的尝试和结果。首先是 Sublime 片段：

<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 将创建一个 html 标签

   <p></p>

   并链接到

   p

   ，以便您可以开始输入并更新两侧。按 Tab 键会将光标置于标签的中心。

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

好的，这是两个不同的片段，第一个片段你已经做了，所以我要谈谈第二个片段：

您想基于快捷方式将文本包围在标签中，您首先需要做两件事来创建片段，然后添加快捷方式

插入后，此片段将用 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/userdefinesnippets

然后添加键盘快捷键来插入该片段

{
    "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 命令（CMD + Shift + P，然后 insertSnippet，然后选择您的片段）来插入不使用键盘快捷键的代码片段

您还可以使用以下站点为 vscode 和 sublime 生成代码片段 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 包在编辑器中转换片段。

示例：

1. 使用包控制安装包
2. 打开 Sublime Text 片段
3. 运行 Atomizr: Sublime Text to Visual Studio Code 命令（或 macOS 上的 CtrlS、CtrlV）

要转换许多文件，安装 CLI 等效项可能更方便（需要 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"
},

这是它的工作演示：

Answer 5

您可以使用此工具https://code-profi.com/how-to-convert-text-editor-snippets。我不确定正则表达式的正确性，但我将所有代码片段从 sublime 转换为 vs code 和 Jetbrains Webstorm，它对我有用。