vs code需插件补全html/css功能：Emmet缩写失效因语言模式错误或设置未启用html/css；Live Server空白因路径解析错、根目录未设对或file://协议；auto Rename Tag仅作用于成对HTML标签；Tailwind类补全需正确配置config文件路径并重启。
VS Code 本身不内置 HTML/CSS 智能补全和实时预览能力，必须靠插件补足——但装错或没配好，反而拖慢编辑器、触发冲突、补全错乱。
Emmet 是默认启用的，但缩写不生效？检查这两个设置
VS Code 自带 Emmet，但常因语言模式或设置被禁用。不是插件没装，而是它“睡着了”。
-
"emerald.enableEmmetforLanguages"被手动覆盖，导致html或css不在启用列表里 - 当前文件没被识别为正确语言模式：右下角显示
Plain Text而非HTML，此时div.container+ Tab 不会展开 - 检查设置中是否误启用了
"emerald.experimental.showExpandedAbbreviation"等实验性开关，某些旧版会干扰主功能
修复方式：打开设置（Ctrl+,），搜 emmet include，确认 html 和 css 在 emerald.includeLanguages 中；再点右下角语言模式，手动选 HTML。
Live Server 插件启动后页面空白？常见三类路径问题
Live Server 启动的是本地 http 服务，不是直接开文件。路径解析规则和双击打开完全不同，尤其对 ./css/style.css 这类相对引用极敏感。
立即学习“前端免费学习笔记（深入）”；
- 项目根目录没设对：右键项目文件夹 →
Open with Live Server，而不是右键单个index.html -
中的css/是相对于服务器根目录，不是 HTML 文件所在目录 - 使用了
file://协议加载资源（比如图片路径写成file:///D:/.../img.png），Live Server 下该路径完全失效
验证方法：浏览器地址栏应是 http://127.0.0.1:5500/index.html，而非 file:///...；打开开发者工具 Network 标签页，看 CSS/js 是否返回 200。
Auto Rename Tag 失效？它只响应成对标签且依赖语言模式
Auto Rename Tag 不是全局监听所有文本，它只在 HTML 或 vue 等支持的语言模式下，对合法开始/结束标签起作用。
- 写
时修改开头div，结尾自动同步；但写 - 如果文件是
.vue单文件组件，需确保插件已配置支持vue-html模式（新版默认支持） - 在
style块里写div { }不会重命名——它只管 HTML 结构层，不管 CSS 选择器
典型误操作：把
改成 ，但没写闭合标签 ，插件无法匹配，自然不联动。
IntelliSense for CSS class names from HTML files 插件要配合 tailwind.config.js 才能识别 Tailwind 类名
这个插件本身不“猜”类名，它扫描项目中所有 .html、.js、.vue 文件里的 class="tuc-19bc10f7-792f68-0 ... tuc-19bc10f7-792f68-0"，提取并补全。但 Tailwind 的类是动态生成的，必须显式告诉它配置位置。
- 插件默认只读
tailwind.config.js，如果你用tailwind.config.cjs或tailwind.config.ts，需在 VS Code 设置里手动指定路径："tailwindCSS.experimental.configFilePath" - 若项目用 PurgeCSS 或
content配置限制了扫描范围（如只扫src/**/*.{html,js}），而你的 HTML 在public/下，类名就不会被索引 - 首次启用后需重启 VS Code，或运行命令
Developer: Reload Window，否则缓存未更新
最易忽略的一点：插件不会补全你拼错的类（比如 text-cener），它只补全你已在项目中实际用过的、且被成功扫描到的类名。