CSS Peek需安装扩展、确保本地CSS路径有效、用Cmd+单击跳转或悬停预览；配置settings.json启用并关联样式文件类型；失效时可用VSCode内置Go to Definition替代。
如果您在vscode中编辑html或javascript文件时，希望快速查看某个css类名或id所对应的样式定义，但光标悬停无响应或未触发css peek功能，则可能是相关扩展未启用或配置有误。以下是恢复并正确使用css peek功能的步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装并启用CSS Peek扩展
CSS Peek并非VSCode内置功能，需通过第三方扩展实现，其核心作用是解析当前项目中的CSS、SCSS、Less等样式文件，并在HTML/JS中点击类名时跳转至对应样式声明位置。
1、打开VSCode，点击左侧活动栏的扩展图标（或按快捷键Cmd+Shift+X）。
2、在搜索框中输入CSS Peek，找到作者为Pranay Prakash的扩展。
立即学习“前端免费学习笔记（深入）”；
3、点击“安装”按钮，安装完成后点击“重新加载”或重启VSCode。
二、验证CSS文件路径可被正确解析
CSS Peek依赖于项目中CSS文件的相对路径结构，若样式表通过CDN引入或路径为绝对URL，则无法定位定义；它仅支持本地样式文件的静态分析。
1、确认HTML中link标签的href属性指向的是项目内相对路径，例如：href="styles/main.css"。
2、检查CSS文件是否位于工作区根目录下或其子目录中，且文件名不含非法字符或空格。
3、若使用构建工具（如Vite或Webpack），确保开发服务器未将CSS内联或生成哈希文件名，否则原始文件路径可能失效。
三、启用CSS Peek快捷操作
该扩展默认支持两种触发方式：鼠标悬停预览与快捷键跳转，二者均需确保光标精确落在类名或ID字符串内部（不含引号和点号）。
1、将光标置于HTML元素的class属性值中某一个类名上，例如
2、按住Ctrl键（Windows/Linux）或Cmd键（macOS），同时单击该类名，即可直接跳转到CSS中该类的选择器定义处。
3、若需仅预览而不跳转，可将鼠标悬停在类名上，等待约0.5秒，弹出浮动窗口即显示匹配的CSS规则块。
四、配置settings.json以增强兼容性
部分项目因CSS预处理器或模块化写法导致选择器被重命名或作用域隔离，可通过手动指定CSS语言模式和文件关联提升识别准确率。
1、按下Cmd+Shift+P（macOS）调出命令面板，输入并选择“Preferences: Open Settings (JSON)”。
2、在settings.json中添加如下配置项：
"css.peek.enabled": true,
"css.validate": false,
"files.associations": {"*.css": "css", "*.scss": "scss", "*.less": "less"}
3、保存文件后，重启VSCode窗口使配置生效。
五、替代方案：使用内置Go to Definition功能
当CSS Peek失效且无法修复时，VSCode原生的“转到定义”功能在部分场景下可作为备选，尤其适用于CSS Modules或CSS-in-JS结构。
1、确保CSS文件已通过import语句显式引入到当前JS/TS文件中，例如：import './Button.module.css';。
2、将光标置于import路径字符串中，右键选择“转到定义”，或使用快捷键F12。
3、若项目启用TypeScript且配置了CSS模块类型声明（如*.module.css.d.ts），则类名字符串也可被识别为可跳转符号。
