如何将该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

您可以使用以下方式修复代码

"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 2

如果您使用的是Sublime Text，则可以使用Atomizr包在编辑器中转换代码片段。

例：

1. 使用程序包控制安装程序包
2. 打开Sublime Text代码段
3. 运行Atomizr：Sublime Text to Visual Studio Code命令（或在MacOS上为Ctrl S或Ctrl V ）

要转换许多文件，安装等效的CLI可能更方便（需要NodeJS ）

例：

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

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

Answer 3

好的，这是两个不同的片段，第一个是您已经做过的，因此我将谈论第二个：

您要基于快捷方式将标签中的文本括起来，首先需要两件事来创建代码段，然后添加快捷方式

插入时，此代码段将用ap标记包围您的文本，在您编写时会立即更改。

"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

然后添加键盘快捷方式以插入该代码段

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

这是一个工作示例：