Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>前端百宝箱New to Visual Studio Code? Get it now.
前端百宝箱

前端百宝箱

NanhaiAndy

|
6 installs
| (1) | Free
前端开发辅助工具,帮助前端开发人员提高效率,减少重复工作,提升开发质量。
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

前端百宝箱

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

目前功能

  • 框选对应前端模板代码生成 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
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft