根本原因是语言模式不匹配:VS Code 默认将.jsx/.tsx文件识别为javascript/typescript模式,而HTML补全仅在html或javascriptreact/typescriptreact模式下激活;同时需确保emmet.triggerExpansionOnTab、emmet.showExpandedAbbreviation和html.suggest.html5三项配置均为true。

React文件里敲没提示,根本原因是语言模式不匹配
VS Code 默认把 .jsx 或 .tsx 文件识别为 javascript 或 typescript 模式,而原生 HTML 补全只在 html 或 javascriptreact 模式下激活。你输入 没反应,不是插件坏了,是编辑器压根没启用 HTML 语言服务。
检查右下角状态栏:如果显示的是 JavaScript 而不是 JavaScript React,就说明语言模式错了。点击它 → 选择 Configure Language Mode → 设为 JavaScript React。这个操作只对当前文件生效;要全局生效,必须改配置。
- 打开
settings.json(Ctrl+, → 右上角 {} 图标)
- 添加或确认存在:
"emmet.includeLanguages": {"javascript": "javascriptreact"}
- 注意逗号:如果前面已有其他配置项,这里前面要加英文逗号
- 改完后执行
Developer: Reload Window,否则不生效
为什么加了 emmet.includeLanguages 还是不补全?检查这三个开关
Emmet 是驱动 HTML 缩写补全(如 ul>li*3)的核心,但它依赖三个关键开关同时为 true:
-
"emmet.triggerExpansionOnTab": true —— 关掉后按 Tab 完全没反应
-
"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFiles" —— 设成 "never" 会导致 根本不提示
-
"html.suggest.enabled": true —— 这是 HTML 补全的总闸,关了就全黑屏
尤其注意第二项:很多用户复制了错误配置(比如设成 "always" 或 "never"),结果缩写输入后连下拉框都不弹。建议直接用 VS Code 设置 UI 搜索 “emmet show expanded”,选默认值即可。
JSX 中 class 属性不提示项目里的 CSS 类名?原生不支持,得靠插件
VS Code 自带的 HTML 补全只管标签结构和标准属性,class="" 引号里不会列出你 Button.module.css 或 index.scss 里的真实类名——它根本不读你的样式文件。
htmlppt.skill
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件(幻灯片风格)。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本,并且希望生成演示用的 HTML 时触发。支持任意内容来源:iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区,并通过企微直接发送给用户。触发词示例:帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
下载
要实现这个效果,必须装插件并配路径:
- 装插件:
IntelliSense for CSS class names in HTML(名字必须含 in HTML)
- 默认只扫描
./src/**/*.css 和 ./src/**/*.scss;如果你的样式在 assets/styles/ 下,就得加配置:"css.styleSheets": ["assets/styles/*.css"]
- Tailwind 用户别用这个插件,换用
Tailwind CSS IntelliSense;它对 @apply、clsx、twMerge 等才有感知
输入 当作普通字符串,而不是 W3C 规范中定义的有限集合。所以你敲 type="t,它不会自动补 text 或 tel —— 这不是配置问题,是能力边界。
想获得这类补全,目前只有两个现实路径:
- 用插件:
HTML Boilerplate 或 Auto Rename Tag 附带的轻量枚举支持(覆盖常见属性如 type、autocomplete、loading)
- 切换到专门的语言服务器,比如通过
Volar(Vue)或 Typescript Server Plugin(TSX + JSDoc 注解)间接注入约束
最常被忽略的一点:这种补全行为在 .tsx 文件中可能比 .jsx 更稳定,因为 TS 语言服务会更早介入 JSX 属性校验。但代价是需要类型定义配合,纯 JS 项目基本绕不开插件依赖。
VS Code 默认把 .jsx 或 .tsx 文件识别为 javascript 或 typescript 模式,而原生 HTML 补全只在 html 或 javascriptreact 模式下激活。你输入
检查右下角状态栏:如果显示的是 JavaScript 而不是 JavaScript React,就说明语言模式错了。点击它 → 选择 Configure Language Mode → 设为 JavaScript React。这个操作只对当前文件生效;要全局生效,必须改配置。
- 打开
settings.json(Ctrl+, → 右上角 {} 图标) - 添加或确认存在:
"emmet.includeLanguages": {"javascript": "javascriptreact"} - 注意逗号:如果前面已有其他配置项,这里前面要加英文逗号
- 改完后执行
Developer: Reload Window,否则不生效
为什么加了 emmet.includeLanguages 还是不补全?检查这三个开关
Emmet 是驱动 HTML 缩写补全(如 ul>li*3)的核心,但它依赖三个关键开关同时为 true:
-
"emmet.triggerExpansionOnTab": true—— 关掉后按 Tab 完全没反应 -
"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFiles"—— 设成"never"会导致根本不提示 "html.suggest.enabled": true—— 这是 HTML 补全的总闸,关了就全黑屏尤其注意第二项:很多用户复制了错误配置(比如设成
"always"或"never"),结果缩写输入后连下拉框都不弹。建议直接用 VS Code 设置 UI 搜索 “emmet show expanded”,选默认值即可。JSX 中 class 属性不提示项目里的 CSS 类名?原生不支持,得靠插件
VS Code 自带的 HTML 补全只管标签结构和标准属性,
class=""引号里不会列出你Button.module.css或index.scss里的真实类名——它根本不读你的样式文件。
htmlppt.skill下载把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件(幻灯片风格)。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本,并且希望生成演示用的 HTML 时触发。支持任意内容来源:iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区,并通过企微直接发送给用户。触发词示例:帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
要实现这个效果,必须装插件并配路径:
- 装插件:
IntelliSense for CSS class names in HTML(名字必须含in HTML) - 默认只扫描
./src/**/*.css和./src/**/*.scss;如果你的样式在assets/styles/下,就得加配置:"css.styleSheets": ["assets/styles/*.css"] - Tailwind 用户别用这个插件,换用
Tailwind CSS IntelliSense;它对@apply、clsx、twMerge等才有感知
输入
当作普通字符串,而不是 W3C 规范中定义的有限集合。所以你敲type="t,它不会自动补text或tel—— 这不是配置问题,是能力边界。想获得这类补全,目前只有两个现实路径:
- 用插件:
HTML Boilerplate或Auto Rename Tag附带的轻量枚举支持(覆盖常见属性如type、autocomplete、loading) - 切换到专门的语言服务器,比如通过
Volar(Vue)或Typescript Server Plugin(TSX + JSDoc 注解)间接注入约束
最常被忽略的一点:这种补全行为在 .tsx 文件中可能比 .jsx 更稳定,因为 TS 语言服务会更早介入 JSX 属性校验。但代价是需要类型定义配合,纯 JS 项目基本绕不开插件依赖。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










