CSS Peek插件可实现HTML中class/id跳转至CSS定义,方法包括:一、绑定Cmd+Shift+P快捷键;二、右键调用Peek CSS Definition;三、为.scss/.less配置"css.peekEnabled": true;四、禁用冲突插件如Auto Rename Tag。

如果您在VSCode中编辑HTML或CSS文件时,希望直接跳转到某个CSS类或ID的定义位置,但当前光标悬停或右键菜单未触发跳转,则可能是CSS Peek插件未正确启用或配置。以下是实现快速定位CSS定义的多种方法:
本文运行环境:MacBook Air,macOS Sequoia。
一、启用CSS Peek插件的快捷键绑定
CSS Peek默认支持快捷键调用,无需鼠标操作即可触发定义预览,适用于高频查看场景。
1、打开VSCode设置界面,点击左下角齿轮图标,选择“键盘快捷方式”。
立即学习“前端免费学习笔记(深入)”;
2、在搜索框中输入 css peek,找到命令 extension.cssPeek。
3、双击该命令右侧空白处,按下 Cmd+Shift+P(macOS)或 Ctrl+Shift+P(Windows/Linux)进行绑定。
4、将光标置于HTML中任意class或id属性值内,按下绑定的快捷键,弹出CSS定义浮层。
二、通过右键上下文菜单调用CSS Peek
该方式不依赖快捷键记忆,适合新用户或临时使用,直接通过图形界面触发定位功能。
1、在HTML文件中选中一个class名称,例如 header-title。
2、右键点击选中文本,在弹出菜单中查找并点击 Peek CSS Definition 选项。
3、若菜单中未显示该选项,确认已安装CSS Peek插件并重启VSCode。
三、配置CSS文件关联以支持非标准扩展名
当项目中CSS代码位于.scss、.less或内联
1、打开VSCode命令面板(Cmd+Shift+P),输入并选择 Preferences: Configure Language Specific Settings。
2、在弹出列表中选择 SCSS 或 Less。
3、在打开的settings.json片段中添加:"css.peekEnabled": true。
4、保存文件后,重新在对应语言文件中尝试悬停class名称。
四、禁用冲突插件以恢复CSS Peek响应
部分CSS相关插件(如Auto Rename Tag、IntelliSense for CSS)可能劫持光标事件,导致CSS Peek无法捕获悬停动作。
1、点击VSCode左侧活动栏的扩展图标,打开已安装插件列表。
2、依次禁用名称中含 css、intellisense、rename 的插件。
3、每次禁用后重启VSCode,测试CSS Peek是否恢复正常响应。
4、确认恢复后,逐个重新启用插件,定位引发冲突的具体插件名称。










