在 VS Code 片段中存储和重用转换后的变量

Question

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

它工作得很好，但正如你所看到的，从 kebab-case 文件名到 PascalCase 组件名称的转换是在很多地方。有什么方法可以更优雅地输入此片段，例如。将转换后的组件名称存储在某处并在多个地方重用它？这可能不重要，但是如果我有更复杂的代码片段和更复杂的转换怎么办？

Answer 1

您可以将转换结果“保存”在制表符中，如下所示：

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

您看到变换被包裹在制表符中

$1

。然后您可以在其他需要的地方使用该制表符。

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