VS Code: How to convert snippet placeholder to uppercase or lowercase?

Question

In VS Code, the docs for creating user defined snippets mentions some Grammar which includes options for /upcase, /downcase, and /capitalize, but I can't figure out how to use it.

I'm using the latest version of VS Code: Version 1.25.0 on Mac.

It seems like this snippet should convert the value of the placeholder to uppercase and to lowercase after typing it and hitting tab, but it doesn’t:

"test": {
    "prefix": "test",
    "body": "${1} -> ${1:/upcase} ${1:/downcase}"
},

Flow and Expected Result

type test
hit tab to get the snippet.
type Asdf to result in:
```
Asdf -> Asdf Asdf
```
hit tab to get expected result of:
```
Asdf -> ASDF asdf
```

Current Result

asdf -> asdf asdf

This is now built in to VS Code, as of [version 1.47](https://code.visualstudio.com/updates/v1_47#_case-changing-in-regex-replace). — maxathousand, Jul 14 '20 at 19:58

score 44 · Accepted Answer · edited Sep 09 '19 at 14:54

44

Try this:

"test": {
    "prefix": "test",
    // "body": "${1} -> ${1/(.*)/${1:/upcase}/} > ${1/(.*)/${1:/downcase}/}"
    // simpler version below works too
    "body": "${1} -> ${1/(.*)/${1:/upcase} ${1:/downcase}/}"
}

You need to hit Tab to apply the transformation.

edited Sep 09 '19 at 14:54

schlamar

9,238
3
38
76

answered Jul 10 '18 at 22:22

Mark

143,421
24
428
436

2

Follow up question: Do you know if there is a way to convert a camelCASE string to SCREAMING_SNAKE_CASE string using snippets? – Beau Smith Jul 10 '18 at 23:31
Found this, but the examples don't work: https://stackoverflow.com/questions/48104851/snippet-regex-match-arbitrary-number-of-groups-and-transform-to-camelcase – Beau Smith Jul 10 '18 at 23:33
The input from https://stackoverflow.com/questions/48104851/snippet-regex-match-arbitrary-number-of-groups-and-transform-to-camelCase is very different from your input on the present question. SO I am not sure what you mean by "the examples don't work."? – Mark Jul 10 '18 at 23:43
I'm sorry. Yes, the examples work as it. When I attempt to use the example to update a placeholder, I can't get them to work. Created a new question to clarify another need I have for a snippet: https://stackoverflow.com/questions/51277998/vs-code-how-to-convert-snippet-placeholder-from-camelcase-to-screaming-snake-ca – Beau Smith Jul 11 '18 at 05:47
I've added a 50 point bounty to my related question… https://stackoverflow.com/questions/51277998/vs-code-how-to-convert-snippet-placeholder-from-camelcase-to-screaming-snake-ca – Beau Smith Jul 18 '18 at 03:44
Would have made a lot more sense if they just made a JS API for snippets instead of a DSL like this... – Andy Jan 19 '20 at 18:53
Not working at all for me, it doesn't change the case, not even after I hit `Tab`. – Andy Jan 19 '20 at 18:59
Okay, turns out some extension is borking the case change...don't have the problem when I run `code --disable-extensions` ‍♂️ – Andy Jan 19 '20 at 19:12
1

Sometimes also you can inadvertently select a different intellisense option when you hit `Tab` rather than this snippet. I wouldn't use `test` as a real prefix - it was what the OP had just for testing purposes. – Mark Jan 19 '20 at 19:50
@Mark is it also possible to split a camelcase string into lowercase parts, e.g. "testCase" to "test case"? – icaptan Jan 24 '22 at 19:45
1

@icaptan Yes it is very easy but you should post a question on it. Longer code is ugly in a comment. – Mark Jan 24 '22 at 21:19
In this example `<$2${1/(.*)/${1:/downcase}/}>` pressing tab will downcase $1 but weirdly enough, the cursor is then *after* $1 transfomed and not *before* as you would expect to fill up "$2", did I miss something? – Eric Burel Oct 04 '22 at 11:59
1

@EricBurel I have seen that before, where a tabstop right next to another doesn't work. A simple `"$2$1"` also fails. You can reverse the tabstops and it works or insert a space between them. So it's a bug. – Mark Oct 04 '22 at 16:48
It indeed works if I do "$2-$1" for instance – Eric Burel Oct 05 '22 at 13:09

score 15 · Answer 2 · answered Feb 15 '21 at 20:03

15

Kind of solution:

  "test": {
    "prefix": "test",
    "body": "$1 ${1/(.*)/${1:/upcase}/}  ->  ${1/(.*)/${1:/downcase}/}  ->  ${1/(.*)/${1:/capitalize}/}"
  }

result:

asdF ASDF  ->  asdf  ->  AsdF

answered Feb 15 '21 at 20:03

Taras B.

151
1
2

If a user has updated VS Code, is this necessary to run? – karolus Feb 16 '21 at 02:56
My VS Code version is 1.53.0. You need first to save this snippet to snippets file then you can use it as a usual snippet. – Taras B. Feb 16 '21 at 15:36
A link to the doc maybe ? – TOPKAT Nov 05 '21 at 15:15
Finally found the doc: https://github.com/Microsoft/vscode/blob/main/src/vs/editor/contrib/snippet/snippet.md#placeholder-transform – TOPKAT Nov 05 '21 at 15:23

score 3 · Answer 3 · answered Jul 10 '18 at 21:15

3

For reference:

The integer in the EBNF docs refers to a RegExp group not to a tabstop reference so should work:

"test": {
    "prefix": "test",
    "body": "${1} -> ${1/(Asdf)/${1:/upcase}/} ${1/(Asdf)/${1:/downcase}/}"
}

answered Jul 10 '18 at 21:15

M. Oranje

781
5
13

1

Thanks for this answer. It works for me, but I've accepted the other answer as it works with any string, not just the sample text of "Asdf". – Beau Smith Jul 10 '18 at 23:23

score 1 · Answer 4 · answered Jan 24 '23 at 03:35

1

Doc is here.

You can use capitalize, camelcase, pascalcase, selection, clipboard, random and date also.

https://github.com/microsoft/vscode/blob/main/src/vs/editor/contrib/snippet/browser/snippet.md

answered Jan 24 '23 at 03:35

Jehong Ahn

1,872
1
19
25

VS Code: How to convert snippet placeholder to uppercase or lowercase?

Flow and Expected Result

Current Result

4 Answers4

Linked