如何快速创建带全套模板文件的React组件目录，IDE是否有对应功能？

一、IDE内置功能实现（无需额外依赖） #

VSCode #

• 方案1（推荐）：安装Folder Templates插件，提前预设好组件目录结构和每个文件的模板内容，后续右键点击src/components目录，选择对应预设模板，输入组件名即可一键生成全套带模板的文件。
• 方案2（无插件）：使用VSCode自带的用户代码片段功能，为每个文件类型（.tsx、.scss等）预设触发词，手动新建组件目录和文件后，输入触发词即可快速生成对应模板内容。

WebStorm/IntelliJ 系列 IDE #

本身自带文件模板功能，无需额外安装插件：

1. 打开设置 → 编辑器 → 文件和代码模板
2. 新建React组件专属模板组，依次添加你需要的index.ts、组件名.tsx、组件名.test.tsx等文件模板，模板内用${NAME}变量指代组件名，自动完成内容替换
3. 后续右键点击src/components目录，选择预设的组件模板，输入组件名即可直接生成完整目录结构和所有带预设内容的文件。

二、命令行工具实现 #

通用模板工具 Plop #

轻量代码生成工具，灵活度高，适合团队统一规范：

1. 项目内安装Plop后，在根目录编写plopfile.js，定义组件生成规则、每个文件的模板内容
2. 后续执行plop component ExampleComponent即可一键生成目标文件，配置可以提交到Git仓库，所有团队成员共用同一套模板。

React专属生成工具 #

可以用generate-react-cli，专门适配React项目的生成工具：

1. 安装后通过配置文件自定义要生成的文件类型、路径、模板规则
2. 执行npx generate-react-cli component ExampleComponent即可生成符合要求的组件目录。

三、自定义Node脚本（零额外依赖） #

如果不想引入第三方工具，可以自己写简易Node脚本实现：

1. 新建scripts/generateComponent.js文件，编写逻辑：接收组件名参数，创建对应目录，通过fs模块写入预设好的各文件模板内容，替换组件名变量
2. 在package.json中添加scripts配置："new:component": "node scripts/generateComponent.js"
3. 后续执行npm run new:component ExampleComponent即可完成生成，可根据自己的需求任意调整规则。

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