vs code是html开发最稳妥的选择，轻量且插件生态成熟；必须安装emmet、live server和auto rename tag三插件，并通过live server启动本地服务以避免file://协议限制。
用 VS Code 就够了，别折腾其他编辑器
HTML 开发不需要重型 ide，VS Code 轻量、开箱即用、插件生态成熟，是目前最稳妥的选择。sublime text 或 atom 已基本停滞更新，webstorm 又太重——对纯 HTML/CSS/js 静态开发属于过度配置。
安装时注意两点：
• 一定要勾选 Add to PATH（windows）或安装 code 命令行工具（macos/linux），否则终端里打不开；
• 别装“系统版”（User Installer），选 System Installer（Windows）或拖入 /Applications（macOS），避免权限问题导致扩展无法安装。
装完必须配的三个插件
没装插件的 VS Code 写 HTML 就是裸奔：没有 Emmet 补全、没有实时预览、没有语法校验。这三个插件覆盖 90% 的日常需求：
-
Emmet（内置，但确认是否启用：设置里搜emmet，确保Emmet: Enabled是 true） -
Live Server（点右下角Go Live就起本地服务，自动刷新，比手动双击打开file://协议靠谱得多） -
Auto Rename Tag（改一个标签名，闭合标签自动同步，手抖漏改的痛苦少一半）
别装“HTML Snippets”之类重复插件——Emmet 已经覆盖所有常用结构，多装反而触发冲突。
立即学习“前端免费学习笔记（深入）”；
为什么不能直接双击打开 HTML 文件
浏览器通过 file:// 协议加载文件时，会禁用 fetch、XMLhttpRequest、localStorage（部分浏览器）、甚至 @import CSS 模块。你写的 ajax 请求会报 CORS Error，CSS 里的 url(./img.png) 可能失效，连 console.log 都可能被静默吞掉。
正确做法只有一条：
• 在项目根目录右键 → Open with Live Server（或按 Cmd/Ctrl + Shift + P → 输入 Live Server: Open with Live Server）
• 浏览器地址栏必须是 http://127.0.0.1:5500/index.html 这类本地服务地址，不是 file:///Users/xxx/index.html
新手最容易卡住的路径问题
写 <img src="images/logo.png" alt="HTML开发环境怎样安装代码编辑器_HTML开发环境安装代码编辑器步骤【教程】" > 打不开图？不是图片丢了，八成是路径理解错了。
关键规则只有两条：
• 所有相对路径，都以「当前 HTML 文件所在位置」为起点计算
• ./ 可省略，../ 是上一级，/ 是网站根目录（注意：Live Server 的根目录 = 你右键启动 Live Server 的那个文件夹）
举例：
• 项目结构是 /my-site/index.html 和 /my-site/images/icon.jpg → <img src="images/icon.jpg" alt="HTML开发环境怎样安装代码编辑器_HTML开发环境安装代码编辑器步骤【教程】" > ✅
• 同样结构，但你在 /my-site/pages/about.html 里写 → 得写 <img src="../images/icon.jpg" alt="HTML开发环境怎样安装代码编辑器_HTML开发环境安装代码编辑器步骤【教程】" > ✅
• 写成 <img src="/images/icon.jpg" alt="HTML开发环境怎样安装代码编辑器_HTML开发环境安装代码编辑器步骤【教程】" >？那它会去找 http://127.0.0.1:5500/images/icon.jpg，而实际路径是 http://127.0.0.1:5500/my-site/images/icon.jpg → 404
路径错误不会报红，只是资源消失——这是最让人抓狂的隐形坑。