vs code 是目前唯一真正跨平台、开箱即用、无需额外运行时（如 node.js）就能实时预览 html 的编辑器，依赖 live server 插件启动本地 http 服务绕过 file:// 协议限制，支持 fetch、import、相对路径等完整 web 功能。
VS Code 是目前唯一真正跨平台、开箱即用、无需额外运行时（如 Node.js）就能实时预览 HTML 的编辑器。其他所谓“跨平台”工具，要么依赖本地服务配置失败率高，要么只支持单平台核心功能，要么根本不能保存或调试。
VS Code 安装时必须勾选的两个选项
Windows 下运行 VSCodeUserSetup-x64.exe，macOS 拖入 Applications 后首次启动需右键“打开”，这两步本身不难，但漏掉以下任一选项就会卡在第一步：
- 勾选
Add to PATH：否则终端输入code .会报command not found - 勾选
Open with Code：否则右键菜单里没有“使用 VS Code 打开”选项
Linux（如 Ubuntu）用户需走 APT 安装流程，别用 Snap 版——它的沙盒机制会让 Live Server 插件监听端口失败，浏览器打不开 http://127.0.0.1:5500。
Live Server 插件启用前的三个关键动作
装完插件不等于能用。常见错误是双击 index.html 用浏览器直接打开，结果 JS 的 fetch 报 CORS error，或者图片路径 404。这是因为文件是通过 file:/// 协议加载的，不是本地服务器上下文。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 新建文件夹（如
~/Desktop/html-demo），再在 VS Code 中用File → Open Folder打开整个文件夹，而不是单独打开文件 - 新建文件后手动保存为
index.html，并确认右下角显示编码为UTF-8（不是UTF-8 with BOM） - 右键编辑器空白处 →
Open with Live Server，不是右键文件资源管理器里的文件
如果没看到这个菜单项，说明插件未启用：按 Ctrl+Shift+P → 输入 Extensions: Show Enabled Extensions，检查 Live Server 是否在列表中且状态为 Enabled。
为什么别碰记事本、Dreamweaver 和浏览器 Elements 编辑
这些工具看似“简单”，实则埋了三类硬伤，新手两周内必踩：
- 记事本默认保存为
ANSI或带BOM的UTF-8，中文变乱码，<meta charset="UTF-8">形同虚设 - Dreamweaver 自动生成嵌套五层的
<div> 和内联样式 <code>style="margin:0;padding:0;"，你根本分不清哪行是自己写的 - Chrome Elements 里双击改 HTML 是临时的，刷新即丢；想保存？得全选 → 复制 → 粘贴到 VS Code → 手动保存 —— 这个绕路过程比直接写慢三倍
真正的跨平台工作流，不是“能在三台机器上都点开”，而是“在任意一台新电脑上，10 分钟内完成安装→建项目→写代码→看效果→调错”。VS Code + Live Server 是目前唯一满足这条的组合。
