VSCode无“侧边栏预览模式”内置功能;Markdown右侧预览用Ctrl+Shift+V执行“Open Preview to the Side”命令,仅限.md文件;Image Preview插件需手动运行“Toggle Sidebar Preview”命令且光标置于图片路径内。

VSCode 没有叫“侧边栏预览模式”的内置功能——这是常见误解。你真正想设的,是 在编辑器右侧打开 Markdown 预览窗口,或 启用 Image Preview 插件的侧边栏图片预览。两者完全独立,配置方式、依赖条件和触发逻辑都不同。
Markdown 预览:用 Markdown: Open Preview to the Side 命令
这是 VSCode 原生支持的、最常用也最稳定的右侧预览方式,只对 .md 文件生效:
- 光标必须在 Markdown 文件中(不能是
.txt或.js) - 快捷键:
Ctrl+Shift+V(Windows/Linux)或Cmd+Shift+V(macOS) - 命令面板输入:
Markdown: Open Preview to the Side,不是 “Toggle” 或 “Open Preview” - 预览窗口会随编辑器滚动同步,且自动刷新;若想锁定预览内容(不随切换文件变化),改用
Markdown: Open Locked Preview to the Side - 不依赖插件,但若装了 Markdown All in One 等扩展,可能覆盖快捷键——检查键盘快捷方式里是否有冲突绑定
Image Preview 插件:侧边栏预览图片需手动触发
这个插件默认不自动打开侧边栏, 光标停在路径上只会触发悬浮预览(hover),侧边栏预览必须显式调用命令:
- 确保插件已启用:在扩展面板搜
Image Preview,状态为 Enabled - 光标落在图片路径字符串内部(例如
logo.png的l或g上,不能停在括号或引号里) - 按
Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(macOS),输入并运行:Image Preview: Toggle Sidebar Preview - 首次使用前建议检查设置:
image-preview.enableHoverPreview应为true;image-preview.maxSize若图片超限(如 5MB PNG),需手动调高(单位 KB) - 注意兼容性:
workbench.sideBar.location必须为"right"或"left",旧版 VSCode(
别混淆:Side Panel 不是侧边栏预览
VSCode 1.86+ 引入的 Side Panel 是独立区域,和传统侧边栏物理分离。它不能直接用于 Markdown 或图片预览:
-
workbench.sidePanel.defaultLocation控制的是新面板(如 Terminal、Search)的默认停靠位置,不是预览容器 - 没有
View: Show Markdown Preview in Side Panel这类命令,Markdown 预览只能进编辑器组,不能塞进 Side Panel - 强行拖拽预览标签页到 Side Panel 区域会失败或立即弹回——VSCode 明确限制该视图不可嵌入
- 如果你看到“侧边栏预览”相关教程提到拖拽操作,基本是把
Side Panel和Preview to the Side混为一谈了
最容易被忽略的点:项目级 .vscode/settings.json 会静默覆盖用户设置。哪怕你在全局设置了 workbench.sideBar.location: "right",只要当前文件夹里有同名配置且值为 "left",Image Preview 的侧边栏就打不开——连错误提示都没有,得手动去查那个隐藏的 .vscode 文件夹。


















