Store and reuse transformed variable in VS Code snippet

Question

I have a custom code snippet in VS Code which generates TypeScript React component with a name based on the filename. The transformation of the filename to a PascalCase looks like this: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}. So far, my snippet looks like this:

"Functional component": {
    "prefix": ["functional-component"],
    "body": [
        "import styles from \"./${TM_FILENAME_BASE}.module.scss\"",
        "",
        "export type ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props = {",
        "   $0",
        "}",
        "",
        "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = (props: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props) => {"
        "   const {  } = props",
        "",
        "   return (",
        "       <div className={styles.root}>"
        "           ",
        "       </div>",
        "   )",
        "}",
        "",
        "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}"
    ]
}

It works well, but as you can see, the transformation from kebab-case filename to PascalCase component name is at many places. Is there any way how to type this snippet more elegantly, eg. store transformed component name somewhere and reuse it at multiple places? This is problably nothing critical, but what if I will have more complex snippet with more complex transformations?

Answer 1

You can "save" the result of a transformation in a tabstop like so:

${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}

where you see the transform is wrapped in a tabstop $1. Then you can just use that tabstop in the other places where you need it.

So your snippet could be simplified as follows:

"Functional component": {
    "prefix": ["functional-component"],
    "body": [
            "import styles from \"./${TM_FILENAME_BASE}.module.scss\"",
            "",
            "export type ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Props = {",
            "   $0",
            "}",
            "",
            "const $1 = (props: $1Props) => {"
            "   const {  } = props",
            "",
            "   return (",
            "       <div className={styles.root}>"
            "           ",
            "       </div>",
            "   )",
            "}",
            "",
            "export default $1"
    ]
}

And nicely, you can do further modifications on that tabstop in other places like this:

              // transforms the results of the previous transform
${1/(.)/Q/}   // replace first letter with Q