Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>HM CodeTempNew to Visual Studio Code? Get it now.
HM CodeTemp

HM CodeTemp

alon0824

|
6 installs
| (0) | Free
Create a folder quickly using a template
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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 配置文件,请告诉我,我可以为你打包输出。

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