VSCode Markdown预览需配置files.autoSave与markdown.preview.autoRefresh并打开预览窗格才能实时刷新;HTML文件须用Live Server插件,file://协议下无法自动刷新。

VSCode 的 Markdown 预览默认不实时刷新,必须组合配置 files.autoSave + markdown.preview.autoRefresh 才能接近 Typora 式体验;HTML 类文件则必须用 Live Server 插件起 HTTP 服务,file:// 协议下任何“自动刷新”都无效。
Markdown 保存后自动刷新预览要配齐三样
原生预览只读磁盘文件,未保存的编辑内容不会触发更新。所谓“自动刷新”,本质是「自动保存 → 触发预览重载」:
-
files.autoSave设为onFocusChange或afterDelay(不能是off) -
markdown.preview.autoRefresh必须为true(默认开启,但远程环境或策略可能重置) - 预览窗格得先打开——靠
markdown.preview.autoShowPreviewPane自动唤出,或手动按Ctrl+Shift+V(Windows/Linux)/Cmd+Shift+V(macOS)
漏掉任意一项,改完文字点保存,预览还是不动。右上角那个↻按钮只重载 HTML 渲染,不拉新内容,别指望它救场。
Ctrl+Shift+V 没反应?先查这三处
快捷键失效几乎从不因为插件没装,而是前提条件不满足:
-
markdown.preview.enabled被关了(某些安全策略或 Dev Container 会默认关闭) - 当前文件后缀不是
.md(.markdown、.txt或无后缀都不行) - 键盘映射插件(比如 Vim 模式)劫持了该组合键;临时禁用再试,或改用命令面板:
Ctrl+Shift+P→ 输入Markdown: Open Preview to the Side
Live Server 是 HTML/CSS/JS 实时刷新唯一靠谱方案
VSCode 原生不支持前端文件的自动刷新,Live Server(作者 Ritwick Dey)是目前唯一开箱即用、无需构建工具的解法:
- 安装后必须打开**文件夹工作区**(不能只拖单个
.html文件),否则右下角不显示Go Live - 它只监听
.html、.htm等模板类文件保存事件;改style.css不刷新——这不是 bug,是设计 - 若需 CSS/JS 修改也触发刷新,要么装
Refresh Page on Save这类轻量监听插件,要么换Vite(支持 HMR) - 路径 404 常因服务根目录理解错:默认以 HTML 文件所在目录为根,不是工作区根;可用
liveServer.settings.root显式指定
数学公式、Mermaid 图表、中文锚点不生效?不是预览坏了
这些功能默认被禁用,需单独开启开关:
- LaTeX 公式:启用
markdown.math.enabled(VS Code 1.84+),块级公式前后必须空行;行内公式需额外开markdown.extension.math.inlineEnabled(如果用了Markdown All in One) - Mermaid 图表:原生预览完全不支持;装
Mermaid Preview,或用Markdown Preview Enhanced并勾选Enable Mermaid - 中文标题可点击、裸 URL 变链接:启用
markdown.preview.enableExtendedAutolinks和markdown.preview.enableScripts(后者仅限本地可信文档)
样式错乱或白屏,大概率是 markdown.preview.styles 填的路径错了——它认的是相对工作区根目录的路径,比如 ["./styles/md-preview.css"],写错不会报错,只留空白。


















