How do I convert this Sublime snippet into a VS Code snippet?

Question

See below my attempt and result. The Sublime snippet first:

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

and the keybinding:

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

What this does is the following:

1. Pressing Cmd + Shift + O will create an html tag <p></p> in with the p linked so you can start typing and it updates both sides. Pressing tab will place your cursor in the center of the tags.

2. Highlighting a section, then pressing cmd + shift + O will surround that section with the tags.

What I've managed to get trying on my own is the following in VS Code:

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

This almost gets what I want but not quite. I'm not very good with regex but the result of this prints <p></p/([^ ]+).*}> I can remove that last bit of regex and it will get #1 satisfied. The #2 above is extremely helpful and I'd like to figure out what I'm doing wrong. I'm betting that last bit of regex is what allows you to highlight a section and surround it with the tags.

Can you help me fix this to work and satisfy #1 and #2?

Answer 1

You may fix your code using

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

The [^ ] can be written as \\\\S+ in the code, \\S+ matches 1 or more non-whitespace chars. The syntax is ${ID/pattern/replacement/flags} , so you had an incomplete code.

Answer 2

If you're using Sublime Text, you can use the Atomizr package to convert snippets within the editor.

Example:

1. Install the package using Package Control
2. Open a Sublime Text snippet
3. Run the Atomizr: Sublime Text to Visual Studio Code command (or Ctrl S , Ctrl V on macOS)

To convert many files, it's probably more convenient to install the CLI equivalent (requires NodeJS )

Example:

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

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

Answer 3

Ok these are two different snippets, the first you already did so i'm going to speak about the second:

You want to surround a text in a tag based on a shortcut, you need two thing first to create the snippet, then to add the shortcut

This snippet when inserted will surround your text with ap tag, that changes immediately while you are writing.

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

Notice that we are using a specific variable called TM_SELECTED_TEXT, you can find more about these variables here, https://code.visualstudio.com/docs/editor/userdefinedsnippets

Then add a keyboard shortcut to insert that snippet

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

You can find language identifiers here https://code.visualstudio.com/docs/languages/identifiers

Of course, you can also insert the snippet without the keyboard shortcut by using the insertSnippet command (CMD + Shift + P and then insertSnippet, then pick your one)

You can also use the following site to generate snippets for both vscode and sublime https://snippet-generator.app/

Answer 4

If you want to use the same keybinding for two different actions as it seems you do, then you will have to find a way to differentiate between the then existing conditions so that the appropriate version is triggered properly.

In your case, that involves utilizing that in one situation you will start with selected text . So we can use the when clause editorHasSelection to distinguish between the twp desired actions.

In your 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"
  }

We see that only the second command will be triggered if there is a selection in the editor!!

!editorHasSelection means if there is no selection, trigger this one. Otherwise, we will trigger the other command.

Note that there is already a command also bound to Cmd + Shift + O : workbench.action.gotoSymbol You should disable that command if you want to stick with Cmd + Shift + O as your triggers. This will disable it:

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

Here is a demo of it working: