css peek 在 vscode 1.86+ 中已彻底失效,因其依赖的 vscode-css-languageservice v4.x 被弃用,而新版内置 v5.x+ 服务导致命令未注册;应改用原生 ctrl/cmd+click 跳转,并确保 style 标签声明 lang 属性、class 为静态字符串、css 路径为相对路径且文件已被索引。

CSS Peek 插件在 VSCode 1.86+ 中已彻底失效,无法通过任何配置恢复跳转功能——它依赖的 vscode-css-languageservice v4.x 已被弃用,命令如 cssPeek.showDefinition 根本不会注册,装了也白装。
为什么 Ctrl+Click / F12 没反应,控制台报 Command 'CSS Peek: Show Definition' not found
这不是你配错了,而是插件与当前 VSCode 的语言服务完全断连。VSCode 自 1.84 起默认禁用不兼容插件(显示“已损坏”),1.86+ 内置的是 vscode-css-languageservice v5.x+,而 CSS Peek 最后一次更新是 2021 年,GitHub 仓库已归档。即使强制安装,点击无响应、悬停无预览、快捷键无效,都是必然结果。
- 右下角语言模式为
Plain Text或Vue(没装 Volar)时,插件压根不加载 -
class={dynamicClass}或className={`btn ${isActive ? 'active' : ''}`}这类动态拼接,插件和原生功能都静态分析不了 -
<style></style>标签缺lang="scss",或<link href="/static/main.css">用了绝对路径,语言服务无法索引
VSCode 原生跳转怎么用才真正生效
不用插件,VSCode 自带的 CSS 符号跳转能力足够强,但必须满足三个硬性条件:
- 光标必须落在 HTML 中
class="header"的header字符内部(不能在引号、空格或等号上) -
<link rel="stylesheet" href="./styles/main.css">必须是相对路径,且该文件已被 VSCode 索引(打开过、不在files.exclude列表里、不在node_modules中) -
<style lang="scss"></style>必须显式声明lang属性;SCSS/Less 文件右下角语言模式要手动切为SCSS,不能是Plain Text
满足后,Ctrl+Click(Windows/Linux)或 Cmd+Click(macOS)即可跳转;Alt+Click(Windows/Linux)或 Option+Click(macOS)会弹出 Peek 窗口列出所有匹配项。
跳转失败时优先检查这三件事,不是重装插件
90% 的“跳转不了”问题,跟插件无关,而是语言服务建模失败:
-
<style></style>标签漏写lang:Vue SFC 里写成<style></style>而非<style lang="scss"></style>,SCSS 规则直接不解析 - 工作区根目录开错:CSS 文件在
src/assets/styles/,但 VSCode 打开的是src/子目录,样式文件未被索引 - 构建工具干扰:Vite/Webpack 将 CSS 内联进 HTML 或生成哈希名(如
main.a1b2c3.css),源码里根本不存在对应路径
此时再怎么配 css.peekEnabled 或重装 CSS Peek 都没用。真卡住了,就切到浏览器 DevTools → Elements → Styles 面板 → 点文件名跳转,或者用 Ctrl+Shift+F 全局搜 .your-class-name {。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











