Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>VSCode Page GeneratorNew to Visual Studio Code? Get it now.
VSCode Page Generator

VSCode Page Generator

chenjinhong

|
4 installs
| (0) | Free
快速生成页面结构的 VSCode 插件
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

VSCode Page Generator

一个用于快速生成页面结构的 VSCode 插件,支持模板选择、模型文件生成、Service 和 Mock 创建等功能,助力前端中后台项目提效。

✨ 功能特性

  • 支持多模板(如 templates、zustand-template)
  • 一键生成页面目录、model、service、mock、表单组件等
  • 支持是否启用表格多选行(Row Selection)
  • 支持创建 AddOrEdit.jsx 页面
  • 操作流程清晰,交互友好

📦 使用方法

方式一:在资源管理器中使用

  1. 打开 VSCode 左侧资源管理器
  2. 右键某个文件夹,点击 “生成页面”
  3. 按提示依次输入参数:
    • 模板目录(如 templates、zustand-template)
    • 页面路径(默认:./src/pages)
    • 页面文件夹名称(如:UserList)
    • namespace 名称(如:userList)
    • 是否创建 service.js(是/否)
    • service 路径(默认:./src/services)
    • 是否创建 mock 文件(是/否)
    • 是否创建 AddOrEdit 页面(是/否)
    • 表格是否需要多选(是/否)

方式二:命令面板运行

按下 Ctrl+Shift+P(Mac 为 Cmd+Shift+P),输入并运行:生成页面


src/pages/UserList/

├── index.jsx

├── Columns.js

├── SearchForm.jsx

├── TableList.jsx

├── AddOrEdit.jsx

└── models/

└── userList.js

src/services/

└── userList.js

mock/userList/

└── index.js

文件结构说明(纯文字版)

src/pages/UserList/ 页面主目录

index.jsx 页面入口文件

Columns.js 表格列配置

SearchForm.jsx 搜索表单组件

TableList.jsx 表格组件(支持替换为多选版本)

AddOrEdit.jsx(可选)新增/编辑弹窗组件

models/userList.js 模型文件(用于 dva 或 zustand 等状态管理)

src/services/userList.js(可选)接口请求服务

mock/userList/index.js(可选)本地 mock 数据

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