如何在VS Code代码片段中将kebab-case文件名转为pascal-case组件名

数据老陈

2026-6-20

解决VS Code代码片段中多短横线kebab-case文件名转PascalCase的问题

当前你的VS Code代码片段正则仅能处理最多两个单词的kebab-case文件名，遇到三个及以上单词（如one-two-three.tsx）时，无法将所有短横线分隔的单词首字母转为大写并移除短横线，导致输出OneTwo-three而非预期的OneTwoThree。

修正方案

将原正则替换为全局匹配并处理所有短横线分隔单词的表达式：

${TM_FILENAME_BASE/(?:^|-)([a-z])/${1:/capitalize}/g}

正则逻辑解释

(?:^|-)：非捕获分组，匹配字符串开头或短横线（仅用于定位，不参与替换）
([a-z])：捕获短横线后（或字符串开头）的小写字母
${1:/capitalize}：将捕获的小写字母转为大写
g：全局标志，确保处理所有符合条件的匹配项

修正后的完整代码片段

"react component": {
    "prefix": [
        "rc",
        "erc"
    ],
    "body": [
        "import { type FC } from 'react'",
        "import styles from './${TM_FILENAME_BASE}.module.sass'",
        "",
        "export const ${TM_FILENAME_BASE/(?:^|-)([a-z])/${1:/capitalize}/g}: FC<${TM_FILENAME_BASE/(?:^|-)([a-z])/${1:/capitalize}/g}Props> = (props) => {",
        "  const {  } = props;",
        "",
        "  return (",
        "    <div>",
        "       $2",
        "    </div>",
        "  );",
        "};",
        "",
        "export type ${TM_FILENAME_BASE/(?:^|-)([a-z])/${1:/capitalize}/g}Props = {",
        "  ",
        "}",
        "",
    ],
    "description": "React Component with typed props and imported styles"
}