unocss提示不出现的首要原因是配置文件缺失或错误：uno.config.ts（或.js）必须存在于项目根目录且导出合法配置，vite.config.ts中需启用@unocss/vite插件；其次需开启editor.quicksuggestions.strings，添加unocss.triggercharacters支持-:[]()等字符；vue项目还需volar协同工作且禁用冲突插件。
UnoCSS提示不出现？先确认这两个文件是否存在
VSCode的antfu.unocss插件默认只在检测到项目根目录有有效配置时才激活提示。它不会全局扫描，也不会 fallback 到默认规则。
-
uno.config.ts（或uno.config.js）必须存在且导出合法配置 —— 缺失、路径错误、语法报错都会导致插件静默失效 -
vite.config.ts中需已启用@unocss/vite插件，否则运行时样式不生效，但插件仍可能“假装工作”（比如悬停有提示，输入无补全） - 常见误操作：把
uno.config.ts放在src/下，或用unocss.config.ts这类非标准命名 —— 插件只认uno.config.*
editor.quickSuggestions 必须显式开启 strings
UnoCSS类名几乎全部出现在 HTML 或 Vue 的class属性字符串里，而 VSCode 默认关闭字符串内的自动建议。不改这个，哪怕配置全对，也看不到任何补全。
- 打开
settings.json（Ctrl+, → 右上角齿轮图标 → “Open Settings (JSON)”） - 确保包含以下片段：
{ "editor.quickSuggestions": { "other": true, "comments": false, "strings": true } } - 如果项目使用
.vscode/settings.json，请检查它是否覆盖了全局设置 —— 工作区设置优先级更高 - 修改后需**重启 VSCode 窗口**（不是重载窗口），否则插件不会重新读取该配置
为什么悬停显示 CSS 规则，但输入没提示？检查 triggerCharacters
VSCode 的补全触发依赖字符事件。UnoCSS 类名含大量连字符（-）、方括号（[）、冒号（:），默认triggerCharacters可能未覆盖全部。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 在
settings.json中添加："unocss.triggerCharacters": ["-", ":", "[", "]", "("] - 尤其注意
[和]：用于变体组语法如hover:[&_span]:text-red-500，缺它们会导致部分场景无提示 - 如果同时用
presetAttributify（如border="solid"），还需确保"="也在触发列表中
Vue SFC 中 class 提示仍弱？Volar 和 UnoCSS 要协同工作
Volar 负责解析 Vue 模板结构，UnoCSS 插件依赖它提供的 AST 上下文来判断哪里是 class 字符串。两者脱节，提示就断掉。
- 确认已安装并启用
Vue.volar（非旧版 Vetur） - 禁用任何冲突的 CSS/HTML 补全插件，比如
Auto Rename Tag或CSS Peek，它们可能劫持字符串上下文 - 在
.vue文件中，确保光标位于双引号内且紧邻 class 值开头（如class="|"），而非空格后或已输入部分字符时 —— 部分版本对位置敏感 - 若用
<script setup></script>中的defineProps动态拼接 class，提示通常不生效 —— 这是设计限制，非 bug
最常被忽略的是：插件不会主动监听配置文件变更。哪怕你刚保存了uno.config.ts，也得手动重启 VSCode 才能加载新规则。别在改完配置后立刻敲代码，先关再开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
