FormCN：秒速生成 React 表单

关注「索引目录」公众号，获取更多干货。

表单是Web应用程序中最常见的组件之一。无论是登录表单、注册表单还是多步骤向导，我们经常会发现自己一遍又一遍地编写相同的样板代码。

我想改变这种状况，所以我构建了FormCN，我的第一个 CLI 工具，旨在几秒钟内生成完全类型化、经过验证的 React 表单，它集成了ShadCN UI、React Hook Form和Zod。

为什么要构建 FormCN？

在大多数项目中，填写表格是一项重复性工作：

• 我们要么从头开始重写它们。
• 或者复制并修改旧代码
• 或者依赖人工智能生成器，但它们并不总是准确的。

FormCN通过自动化表单创建来解决这个问题，为您提供一个即用型结构，同时让您完全控制设计和验证。

主要特点

• 单步或多步表单
  — 为简单或复杂的工作流程生成表单。
• 现成的模板
  ——登录表单、注册表单或自定义表单。
• 样式预设
  — 使用 ShadCN 组件的预定义 UI 样式。
• 手动模式
  ——如果您想要完全控制，可以进行逐步配置。
• 自动生成文件夹和文件
  — 创建包含所有架构和文件的组件文件夹，即可使用。
• 智能 CLI 检查
  — 防止重复表单，检查空字段，确保安装了 Zod、React Hook Form 和解析器等必需依赖项。

工作原理

通过 npm 安装 FormCN 后：

npm install -g formcn

运行命令行界面：

formcn

系统会提示您：

1. 输入表单名称
   — 例如，register→ 创建RegisterForm。
2. 选择表单类型
   ——单步表单或多步表单。
3. 选择模板
   ——现成模板或手动配置。
4. 选择样式预设
   ——默认、极简或自定义。

之后，FormCN 会生成一个包含以下内容的完整文件夹：

src/components/forms/{FormName}/
├── schema.ts
└── form.tsx

或者，对于多步骤表单：

src/components/forms/{FormName}/
├── step1-schema.ts
├── step1Step.tsx
└── {FormName}Form.tsx

所有功能都已准备就绪，只需几秒钟即可使用或调整。

为什么开发者会喜欢它

FormCN 是为希望专注于功能而非样板代码的 React 开发人员而构建的：

• TypeScript 优先，
  并采用 Zod 验证
• 带有 ShadCN 组件的美观 UI
• 专业的命令行界面 (CLI)
  ，可防止错误并指导开发人员。
• 节省大量重复性工作时间

立即体验

• NPM：https://www.npmjs.com/package/formcn
• GitHub：https://github.com/F-47/formcn

关注「索引目录」公众号，获取更多干货。