如何配置VS Code的ES7 React代码片段，将短横线文件名转为PascalCase组件名？

可以通过自定义VS Code用户代码片段实现这个需求，无需修改扩展本身，具体步骤如下：

• 打开VS Code命令面板：按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入Configure User Snippets并回车。
• 选择对应语言的代码片段文件：TSX项目选typescriptreact.json，JSX项目选javascriptreact.json。
• 在打开的JSON文件中，添加或修改rfc代码片段的配置：

  "React Function Component (PascalCase)": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {",
      "  return (",
      "    <div>",
      "      ${1}",
      "    </div>",
      "  );",
      "};",
      "",
      "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};",
      ""
    ],
    "description": "React Function Component with PascalCase name from filename"
  }
  

  核心逻辑是用${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}替换原本的${TM_FILENAME_BASE}，VS Code会自动将文件名（不含后缀）从kebab-case格式转换为PascalCase格式。
• 保存文件后，在Next.js项目的pages/blah/this-is-the-page.tsx中输入rfc并按Tab，生成的组件名就会自动变为ThisIsThePage。

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