必须重启vscode或点击「reload」才能生效；安装后需确保语言模式为html、光标位于class值内部、css路径为相对路径且无动态拼接，否则插件无法触发悬停或跳转。
怎么装 CSS Peek 插件才真正生效
装完不重启 VSCode，插件大概率不会工作。安装后必须点击插件页的「Reload」按钮，或手动关掉 VSCode 再打开——不是点「Install」就完事了。
关键步骤用 Ctrl+Shift+X 打开扩展市场，搜 CSS Peek，认准作者是 Pranay Pratap Singh 的那个（图标像一只眼睛）。别装错名字相近的替代品，比如 CSS Navigation 虽然功能类似，但解析逻辑不同，对嵌套选择器或 SCSS 支持更好，但默认行为不一致。
常见卡点：
-
Ctrl+Shift+X搜索后没结果？检查网络或切换 VSCode 的扩展市场区域（右下角地球图标） - 安装后右下角语言模式显示
Plain Text而不是HTML？点击它手动切回HTML，否则插件压根不启动 - 插件图标没出现在左侧活动栏？说明没加载成功，重装 + 重启双操作
为什么悬停没反应、F12 跳转失败
不是插件坏了，而是 VSCode 的 CSS 语言服务根本没“看见”你的样式文件。CSS Peek 依赖底层语言支持，它只在满足以下条件时才干活：
- HTML 文件中
class="header"的光标必须落在header字符内部，不能停在引号、等号或空格上 - CSS 文件得被 VSCode 显式索引：路径要是相对路径（如
href="css/main.css"），绝对 URL（https://cdn.example.com/style.css）或node_modules里的文件一律无视 -
<style></style>标签如果没加lang属性（如 Vue 里写成<style lang="scss"></style>），SCSS/Sass 规则不会被解析，跳转失效 - 动态拼接的 class（
class="btn {{ isActive ? 'active' : '' }}"或 React 的className={`btn ${isHovered ? 'hover' : ''}`}）VSCode 静态分析不了，直接跳过
快捷键和悬停行为的实际差异
悬停预览和快捷键触发的底层机制不一样，响应场景也不同：
- 悬停（鼠标静止约 500ms）：只显示匹配的 CSS 规则块内容，不跳转；适合快速验证样式是否存在、有没有被覆盖
-
Ctrl+Click（Windows/Linux）或Cmd+Click（macOS）：强制跳转到第一个匹配的定义位置；但如果多个文件有同名 class，它只去第一个，不列表供选 -
F12：等价于右键 →Go to Definition，行为同Ctrl+Click -
Alt+Click（Windows/Linux）或Option+Click（macOS）：弹出 Peek 窗口，列出所有匹配项，可点击任一跳转——这才是最接近“精准定位”的操作
注意：Ctrl+Click 和 F12 在部分项目里会和 ESLint 或其他插件冲突，禁用 css.validate 设置（在 settings.json 里设 "css.validate": false）能显著提升稳定性。
当 CSS Peek 失效时，比重装更有效的三件事
与其反复卸载重装，不如先确认这三处是否被忽略：
- 检查工作区根目录是否正确：CSS 文件必须在当前打开的文件夹内，且没被
files.exclude或search.exclude配置屏蔽 - 用
Ctrl+Shift+F全局搜.header {或#app，比插件更快定位——尤其适合构建后环境或哈希类名 - 浏览器开发者工具的
Elements → Styles面板永远是最权威的实时来源，动态 class、内联 style、计算后样式全都能看到，CSS Peek 只管源码静态关联
真正难搞的从来不是插件装不装得上，而是 class 名到底有没有被语言服务建模成功——那取决于路径、语法、构建流程三者是否对齐。一个 lang="scss" 的遗漏，可能让整个组件的样式跳转全部失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
