Bootstrap 5类名补全依赖VS Code内置CSS语言服务，需正确配置settings.json启用strings补全、advanced建议，并确保HTML中静态引入bootstrap.min.css文件，禁用冲突插件。
Bootstrap 5 类名补全靠的是 CSS 语言服务，不是 Bootstrap 插件
VS Code 本身不识别 Bootstrap，也不会因为装了“Bootstrap Snippets”插件就自动补全 btn btn-primary 这类类名。真正起作用的是内置的 CSS 语言服务器——它只在文件被正确识别为 CSS/SCSS/HTML 且启用语义化提示时，才基于已加载的 CSS 文件（如 bootstrap.min.css）做类名推导。
常见错误现象：class="btn" 后按 Ctrl+Space 只弹出基础 HTML 属性、没 Bootstrap 类；或输入 bg- 后无颜色变体提示（bg-red-500 是 Tailwind，Bootstrap 5 是 bg-primary）。
- 确认右下角语言模式是
HTML（不是Plain Text或PHP），否则 class 属性内不触发任何 CSS 类补全 - 确保项目中已通过
<link>引入了 Bootstrap 5 的 CSS 文件（本地路径或 CDN 都可，但必须在当前 HTML 中显式存在） - 禁用所有标有 “Bootstrap Autocomplete”“Bootstrap Helper” 的第三方插件——它们多数只提供静态 snippet，且常与 CSS 语言服务冲突
- VS Code 1.86+ 默认关闭高级 CSS 补全，必须手动加配置：
"css.suggest.advanced": true
HTML 中 class 属性内要补全 Bootstrap 类，必须开 strings 补全
Bootstrap 类名总写在 class="..." 的双引号里，而 VS Code 默认禁止在字符串中触发建议。不开这个开关，class="btn" 后敲空格或 Ctrl+Space 就是空白。
在 settings.json 中必须设置：
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true
}
注意：strings 设为 true 后，所有引号内都会尝试补全（比如 url("")、var(--)），这是必要代价。别用 GUI 点击设置，必须手写 JSON，GUI 常把 strings 项漏掉或覆盖成 false。
- 如果只希望对 HTML 文件生效，可改用语言特定设置：
"html.editor.quickSuggestions.strings": true - 若用了 Pug/Jinja2 等模板引擎，需额外确认其语法高亮插件是否透传 class 属性给 CSS 语言服务（多数不透传，此时补全失效属正常）
- 某些主题插件（如 Emerald）会劫持语言模式，导致右下角显示
HTML实际却是Custom HTML，补全直接静默——临时换回默认主题验证
SCSS/Sass 项目里用 @import 引入 Bootstrap，补全仍可能失效
在 main.scss 中写 @import "../node_modules/bootstrap/scss/bootstrap"; 后，期望输入 .btn- 就提示所有按钮变体？不行。CSS 语言服务器不解析 @import 或 @use 的语义，它只扫描当前文件和硬编码引入的 CSS。
解决方法只有两个，且都绕不开物理文件：
- 把
bootstrap.min.css（或未压缩版）拷到项目目录下（如assets/css/bootstrap.css），再在 HTML 中<link href="assets/css/bootstrap.css">——这是最稳的方式 - 或者，在 VS Code 设置中加
"css.styleSheets": ["./node_modules/bootstrap/dist/css/bootstrap.min.css"]，但路径必须相对于工作区根目录，且不能含~或node_modules别名（LSP 不 resolve Node.js 模块解析规则） - SCSS 文件自身不触发 Bootstrap 类补全，哪怕它最终编译出带 Bootstrap 样式的 CSS——补全只发生在编辑时的源文件上下文，不是构建产物
为什么 class="form-" 后不提示 form-control/form-check？检查三件事
Bootstrap 5 的类名前缀（form-、nav-、card-）补全失败，90% 是以下三个环节断了链：
-
settings.json里缺"css.suggest.basicProperties": false：不关掉基础兜底模式，语言服务就只返回display、margin这类原生属性，跳过所有自定义类 - HTML 文件里 Bootstrap CSS 是通过 JS 动态插入的（比如用
document.createElement("link")），CSS 语言服务器无法检测——必须是静态<link>标签 - 用了 Bootstrap 5.3+ 的 CSS 变量方案（
--bs-primary），但没启用"css.suggest.colorDecorators": true，颜色类（text-primary、bg-success）的补全权重会大幅下降
最易被忽略的一点：Bootstrap 5 的类名补全是“被动索引”，不是“主动注册”。它不会因为你装了 Bootstrap 就自动加载全部类名，而是等你第一次在 HTML 中引入 CSS 后，后台悄悄解析一次文件内容。首次补全延迟 1–2 秒属正常，别急着重装插件。
