前端百宝箱

打造一个前端开发的辅助工具，集成多个功能，帮助前端开发人员提高效率，减少重复工作，提升开发质量。

目前功能

• 框选对应前端模板代码生成 CSS 样式结构
• 显示该class对应的css结构
• 点击对应class名，自动跳定位到该class名所对应的css结构位置
• 点击对应属性值，快速定位到该值定义位置或赋值位置

如何使用

快速查看属性值定义赋值位置方法

1. 打开任意前端html代码文件
2. 鼠标移入对应代码里面的属性值
3. 通过Ctrl+鼠标左键点击对应属性值，将自动跳转到该属性值定义位置或赋值位置，如果存在多个位置，则会以弹窗进行选择查看

快速生成css结构运行命令方法

1. 打开任意前端html代码文件
2. 选中需要生成 CSS 样式的代码片段
3. 鼠标右键选中快速生成css结构

查看该class名称所对应的css结构和跳转定位

1. 打开任意前端html代码文件
2. 鼠标移入对应的class名称即可查看该class的样式结构
3. 通过Ctrl+鼠标左键点击对应class名，将自动跳转到该class名所对应的css结构位置

扩展设置

本扩展提供以下配置选项：

• generateCssTree.cssFlavor:
  • 指定要使用的 CSS 预处理器类型
  • 可选值：scss、less、css
  • 默认值为 scss