shift+f12弹出的是peek references悬浮窗,非hover;其样式不可直接配置,改用"references.preferredlocation": "view"可切换至稳定可操作的references面板。

Shift+F12 弹出的引用悬浮窗是 Peek,不是 Hover
很多人搜“符号引用悬浮窗样式”,其实是想改 Shift+F12 查到的引用列表外观。但要注意:这个窗口叫 Peek References,它和鼠标悬停(hover)是两套 UI 机制,CSS 选择器、配置项、生效逻辑都不同。试图用 .hover-flyout 或 .suggest-widget 去调它,完全无效。
改引用视图位置比调样式更关键
默认 references.preferredLocation 是 peek,也就是弹一个临时浮层。这个浮层不能调字体、不能拖大小、一失焦就关——根本没“样式可调”的余地。真正能稳定控制显示内容和布局的,是切换成 view 模式:
- 在
settings.json中加一行:"references.preferredLocation": "view" - 改完立刻生效,不用重启
- 再按
Shift+F12,引用会固定出现在左侧References View面板,带文件数统计、可滚动、可点击跳转
这个面板本身是工作台 UI 的一部分,它的字体大小跟随 window.zoomLevel,不响应 editor.fontSize;也没有独立的字号配置项。
真要动 Peek 引用窗的样式?只能靠 CSS 注入
如果你坚持要用 peek 模式,且必须调它的外观(比如放大字体、加滚动条),唯一办法是手动注入 CSS。需关闭 VSCode 后,在用户 styles.css 文件中添加:
.peekview-widget .monaco-editor,
.peekview-widget .reference-list {
font-size: 14px !important;
line-height: 1.6 !important;
}
.peekview-widget .reference-list .monaco-list-row {
height: 28px !important;
}
注意:
- 路径因系统而异:
%APPDATA%\Code\User\styles.css(Windows)、$HOME/Library/Application Support/Code/User/styles.css(macOS) - VSCode 官方不支持该方式,升级后可能失效
- 改完必须重启 VSCode 才生效
- 无法调整浮层宽度,只能影响行高和字体
为什么多数人不该折腾 Peek 样式
因为 Peek References 的设计定位就是“快速瞄一眼”,不是“审查引用全貌”。组件被引用十几处时,浮层里翻三页才能看完,鼠标一偏就关闭,还容易和补全框、参数提示打架。真正需要梳理依赖关系时,view 模式才是唯一可靠路径——它把引用当正经信息展示,而不是当作临时副产品。
样式细节永远排在信息可读性之后;先让引用“看得全”,再考虑“看得清”。











