Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>quick-crudNew to Visual Studio Code? Get it now.
quick-crud

quick-crud

mengqiuleo

|
7 installs
| (0) | Free
利用 TS 类型声明,快速生成可运行的 CRUD 代码片段
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

quick-crud

基于选中的 TypeScript 类型定义,一键生成完整的可运行、可调试的前端页面代码(CRUD 表单、表格、查询页等)

功能

  • 内置三种常用页面模板(表单、表格、表格+搜索)
  • 支持用户自定义模板
  • 可生成表格的 Mock 数据
  • 一键生成可运行、可调试页面
  • 支持右键菜单 / 快捷键 触发

使用

直接使用内置模板

PS: 内置模板目前只支持 react + antd

  • 在生成 table 和 table-with-search 模板时,会让用户选择需要展示的 columns
  • 在生成 table-with-search 模板时,会让用户选择需要展示的「搜索参数」 screen.gif

生成的文件包括:

  • columns.ts
  • mockData.ts
  • 模板文件(.tsx or .vue)

自定义模板

需要在项目的 .vscode 文件夹下,声明一个 crud-templates 文件夹进行配置。

文件夹中需要配置一个 config.json 文件,自定义的 ejs 模板与 config.json 文件同级。 screen.gif

config.json 的格式如下:

[
  {
    "type": "table-with-search", 
    "name": "ERP-搜索表格模板",
    "path": "table-with-search.ejs",
    "ext": ".tsx"
  }
]
  • type: 模板类型,目前支持三种模板类型(form, table, table-with-search)
  • name: 模板名称
  • path: 模板所在路径,模板和 config.json 同级
  • ext: 模板后缀类型(ext: '.tsx' | '.vue')

关于自定义模板的说明

  1. 该插件会自动生成 columns.ts 和 mockData.ts 文件,所以需要在模板中顶部引入
// table
import { columns } from './columns';
import { mockData } from './mockData';

<Table rowKey="id" columns={columns} dataSource={dataSource} />
  1. 关于 form 模板的字段和 table-with-search 模板的搜索字段 (这里的设计并不好,这个插件几乎只有自己用,所以改进还排不上)

在自定义 ejs 模板时,可能需要关注的就是如何动态选择代码中的 form 表单展示哪些字段, table-with-search 展示哪些搜索字段。

这里给两个模板示例,自定义时直接复制 ejs 部分即可,该插件内部会处理。

// form
import { Form, Input, InputNumber, Switch, Select, Button } from 'antd';

export const CRUDPage = () => {
const [form] = Form.useForm();

return (
<Form form={form} layout="vertical">
  <% fields.forEach(field=> { %>
    <Form.Item label="<%= field.name %>" name="<%= field.name %>">
      <%- field.component %>
    </Form.Item>
    <% }); %>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
</Form>
);
};
// table-with-search
import { Table, Form, Input, InputNumber, Switch, Select, Button } from 'antd';
import { useState } from 'react';
import { columns } from './columns';
import { mockData } from './mockData';

export const CRUDPage = () => {
const [form] = Form.useForm();
const [dataSource, setDataSource] = useState(mockData);


const onSearch = () => {
const values = form.getFieldsValue();
console.log('搜索参数:', values);
};

return (
<>
  <Form form={form} layout="inline" onFinish={onSearch} style={{ marginBottom: 16 }}>
    <% searchFields.forEach(field=> { %>
      <Form.Item label="<%= field.name %>" name="<%= field.name %>">
        <%- field.component %>
      </Form.Item>
      <% }); %>
        <Form.Item>
          <Button type="primary" htmlType="submit">搜索</Button>
          <Button size="small" htmlType="submit">重置</Button>
        </Form.Item>
  </Form>

  <Table rowKey="id" columns={columns} dataSource={dataSource} />
</>
);
};

fields 和 searchFields 说明 这两个字段类型均为:

export interface Field {
  name: string; // 根据 ts 类型的 key 生成
  type: string; // 根据 ts 类型的 value 生成
  component?: string; // 根据 ts 类型的 value,自动匹配对应的组件
}
  • string: <Input/>
  • number: <InputNumber/>
  • enum: <Select />
  • boolean: <Switch />

TODO

  • [ ] 支持代码模板保存在 Github 等远程仓库
  • [ ] 支持团队和使用
  • [ ] 改进用户模板声明方式,目前使用 ejs 模板用户定义有些成本

Enjoy!

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