VSCode中HTML实时预览必须用Live Server插件，因其启动本地HTTP服务支持保存自动刷新、LiveReload及跨域资源访问；Markdown/Mermaid则需vscode-mermaid-preview等专用插件，配合语言模式识别与正确配置方可实现分屏实时渲染。
VSCode 里要实现文件实时预览，核心就两条路：HTML 类用 Live Server，Markdown / Mermaid 类用对应专用插件——选错插件或配置不到位，预览根本不会自动刷新。
HTML 文件必须用 Live Server，别信 Open in Browser
Open in Browser 只是打开本地文件协议（file://），不启动服务器，所以：
• 修改保存后浏览器完全不会刷新
• fetch、XMLHttpRequest、相对路径资源全报跨域或 404
• 多数现代前端框架（Vite、React Dev Server）的 HMR 机制也压根不生效
Live Server 启动的是真正的本地 HTTP 服务（默认端口 5500），支持：
• 保存即刷新（热重载）
• 自动注入 LiveReload 脚本
• 支持局域网访问（配 liveServer.settings.host 即可）
• 可通过右键菜单或底部状态栏 Go Live 按钮触发
注意：单独拖一个 .html 文件进 VSCode 不生效，必须放在文件夹（工作区）里，否则插件找不到项目根目录。
Markdown 和 Mermaid 图表得用专用预览插件
VSCode 自带的 Markdown Preview（快捷键 Ctrl+Shift+V）只支持基础渲染，不支持：
• Mermaid 图表（graph TD 等语法直接显示为纯文本）
• LaTeX 数学公式（$$...$$ 不解析）
• 同步滚动（编辑区滚动，预览区不同步）
推荐两个插件组合：
• Markdown All in One：补全语法高亮、TOC 生成、快捷键等基础增强
• vscode-mermaid-preview：专解 Mermaid 渲染，支持 .mmd 独立文件和 Markdown 内嵌代码块，右侧分屏实时预览，错误提示直接标在代码行上
装完 vscode-mermaid-preview 后，记得加配置项："files.associations": { "*.mmd": "mermaid" }，否则 .mmd 文件不会识别为 Mermaid 语言。
别忽略插件之间的冲突和加载顺序
多个预览类插件共存时容易打架：
• Markdown Preview Enhanced 和 vscode-mermaid-preview 都试图接管 ```mermaid 块，可能只生效一个
• Prettier 格式化时若没关掉 prettier.proseWrap，会把 Mermaid 代码块自动折行，导致语法错误
• Live Server 启动后如果再开另一个本地服务（比如 Python 的 http.server），端口 5500 会被占，报错 Error: listen EADDRINUSE: address already in use :::5500
建议做法：
• 同一类型预览插件只留一个主力（如 Mermaid 就只用 vscode-mermaid-preview）
• 在用户设置里搜 mermaid 或 live server，关掉无关插件的自动启用选项
• 端口冲突时改配置："liveServer.settings.port": 5501
真正卡住人的往往不是“怎么装”，而是“为什么预览不动”——多数时候是文件没在工作区、扩展没识别语言模式、或者两个插件在后台悄悄互踢。先看右下角语言模式是否显示 Mermaid 或 HTML，再查状态栏有没有 Go Live，最后打开命令面板（Ctrl+Shift+P）搜 Developer: Toggle Developer Tools 看控制台有没有报错。
