VS Code代码片段正则需求：将驼峰文件名转为短横线命名

问题分析 #

你当前使用的正则TM_FILENAME_BASE/[^0-9a-z]+//gi仅能移除非小写字母数字的字符，无法处理驼峰式文件名的拆分与大小写转换，因此AppInput.tsx只会被转为AppInput，达不到app-input的需求。

解决方案 #

在VS Code代码片段中，使用链式正则替换实现目标转换：

"${TM_FILENAME_BASE/([A-Z])/-$1/g; downcase; s/^-//}"

分步解释 #

1. 拆分驼峰并插入短横线：([A-Z])/-$1/g 会在每个大写字母前插入短横线，例如AppInput会被转为-App-Input
2. 转为全小写：downcase是VS Code内置转换指令，将所有字符转为小写，此时结果变为-app-input
3. 移除开头的短横线：s/^-// 删除字符串开头的多余短横线，最终得到app-input

完整代码片段示例 #

以React组件模板为例，完整配置如下：

{
  "React Function Component": {
    "prefix": "react-comp",
    "body": [
      "import React from 'react';",
      "",
      "interface ${TM_FILENAME_BASE}Props {",
      "  // 定义组件属性",
      "}",
      "",
      "export const ${TM_FILENAME_BASE}: React.FC<${TM_FILENAME_BASE}Props> = ({}) => {",
      "  return (",
      "    <div className=\"${TM_FILENAME_BASE/([A-Z])/-$1/g; downcase; s/^-//}\">",
      "      {/* 组件内容 */}",
      "    </div>",
      "  );",
      "};",
      ""
    ],
    "description": "生成React函数组件模板"
  }
}

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