Fusion Snippets 模板文档
快速生成 React + Ant Design Pro 组件模板集合
简介
本扩展插件提供了一些常用的 React + Ant Design ProTable的代码片段(Snippets),适用于快速构建带搜索/无搜索功能的表格页面。所有 snippet 均可在 VS Code 中通过指定的 prefix 快速插入。
安装要求
- 请确保 antd 的版本 >= 4.11.1
- 请确保 ProComponents 的版本 >= 2.6.36 否则有useDeepCompareMemo导致renderFormItem不更新的问题
npm i @ant-design/pro-components --save
使用方式
- 安装[HM CodeTemp]
- 右键创建页面
需要创建页面的目录下右键选择从模板创建页面
选择自己需要的模板页面,填写页面名称,回车确认会自动创建页面文件
- VS Code Snippet 插入
输入 proTable ➡️ 插入 with-search 或 no-search 模板(取决于当前配置)
模板列表
- pro-table-template(带搜索)
- pro-table-template-no-search(无搜索)
- pro-table-template-add-edit(新增编辑)
文件夹模板结构说明
✅ pro-table-template
(带搜索条件的 ProTable 页面)
📁 your-component-name/
├── index.tsx # 页面组件
├── use-your-component-name.ts # 数据请求 Hook
└── my-select/
├── index.tsx # 自定义下拉组件
└── use-select.ts # 选择器 Hook
✅ pro-table-template-no-search
(无搜索条件的 ProTable 页面)
📁 your-component-name/
├── index.tsx # 页面组件
└── use-your-component-name.ts # 数据请求 Hook
✅ pro-table-template-add-edit
(支持新增与编辑操作的 ProTable 页面)
📁 your-component-name/
├── index.tsx # 页面组件
├── use-your-component-name.ts # 数据请求 Hook
├── my-select/
│ ├── index.tsx # 自定义下拉组件
│ └── use-select.ts # 选择器 Hook
└── create-with-update/
├── index.tsx # DrawerForm 表单组件
└── use-create-with-update.ts # 表单逻辑 Hook
Snippets
📦 当前支持的 Snippet 列表
| 名称| 触发前缀(Prefix) | 描述 |
|pro-table: with-search| proTable | 生成一个包含完整搜索条件的 ProTable 页面模板,支持筛选、排序、时间范围等交互操作 |
|pro-table: no-search| proTableNoSearch | 生成一个不包含搜索区域的 ProTable 页面模板,仅展示基础数据列表 |
|use-hooks: basic| useHooks | 生成基础 Hooks 模板,包含初始化逻辑 |
|use-hooks: basic| useHooks | 生成基础 Hooks 模板,包含初始化逻辑 |
📄 Snippet 详情说明
1. pro-table: with-search
- 用途:用于创建带有搜索条件的 ProTable 页面
- 适用场景:适用于需要复杂筛选、分页、动态查询等功能的数据管理页面
- 特性:
- 支持多字段搜索(状态、标签、日期区间)
- 支持多选标签与自定义格式下拉
- 表头固定、滚动支持
- 自定义日期格式化、刷新与下载按钮
- 示例组件结构:
``tsx
import React, { useState, useEffect } from 'react';
import { ProTable } from '@ant-design/pro-components';
export const ${1:TemplateName} = () => {
// columns 定义及 return
};
export default ${1:TemplateName};
### 2. pro-table: no-search
* 用途:用于创建仅展示数据的 ProTable 页面
* 适用场景:适用于无需复杂筛选逻辑的只读数据展示页面
* 特性:
- 简洁的列展示
- 支持基本的分页与导出功能
- 无搜索栏与过滤逻辑
``tsx
import React from 'react';
import { ProTable } from '@ant-design/pro-components';
export const ${1:TemplateName} = () => {
// columns 定义及 return <ProTable />
};
export default ${1:TemplateName};
Settings
名称 |
说明 |
类型 |
默认值 |
create.defaultFolderTemplate |
默认文件夹模板 |
string |
'' |
create.defaultFileTemplate |
默认文件模板 |
string |
'' |
create.rememberLastSelection |
记住上次选择的模板 |
boolean |
false |
开始使用
在资源管理器中使用右键菜单创建 :

在文件中使用代码片段 :

🙌 贡献与反馈
欢迎提交 PR 或 issue 来扩展模板内容或优化现有 snippet!
如需我为你生成完整的 Markdown 文档文件或 .vscode/snippets 配置文件,请告诉我,我可以为你打包输出。