vs code中html标签补全失效主因是文件未被识别为html语言模式，需检查右下角状态栏并手动切换为html，确保文件后缀为.html或.htm，且html.suggest.html5设为true。
主流编辑器（VS Code、Sublime Text、WebStorm）都自带 HTML 代码片段库，但默认不自动弹出或无法触发，关键在语言模式识别和触发方式是否匹配。
VS Code 中 html:5 不生效？检查 language mode 和设置
输入 html:5 后按 Tab 没反应，大概率是当前文件没被识别为 HTML。VS Code 右下角状态栏会显示当前 language mode（如 Plain Text），点它 → 选择 HTML 即可。
-
html.suggest.html5必须开启：打开设置（Ctrl+,），搜该配置项并勾选 - 确保文件扩展名是
.html或.htm；用.txt打开再改后缀不会自动切换 language mode - 部分远程开发环境（如 Dev Containers）需确认内置 HTML 扩展已启用，不是仅靠本地安装
Sublime Text 的 Emmet 缩写和原生 snippet 冲突怎么办
Emmet 占用了 div、ul、img 等通用缩写，你自定义的 divc（带 class 的 div）就容易被忽略——因为光标停在 div 上时 Emmet 已抢先展开。
- 把自定义 snippet 的
tabTrigger改成无歧义前缀，比如div-class、card-s（s 表示 simple） - 禁用 Emmet 对特定缩写的响应：在 Sublime 的 Emmet 设置中添加
"disabled_packages": ["Emmet"]（不推荐全关），或更细粒度地在Preferences → Package Settings → Emmet → Settings中配置"disable_tab_abbreviations_for_scopes" - 确认 snippet 文件的
scope是text.html.basic，不是text.html—— 后者在 Sublime 中基本不生效
WebStorm 里输入 html 没提示？别漏掉 Live Templates 配置
WebStorm 默认不把 html 当作 Live Template 前缀，它内置的是 html5（注意不是 html:5），且只在 HTML 文件的 HTML text 上下文中激活。
- 手动触发：输入
html5→ 按Tab，生成完整骨架；输入lorem3→Tab插入 3 段占位文字 - 若想改前缀，进
Settings → Editor → Live Templates → HTML，双击html5条目修改Abbreviation - 注意作用域（Applicable in）：必须勾选
HTML Text，否则在<script></script>块内或 JSX 中不会出现
所有编辑器共通的坑：片段里含 JS/CSS 时路径和执行时机错乱
代码片段只是文本插入，不解析、不校验、不注入上下文。你插入一个带 src="js/app.js" 的 <script></script>，如果当前 HTML 文件不在项目根目录，路径就 404。
- 静态资源路径建议用相对路径 + 注释说明，比如
<!-- @path: ./js/ --><script src="./js/main.js"></script> - 避免在片段里写
document.addEventListener('DOMContentLoaded', ...)：片段插入时 DOM 可能未就绪，应交由外部统一初始化 - 含
<style></style>的片段，不要依赖 CSS 变量或外部类名，除非你确定目标页面已加载对应样式系统
最易被忽略的是：片段一旦插入，就脱离编辑器控制，后续 HTML 结构变动（比如父容器加了 shadowRoot）会让片段内的选择器或脚本直接失效——它只是文本，不是活组件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
