VSCode Snippet - Dynamically generating characters based on user input length

Question

I have this basic snippet for vue-html

{
    "BANNER1": {
        "prefix": "banner",
        "body": ["<!-- ----------------", "/// $1", "--------------------- -->"]
    }
}

It render this

<!-- ----------------
/// ADD VALUES 
--------------------- -->

Right now, I hardcoded 16 dashes -

Can I dynamically generate the amount of - based on my $1?

Let's say, I enter "Hello" which contains 5 characters

I'm hoping to get this

<!-- -----
/// Hello
----- -->

@jD3V I tried the snippet from the accepted answer of that link you shared. It is not getting what I expected. I got 3 things the same. The replacement seems to never happen. Please see this : https://i.imgur.com/gKazcE9.png — code-8, May 13 '22 at 21:42
I added extra bonus content to this answer about varying the lengths with a new regex. — Mark, May 13 '22 at 21:51
Both answers were authored by Mark, and both questions are conceptually the same. To further my argument, I didn't know much about snippets — _I actually disable them all together in my suggestions widget_ — but for the sake of knowing I used the other answer to learn how to do it. Its a solution to this question. If you feel I am wrong, edit your question and ensure that it is conceptually different, or explain why it doesn't answer your question, but saying I tried the answer, it doesn't work, is not enough. — JΛYDΞV, May 14 '22 at 02:35
Actually, it takes very little different content in either answer to satisfy most people that both answers have value. I did that here for getting variable-length tabstops which is interesting and uses a conditional. — Mark, May 14 '22 at 03:33

Mark · Accepted Answer · 2022-05-14T03:15:44.467

1

Try this snippet:

"BANNER1": {
  "prefix": "banner",
  "body": [
    "<!-- ${1/./-/g}",
      "/// $1", 
      "${1/./-/g} -->"
  ]
}

{1/./-/g} will replace each character in $1 with a -. In that way you are effectively counting the number of characters in $1.

What if you wanted to add one less than the length of $1, then use this:

"<!-- ${1/^.|(.)/${1:+-}/g}"

The first character, the . is not captured in a regex group. So if you wanted to use the length-2 you would change the first part to ^.. so ${1/^..|(.)/${1:+-}/g} or generically

${1/^.{n}|(.)/${1:+-}/g}

and replace that n with whatever number you want to subtract from the $1.

The rest of tabstop $1 is matched one by one (thanks to the global flag). And then the conditional

${1:+-} says if there was a capture group 1, then add a -. Capture group 1 itself is never added to the replacement.

edited May 14 '22 at 03:15

answered May 13 '22 at 21:30

Mark

143,421
24
428
436

I used your code, and my result shows 3 things the same. – code-8 May 13 '22 at 21:38
https://i.imgur.com/MXEOvyr.png – code-8 May 13 '22 at 21:40
You have to hit `Tab` one more time to complete the transform. All transforms, these things: `${1/./-/g}` are a `transform`. – Mark May 13 '22 at 21:43
Can we please skip the tab part ? make it work automatically as soon as I finished typing ... If not possible, I understand. – code-8 May 13 '22 at 21:43
Not possible in built-in vscode to not use the final tab to complete a snippet transform. You could look at the extension `Hypersnips` which can be made to do it automatically. – Mark May 13 '22 at 21:45

VSCode Snippet - Dynamically generating characters based on user input length

1 Answers1