VS Code默认不启用HTML属性值语义补全,需确认语言模式为HTML、开启html.suggest.html5和emmet.triggerExpansionOnTab,并重载窗口生效。

input 标签的 type 属性在引号内不提示?div 输一半没反应?不是插件坏了,是 VS Code 默认没把 HTML 当“可语义补全的语言”来对待——它只开了基础语法识别,没开属性值枚举、没连上 Emmet 引擎、也没确认你当前真是 HTML 模式。
确认语言模式是 HTML,不是 Plain Text 或 JavaScript
这是 70% 补全失效的根源。右下角状态栏显示什么,就决定 VS Code 用哪套规则解析你敲的字符。
- 如果显示
Plain Text、PHP或空白,点它 → 选 Configure File Association for '.html' → 设为HTML - 对
.vue文件,<template></template>区域默认不走 HTML 补全,需加配置:"emmet.includeLanguages": {"vue-html": "html"} - 保存为
.htm或.xhtml?VS Code 不自动识别,得手动关联:"files.associations": {"*.htm": "html"}
打开 html.suggest.html5 和 emmet.triggerExpansionOnTab
前者控制是否提示 <header></header><nav></nav> 这类语义标签和 input 的合法 type 值(如 emaildate);后者决定按 Tab 能不能展开 ul>li*3 这类缩写。
-
"html.suggest.html5": true—— 必开。关了之后input type="|"里敲e就不会弹email -
"emmet.triggerExpansionOnTab": true—— 必开。设为false后,div+Tab只缩进,不生成<div></div> - 顺手检查:
"editor.quickSuggestions": {"html": true, "strings": true},否则双引号内(如class="|")压根不弹建议
让 class 属性也提示项目里的真实 CSS 类名
VS Code 原生不读你的 src/styles/ 或 tailwind.config.js,所以 class="m|" 不会出 mb-4 或 modal-content。
立即学习“前端免费学习笔记(深入)”;
- 装插件:
IntelliSense for CSS class names in HTML(注意名字带in HTML) - 默认只扫
./src/**/*.css,如果你的样式在assets/css/,加配置:"css.styleSheets": ["assets/css/*.css"] - Tailwind 用户必须有
tailwind.config.js在项目根目录,否则插件当它是普通 CSS,不识别工具类 - 别指望它提示
clsx("btn", isPrimary && "btn-primary")里的动态类——JS 运行时逻辑,编辑器静态分析不到
避免 Auto Close Tag 和内置 html.autoClosingTag 打架
VS Code 1.84+ 内置了自动闭合,而很多教程还教装 Auto Close Tag 插件,结果两者冲突,谁都不生效。
- 二选一:要么关内置,开插件:
"html.autoClosingTag": false+ 确保插件启用;要么直接用内置,卸载插件 - 想让
<script></script>和<style></style>也闭合?内置选项不支持,得用插件并配:"auto-close-tag.SublimeTextMode": true - Vue 单文件组件中
<template></template>里不闭合?插件默认不监听vue语言,加:"auto-close-tag.activationOnLanguage": ["html", "vue"]
最常被忽略的一点:改完 settings.json 后,别只 Ctrl+S 就完事——执行 Developer: Reload Window,否则部分设置(尤其是语言相关)根本不会加载。还有,别在 keybindings.json 里强行把 Enter 绑给 Emmet,它不处理嵌套缩写,反而破坏 ul>li*3 这种结构的展开逻辑。



















