Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>mini SnippetNew to Visual Studio Code? Get it now.
mini Snippet

mini Snippet

XiaoLong

|
1,042 installs
| (1) | Free
mini Snippet
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

mini Snippet 2.0 (EpointFrameHelper)

mini Snippet 是一款 F9/F9X 框架前端开发辅助性工具, mini Snippet 1.0 发布已有一段时间,团队收集了使用过程中的问题,现发布 mini Snippet 2.0, 2.0 进行了功能增强和使用方便性的提升。

一、框架代码智能提示

  • 提供 EUI 组件 html 属性自动完成、属性和属性值信息提示、属性文档链接;

  • 提供 F9 框架模板代码片段;

  • 提供 F9 框架源码代码智能提示功能,包括 miniUI 组件、epoint 框架工具类、Util 工具类、uitl.f9x.js 工具类、SrcBoot 等,通过嵌入编辑器右键菜单,保持提示文件同步更新。

  • 提供 F9 框架 api 点对点文档提示,减少搜索查找时间。

  • 提供 F9 框架常用 api 调用示例。

  • 提供 F9x 框架 Util 工具类代码智能提示。

使用

  1. html 自动完成、属性及属性默认值提示,点击提示链接跳转官方文档。

  2. 打开 html 文件,体验 F9 基本页面、基础布局、EUI 组件模板。

  3. 在 vs code 工作区右键 > EpointFrameHelper > 框架代码提示,点击后自动安装源码类型定义文件 @types/framehelper ,文件安装在项目根目录,项目根目录出现 node_modules/@types/framehelper 即安装成功。

  4. 打开 js 文件,输入框架 api 体验代码提示。

说明

  • 框架代码提示安装的 node_modules/@types/framehelper 为开发状态依赖资源,生产状态删除。

  • 一个项目安装一次即可,@types 文件会定期更新,可重复下载查看是否已同步框架最新源码。

F9 页面模板 snippet:

fuibasePage: 基本页面

fuicontentPage: contentPage布局(F9)

fuileftright: 左右布局

fuilayout: 框架布局器

fuiform: 表单布局

fui-search: 高级搜索布局

fuiaccordion: 手风琴布局

fuimaster: 导航模板

fuititleandtabs 标题和tab

fuidatagrid: 表格组件

fuitreegrid: 树状表格

fuitab: tabs 组件

fuisplitter: 分割器

fuitree: 树

fuifiltertree: 带输入框的树控件

fuitabstreeselect: 多tab树列表选择控件

fuicombobox: 下拉选择

fuitextboxlist: 多选输入框

fuiautocomplete: 下拉列表输入框 autocomplete

fuidatepicker:` 日期选择输入框

fuidaterangepicker: 日期范围选择输入框

fuicheckboxlist: 复选框组

fuiradiobuttonlist: 单选框组

fuicalendar: 日历 Calendar

fuispinner: 数值调节器

fuiwebuploader: WebUploader 文件上传

fuipagertree: 树形分页表格

fuipager: 分页

fuiimageuploader: 图片上传控件

fuitimespinner: 时间调节器

fuirate: 评分评星rate

fuiverifycode: 验证码

fuijigsawverify: 拼图验证码

fuidataexport: 导出控件 DataExport

fuibuttonedit: buttonedit

二、项目初始化和自动构建

F9 框架发布的前端代码是自动构建完的,产品和项目中也存在自动构建的需求,我们 EpointFrameHelper 集成了 gulp 工具,进行自动构建,功能如下:

  1. 对项目中的 js 资源进行压缩混淆。

  2. 对项目的 scss 资源进行编译、压缩。

使用

  1. 在 vs code 工作区右键 > EpointFrameHelper > 项目初始化,点击后自动打开终端执行 npm install。

安装自动构建依赖

  1. 终端执行完所有 node_modules 下载后,再次点击 工作区右键 > EpointFrameHelper > 自动构建,点击后自动监听项目 pages 目录中的 js、css 资源。

js 文件混淆压缩:

说明

  • 结束监听需要在终端手动用命令结束。

三、生成目录资源说明文档

开发完成后,提交项目后端人员整合前,需要提供前端目录资源说明文档。EpointFrameHelper 提供了自动输出前端工程目录结构说明 md 文档。

使用

在 vs code 工作区右键 > EpointFrameHelper > 生成资源目录说明,建议在 webapp/frame/pages/某项目 这一层目录下生成 readme.md。

说明

  • 生成的目录资源说明文档是根据目录结构和 html 文件内的 title 标签生成,实际页面名称和页面 title 有出入须手动修改。

  • 模块文件夹的名称需要手动填写。

问题反馈

使用过程有任何问题和建议请通过 issues 反馈,谢谢!issues

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