HTML开发环境配置需围绕编辑→预览→校验→交付四环节构建可复现工作流，核心标准是保存index.html后秒级浏览器可见变更且语法错误即时提示。
HTML开发环境配置不是“装几个插件就完事”，而是围绕「编辑→预览→校验→交付」四个环节建立稳定、可复现的工作流。核心判断标准只有一条：保存一个 index.html 后，能否在浏览器中秒级看到变更，且语法错误能即时提示。
VS Code 里 HTML 智能补全不生效？检查 emmet.includeLanguages 配置
默认情况下 VS Code 的 Emmet 只对 .html 文件生效，但遇到 .vue、.svelte 或自定义模板后缀（如 .njk）时，缩写（如 div.container）按 Tab 就没反应——这不是插件坏了，是语言模式没绑定。
- 打开
settings.json，确认有这一行："emmet.includeLanguages": {"html": "html", "vue-html": "html", "svelte": "html"} - 如果用的是
.njk或.liquid，需额外加"nunjucks": "html"，否则 Emmet 完全不启动 - 别依赖插件自动识别：右下角状态栏语言模式显示为
Plain Text时，手动点击切换成HTML或对应模板语言
Live Server 打开页面空白或 404？优先排查路径和协议
常见现象是点击 Open with Live Server 后浏览器跳转到 http://127.0.0.1:5500/ 却显示 Cannot GET /，或者 CSS/JS 报 404。这几乎全是路径问题，跟插件本身无关。
-
index.html必须在项目根目录；若放在src/下，Live Server 默认不认，需在设置里改liveServer.settings.root指向src - 所有资源引用必须用相对路径：
css/style.css✅，/css/style.css❌（后者在file://协议下会指向磁盘根目录） - 如果用了
<base href="/>，Live Server 的端口路径（如:5500/sub/）会被截断，直接删掉 base 标签更稳妥
HTMLHint 校验总卡顿或报错？关掉 lint 插件，换 CLI 方式跑
Atom 和旧版 VS Code 插件（如 htmlhint）在解析含大量注释、Vue 模板字符串或未闭合标签的文件时，容易假死几秒。这不是你电脑性能问题，是插件语法分析器没做流式处理。
立即学习“前端免费学习笔记（深入）”；
- 临时方案：禁用
htmlhint插件，在终端运行npx htmlhint index.html——快、准、不卡 - 长期建议：把校验交给提交前钩子（
husky + lint-staged），编辑器里只留基础高亮和 Emmet - 注意
.htmlhintrc文件必须放在项目根目录，且字段名严格小写："tagname-lowercase"✅，"tagNameLowercase"❌
Git 提交后别人克隆项目打不开？90% 是路径或协议惹的祸
本地双击 index.html 能跑，但同事 git clone 后一打开就是白屏+控制台一堆 404，基本可以锁定两个原因：路径写死了，或用了不兼容 file:// 协议的功能（比如 Service Worker）。
- 立刻检查所有
<link href>、<script src>、<img src>：开头不能有/，也不能是http://或https:// - Service Worker 注册代码（
navigator.serviceWorker.register）要包裹在if (location.protocol === 'https:') { ... }里，否则本地file://下直接报错中断脚本 - 用
git status确认index.html和资源文件都在暂存区；如果只看到.gitignore或空输出，说明git init位置错了
最常被忽略的一点：HTML 开发环境没有“一次配好”的终点。只要换了编辑器、加了新文件类型（比如开始写 Vue）、或者要把项目部署到 GitHub Pages，就得重新校验路径规则、协议兼容性和工具链是否衔接。配置不是目的，让每次保存都可靠地反映在浏览器里，才是唯一需要守住的线。
