如何在VS Code代码片段中存储并复用转换后的变量？

我在VS Code中自定义了一个生成TypeScript React组件的代码片段，组件名称基于文件名生成，将文件名转换为PascalCase的写法为${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}。当前代码片段如下：

"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}/}"
    ]
}

该片段可正常工作，但文件名转PascalCase的转换逻辑重复出现多次。请问有没有更优雅的实现方式，比如将转换后的组件名存储起来并多次复用？若后续遇到更复杂的代码片段与转换逻辑，该如何处理？

优雅复用转换后的组件名 #

VS Code代码片段支持变量捕获功能，你可以先把转换后的PascalCase组件名存储到一个临时变量里，之后在多个位置直接引用这个变量，避免重复写转换逻辑。

修改后的代码片段如下：

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

核心逻辑说明 #

• 第一行的${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}}是关键：${1:默认值}定义了一个编号为1的变量，默认值就是文件名转PascalCase的结果
• 后续所有需要用到组件名的地方，直接写${1}就能引用这个预转换好的值
• 这个变量还支持编辑：插入代码片段后，你可以按Tab切换到这个变量位置，快速修改组件名（如果需要的话）

复杂场景的处理方案 #

如果后续遇到更复杂的转换逻辑或代码片段，可参考以下方法：

• 多变量捕获：定义多个带编号的变量（${2:...}、${3:...}），分别存储不同转换结果，比如同时处理组件名、样式类名前缀等
• 嵌套转换：在变量的默认值里嵌套正则转换逻辑，处理更复杂的字符串格式（比如连字符转驼峰、大写转小写等组合操作）
• 使用代码片段扩展工具：如果VS Code原生的变量逻辑满足不了需求，可以借助如Snippets Ranger这类插件，支持更复杂的脚本式转换逻辑

内容的提问来源于stack exchange，提问作者Michal