如何在VS Code中创建多文件代码片段？React组件与CSS模块批量生成

VS Code原生不支持直接生成多文件代码片段，要实现同时创建React组件和对应CSS Modules文件，最便捷的方式是用扩展配合自定义片段，以下是具体步骤：

1. 安装多文件片段扩展 #

在VS Code扩展商店搜索并安装Multi-File Snippets，这个扩展专门用来创建和插入多文件代码片段。

2. 创建自定义多文件片段 #

• 打开命令面板（快捷键：Ctrl+Shift+P / Cmd+Shift+P），输入Multi-File Snippets: Create New Snippet并回车。
• 给片段命名（比如React Component + CSS Module），回车进入配置界面。
• 将默认配置替换为以下内容：

{
  "React Component + CSS Module": {
    "prefix": "react-css",
    "body": [
      {
        "fileName": "${1:MyComponent}.jsx",
        "content": [
          "import styles from './${1:MyComponent}.module.css';",
          "",
          "const ${1:MyComponent} = () => {",
          "  return (",
          "    <div className={styles.root}>",
          "      ${0}",
          "    </div>",
          "  );",
          "};",
          "",
          "export default ${1:MyComponent};"
        ]
      },
      {
        "fileName": "${1:MyComponent}.module.css",
        "content": [
          ".root {",
          "  /* 在这里添加组件样式 */",
          "}"
        ]
      }
    ],
    "description": "一键生成带CSS Modules的React组件文件"
  }
}

• 保存配置文件，它会自动存到VS Code的用户片段目录中。

3. 使用多文件片段 #

• 导航到你要创建组件的目标目录。
• 打开命令面板，输入Multi-File Snippets: Insert Snippet，选择你刚才创建的片段。
• 输入组件名称（比如Navbar）并回车，就能自动生成Navbar.jsx和Navbar.module.css两个文件，组件文件里已经自动完成了CSS模块的引入。

无扩展替代方案 #

如果不想安装扩展，可以用终端命令批量创建文件，再配合单文件代码片段填充内容：

• 终端执行：touch ComponentName.jsx ComponentName.module.css（Windows系统用type nul > ComponentName.jsx && type nul > ComponentName.module.css）
• 给React组件创建单文件代码片段，在生成的jsx文件中插入模板内容。

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