VS Code 为什么是 HTML 开发默认起点
绝大多数人写 HTML，直接装 VS Code 就够用——它不开源但免费，插件生态成熟，开箱即支持 html、css、javascript 的语法高亮、标签自动闭合、 Emmet 快捷展开，连 live-server 插件点一下就能起本地服务预览。
常见错误现象：用记事本或系统自带文本编辑器写 HTML，保存时没选“UTF-8 编码”，中文变乱码；或者没关“自动换行”，<div> 被断成两行导致结构错乱。
- 必须在 VS Code 设置里确认：
files.encoding是utf8，files.autoSave建议设为onFocusChange - 禁用所有非必要插件，尤其避免同时装多个 CSS 补全类插件（比如
Auto Rename Tag和Highlight Matching Tag冲突会导致标签高亮失效） - 如果项目含大量
.vue或.svelte文件，才需要额外装对应语言支持；纯 HTML/CSS/JS 不用额外配置
Sublime Text 还值得考虑吗
Sublime Text 启动快、资源占用低，适合老机器或只写静态页的轻量场景。但它对现代前端工作流支持弱：没有原生调试器，ESLint 或 Prettier 需手动配命令行，且自 2021 年后官方已停止更新核心功能。
使用场景：临时改一个客户给的旧 index.html，不涉及构建、打包、热更新——这时 Sublime 启动比 VS Code 快 2 秒左右，确实省事。
立即学习“前端免费学习笔记（深入）”；
- 必须装
Emmet插件并验证Tab键能否展开ul>li*3，否则效率大打折扣 -
Preferences → Settings里要手动加："default_encoding": "UTF-8"，否则打开含中文的 HTML 文件会提示编码错误 - 别指望它原生支持
import语法高亮或module类型检查——这些得靠外部工具链，Sublime 本身不处理
WebStorm 真有必要吗
WebStorm 是重型 IDE，HTML 只是它的边角能力。它强在 JavaScript 生态整合：能直接跳转到 node_modules 里的 bootstrap.min.js 源码，或在 <script type="module"> 中识别 import 路径是否有效。但代价是内存常驻 800MB+，新建一个空 HTML 文件也要等 3 秒索引。
容易踩的坑：开了 HTML template language injection 后，把 <script>${data.name}</script> 当成模板字符串解析，结果在纯 HTML 里报 Unresolved variable data 错误。
- 仅当项目同时含大量
JavaScript、TypeScript、Webpack配置时才启用 WebStorm - 关闭
Settings → Editor → Inspections → HTML → Unknown HTML tag attribute，否则data-*属性总被标黄 - 不要用它打开整站
dist目录——索引会卡死，改单个文件用 VS Code 更稳
浏览器开发者工具不是编辑器，但必须配合用
再好的编辑器也替代不了浏览器里的 Elements 面板：它能实时修改 DOM、开关伪类（如 :hover）、查看盒模型数值，还能右键“Edit as HTML”直接改结构——这些操作在编辑器里要保存、刷新、再定位，至少多 5 步。
性能影响：在 Console 里执行 document.body.innerHTML = '...' 看效果很爽，但别忘了这会销毁所有绑定的事件监听器，后续 JS 交互可能直接失效。
- 改样式优先用
Styles面板的:hov按钮，而不是手动加<style>:hover{...}</style> - 用
Ctrl+Shift+P（Win）或Cmd+Shift+P（Mac）呼出命令菜单，输Rendering可开启 FPS 计数器，验证动画是否掉帧 - Network 面板里点 HTML 请求，再点
Preview标签，看到的是浏览器实际渲染的 DOM，和编辑器里写的源码可能差好几个层级
真正麻烦的从来不是选哪个编辑器，而是改完代码后忘记清浏览器缓存，或者在 file:// 协议下测试跨域请求——这时候再好的编辑器也救不了。
