Visual Studio Code Snippets – Common Case Transformations

README.md

Common Case Transformation Snippets

Visual Studio Code allows Snippets to perform ✨Variable Transforms✨ using Regex.

Here are some common case transformations that you can apply to your snippets. In these examples, I'm using $TM_FILENAME_BASE, but the same transformations should apply to any of the Snippet Variables.

snippets-from-delimited.json can convert filenames like my-file-name, my_file_name, my file name. If your filename is delimited by a dash, underscore, or space, these should work.

snippets-from-mixed-case.json can convert filenames like myFileName and MyFileName. If your filename is in camel or Pascal case, these should work.

snippets-from-delimited.json

{
    "ConstantCase": {
        "prefix": "filename-constant",
        "description": "",
        "body": "${TM_FILENAME_BASE/(\\w+)?[-_\\s]+(\\w+)/${1:/upcase}_${2:/upcase}/g}"
    },
    "SnakeCase": {
        "prefix": "filename-snake",
        "description": "",
        "body": "${TM_FILENAME_BASE/(\\w+)?[-_\\s]+(\\w+)/${1:/downcase}_${2:/downcase}/g}"
    },
    "KebabCase": {
        "prefix": "filename-kebab",
         "description": "",
        "body": "${TM_FILENAME_BASE/(\\w+)?[-_\\s]+(\\w+)/${1:/downcase}-${2:/downcase}/g}"
    },
    "CamelCase": {
        "prefix": "filename-camel",
        "description": "",
        "body": "${TM_FILENAME_BASE/(\\w+)?[-_\\s]+(\\w+)/${1:/downcase}${2:/capitalize}/g}"
    },
    "PascalCase": {
        "prefix": "filename-pascal",
        "description": "",
        "body": "${TM_FILENAME_BASE/(\\w+)?[-_\\s]+(\\w+)/${1:/capitalize}${2:/capitalize}/g}"
    }
}

snippets-from-mixed-case.json

{
    "PascalCase": {
        "prefix": "filename-pascal",
        "description": "",
        "body": "${TM_FILENAME_BASE/(\\w)([a-z]+)/${1:/capitalize}${2:/downcase}/g}"
    }
}

A snippet to transform Camel Case to Kebab Case

  "CamelCase to Kebab": {
    "prefix": "camel2kebab",
    "body": "${TM_FILENAME_BASE/(^[A-Z])|(?<=[a-z0-9])([A-Z])/${1:/downcase}${2:+-}${2:/downcase}/g}",
  }

Thanks @rioj7 I'd tried and been looking for this 👍

Excellent! I've been looking for this for years.

If my filename is "file.tsx", shouldn't it return "File" in PascalCase? Right now, it's returning "file". Is there a reason for this, or am I missing something?