qk-snippets
qk-snippets 是一个用于快速匹配、生成和插入常用代码段的工具,旨在提高开发效率,帮助快速实现常见功能。
安装
- 打开扩展视图 (
Ctrl+Shift+X)。
- 搜索
qk-snippets。
- 点击
Install 安装扩展。
使用
插入代码片段
操作流程:
- 输入命令前缀
qk.。
- 继续输入关键词,匹配组件或方法,例如:
qk.SuperTable。
- 按
Enter 选择并插入匹配的代码片段。
插入模版文件夹/文件
操作流程:
- 使用快捷键
Ctrl + Shift + P 打开命令面板。
- 输入
Insert Template。
- 选择所需插入的模版类型:
Page 或 Redux,然后按 Enter 确认。
指令的后缀标识详解
crud: 快速定义 axios 接口操作,支持 Post、Get、Delete 等,包括 download 特殊属性。
示例:
# 明确指令
qk.Post.curd
qk.Get.curd
qk.Delete.curd
qk.Download.curd
# 模糊匹配指令
qk.curd.
helper: 常用工具集,提供如 TrueOrNot、YesOrNot 等常见工具方法。
示例:
# 明确指令
qk.TrueOrNot.helper
qk.YesOrNot.helper
qk.ZeroOrOne.helper
# 模糊匹配指令
qk.helper.
comp: 组件引用,生成组件实例,支持 Tabs、Card、SuperTable 等。组件均来自@components
示例:
# 明确指令
qk.Card.comp
qk.MegaRadios.comp
qk.Tabs.comp
qk.SuperTable.comp
qk.PagingSuperTable.comp
qk.ExpandableTreeTable.comp
qk.InlineTable.comp
qk.ImportAndExport.comp
# 模糊匹配指令
qk.comp.
hooks: 快速引用常用 Hooks 方法,如 UseSuperModal、useTableFilter 等。
示例:
# 明确指令
qk.UseSuperModal.hooks
qk.useTableFilter.hooks
# 模糊匹配指令
qk.hooks.
code: 常用代码段引用,包含分割线 SplitLine、按钮 ImportButton、表单 FieldsForm 等,除组件引用外,还包含业务逻辑代码。
示例:
# 明确指令
qk.SplitLine.code
qk.StickyBox.code
qk.ImportButton.code
qk.ExportButton.code
qk.ImportExportButton.code
qk.FieldsForm.code
qk.FieldsFormModal.code
# 模糊匹配指令
qk.code.
cell: 针对 SuperTable 组件的快速定义,支持列头、单元格、操作栏等常见展示方式。
示例:
# 常规文本展示
qk.Normal.cell
# 上下分组,名称和编码(双文本)展示
qk.Group.cell
# 日期展示
qk.DateTime.cell
# 数字展示
qk.Number.cell
# 金额数值展示
qk.Money.cell
# 是否类展示
qk.YN.cell
# 流程、步骤条展示
qk.ProcessSteps.cell
# 文档、资料、附件展示
qk.Doc.cell
# 超长文本展示
qk.TextEllipsis.cell
# 多指状态类展示
qk.Status.cell
# 列标题富写,额外添加 tooltip 展示
qk.ColumnTitle.cell
# 操作列
qk.Action.cell
# 操作列内容项(按钮集合)
qk.ActionInner.cell
部署
(此部分可根据需要添加部署相关的操作步骤)
注意:
- 所有指令的模糊匹配功能可以帮助你快速找到相关的代码片段。只需输入前缀即可列出所有匹配项,进一步节省时间。
- 每个指令都可以通过键入完整名称或模糊匹配进行插入,提升开发效率。
| |