根本原因是语言模式不匹配：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 模式下激活。你输入 <di> 没反应，不是插件坏了，是编辑器压根没启用 HTML 语言服务。</di>

检查右下角状态栏：如果显示的是 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" 会导致 <di> 根本不提示 <code><div> <li> <code>"html.suggest.enabled": true —— 这是 HTML 补全的总闸，关了就全黑屏

尤其注意第二项：很多用户复制了错误配置（比如设成 "always" 或 "never"），结果缩写输入后连下拉框都不弹。建议直接用 VS Code 设置 UI 搜索 “emmet show expanded”，选默认值即可。

立即学习“前端免费学习笔记（深入）”；


htmlppt.skill
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
下载

JSX 中 class 属性不提示项目里的 CSS 类名？原生不支持，得靠插件

VS Code 自带的 HTML 补全只管标签结构和标准属性，class="" 引号里不会列出你 Button.module.css 或 index.scss 里的真实类名——它根本不读你的样式文件。

要实现这个效果，必须装插件并配路径：

• 装插件：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 等才有感知

输入 <input type="t 不提示 text？这不是 Bug，是设计取舍

VS Code 原生 HTML 语言服务对属性值不做语义枚举。它把 type=" text> 当作普通字符串，而不是 W3C 规范中定义的有限集合。所以你敲 <code>type="t，它不会自动补 text 或 tel —— 这不是配置问题，是能力边界。

想获得这类补全，目前只有两个现实路径：

• 用插件：HTML Boilerplate 或 Auto Rename Tag 附带的轻量枚举支持（覆盖常见属性如 type、autocomplete、loading）
• 切换到专门的语言服务器，比如通过 Volar（Vue）或 Typescript Server Plugin（TSX + JSDoc 注解）间接注入约束

最常被忽略的一点：这种补全行为在 .tsx 文件中可能比 .jsx 更稳定，因为 TS 语言服务会更早介入 JSX 属性校验。但代价是需要类型定义配合，纯 JS 项目基本绕不开插件依赖。