Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>React Component Creator WYNNew to Visual Studio Code? Get it now.
React Component Creator WYN

React Component Creator WYN

wangyuening

|
2 installs
| (0) | Free
Quickly create React components with index.tsx and index.module.scss.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

React Component Creator

一个 VS Code 扩展,旨在帮助开发者快速创建 React 组件的脚手架,自动生成 index.tsx 和 index.module.scss 文件。

功能特性

  • 快速创建: 允许您通过右键菜单或命令面板快速生成新的 React 组件文件夹。
  • 自动化文件生成: 自动创建 index.tsx 文件,并填充基本的 React 函数组件结构。
  • CSS Module 支持: 自动创建 index.module.scss 文件,并将其引入 index.tsx。
  • PascalCase 命名: 自动将您输入的组件名转换为 React 组件常用的 PascalCase 格式。

如何安装

  1. 在 VS Code 中打开扩展视图 (Ctrl+Shift+X 或 Cmd+Shift+X)。
  2. 搜索 "React Component Creator"。
  3. 点击 "安装" 按钮。

如何使用

通过资源管理器右键菜单

  1. 在 VS Code 的资源管理器中,右键点击您希望创建新组件的文件夹(例如 src/components)。
  2. 在上下文菜单中选择 "Create React Component"。
  3. 在弹出的输入框中输入您新组件的名称(例如 MyNewFeature)。
  4. 按下 Enter 键。

扩展将会在选定的文件夹下创建一个名为 MyNewFeature 的新文件夹,并在其中生成 index.tsx 和 index.module.scss 文件。

通过命令面板

  1. 打开命令面板 (Ctrl+Shift+P 或 Cmd+Shift+P)。
  2. 输入并选择 "Create React Component"。
  3. 按照提示输入组件名称。

贡献

如果您有任何建议或想贡献代码,欢迎访问 项目的 GitHub 仓库 (请替换为您的实际仓库链接)。


注意: 首次使用时,请确保您的项目环境正确配置了 TypeScript 和相应的 ESLint 规则。

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft