When creating a VSCode snippet, how can I transform a variable to title-case (like TitleCase)?

Question

https://code.visualstudio.com/docs/editor/userdefinedsnippets#_placeholdertransform

My aim is to automatically set the class name within the context of the snippet being inserted. VSCode does not natively support class or method names, but it does support the file name.

My file names closely mimic the class name:

foo-bar.ts for class FooBar.

Here is my current code snippet wherein I can transform "foo-bar" to "Foo-bar" using the native "capitalize" grammar provided by VSCode. TM_FILENAME_BASE is a native variable which extracts the filename without the extension:

"My Snippet": {
    "scope": "typescript",
    "prefix": "snippet",
    "body": [
        "${1}() {",
        "\treturn this.get(${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}.FIELD.${3});",
        "}",
        "",
        "$0"
    ],
    "description": "Creates a function wrapper for a model's attribute."
}

I'd like to transform "foo-bar" to "FooBar".

Mark · Accepted Answer · 2020-03-05T19:37:55.943

23

Try this:

  "My Snippet": {
    "scope": "typescript",
    "prefix": "snippet",
    "body": [
      "${1}() {",

      // "\treturn this.get(${TM_FILENAME_BASE/([a-z]*)-*([a-z]*)/${1:/capitalize}${2:/capitalize}/g}.FIELD.${3});",

      "\treturn this.get(${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}.FIELD.${3});",

      "}",
      "",
      "$0"
    ],
    "description": "Creates a function wrapper for a model's attribute."
  }

EDIT : In October, 2018 the \pascalcase transform was added to vscode - see commit, but not yet added to the documentation (as of the date of this edit). I have added the much simpler transform above which accomplishes the PascalCase transform.

Demo added, uses the clipboard after the first filename case (test-bed-snippets.xxx) just to make the various possibilities easy to demonstrate.

See also snippet transform to CamelCase

edited Mar 05 '20 at 19:37

answered Oct 18 '18 at 13:46

Mark

143,421
24
428
436

Hey, thanks! Would your code work for a single word file? ```foo``` -> ```Foo```? – Omair Vaiyani Oct 18 '18 at 14:11
It does now, I just changed the hyphen from + to * so it is optional. – Mark Oct 18 '18 at 14:19
Really appreciate this! – Omair Vaiyani Oct 18 '18 at 14:21
@Israel It work for any number of file names like `foo-bar-longer-name` or `foo_bar_longer_longer_name` or any mix of hyphens and underscores in the same filename. Any file extension. – Mark Mar 05 '20 at 19:23
Good lord, this just cost me hours in trying to figure it out because the documentation is still missing. Thanks for this... – Arsenal Jan 13 '21 at 13:08
However, it doesn't work with a camelCase. Trying to convert "camelCase" would result in "Camelcase" where the second "c" is changed to lower case. – Samuel Sep 27 '21 at 12:25

score 0 · Answer 2 · answered Aug 20 '19 at 13:00

Thought it might be useful to supplement Mark's excellent answer with another example.

In my case, I wanted to take a name - as selected text - and convert it to Swift code that would instantiate a new class passing in variables name and email address.

So for example I select John Smith as first name, last name and convert to:

let johnSmith = User(name: "John Smith", email: "john.smith@foorbar.com")

Code snippet for this would be as follows:

"User": {
        "prefix": "u",
        "body": [
            "\tlet ${TM_SELECTED_TEXT/([a-zA-Z]*) *([a-zA-Z]*)/${1:/downcase}$2/} = User(name: \"${TM_SELECTED_TEXT}\", email: \"${TM_SELECTED_TEXT/([a-zA-Z]*) *([a-zA-Z]*)/${1:/downcase}.${2:/downcase}/}@foobar.com\")\n",
        ],
        "description": "Create User with name and email"
    }

score 0 · Answer 3 · answered Jul 04 '23 at 17:07

TM_FILENAME_BASE: The filename of the current document without its extensions.

${1:/upcase}: change to uppercase.

g: used to perform the replacement globally.

"My Snippet": {
    "scope": "typescript",
    "prefix": "snippet",
    "body": [
        "${TM_FILENAME_BASE/(?:^|-|_|\\.)(\\w)/${1:/upcase}/g}"
    ],
    "description": "Creates a function wrapper for a model's attribute."
}

UserDefinedSnippetsVariablesSRC

When creating a VSCode snippet, how can I transform a variable to title-case (like TitleCase)?

3 Answers3

Linked

Related