前端百宝箱
用于前端开发的辅助工具,集成多个功能,帮助前端开发人员提高效率,减少重复工作,提升开发质量。
1.目前功能
- 框选对应前端模板代码生成 CSS 样式结构
- 显示该class对应的css结构
- 点击对应class名,自动跳定位到该class名所对应的css结构位置
- 点击对应属性值,快速定位到该值定义位置或赋值位置
- 根据接口文档结构生成mock数据(目前只支持一级生成)
- 根据接口名称api生成dubbo接口定义
- 结合ai-deepseek实现class定义(内测)

2.如何使用
1.快速查看属性值定义赋值位置方法
- 打开任意前端html代码文件
- 鼠标移入对应代码里面的属性值
- 通过Ctrl+鼠标左键点击对应属性值,将自动跳转到该属性值定义位置或赋值位置,如果存在多个位置,则会以弹窗进行选择查看
2.快速生成css结构运行命令方法

- 打开任意前端html代码文件
- 选中需要生成 CSS 样式的代码片段
- 鼠标右键选中快速生成css结构
3.查看该class名称所对应的css结构和跳转定位

- 打开任意前端html代码文件
- 鼠标移入对应的class名称即可查看该class的样式结构
- 通过Ctrl+鼠标左键点击对应class名,将自动跳转到该class名所对应的css结构位置
4.根据接口文档结构生成mock数据(目前只支持一级生成)

- 在接口文档中复制接口文档结构
- 鼠标移入对应的需要生成mock的位置鼠标右键点击打开菜单
- 点击根据接口文档格式生成Mock数据
- 填入复制的结构-回车确认
- 填入需要生成多少条数据-回车确认
3.扩展设置
本扩展提供以下配置选项:
| |