Vue 3 项目必须用 Volar 而禁用 Vetur，因二者底层不兼容；Tailwind 类名补全失效主因是 tailwind.config.js 路径未被识别、PostCSS 未启用或 CSS 文件缺少 @tailwind 指令。
Vue3 项目别用 Vetur，React 项目装了 Volar 会报错，Tailwind 类名补全失效往往不是插件没装，而是 tailwind.config.js 路径没被识别或 PostCSS 配置缺失。
Vue3 开发必须换掉 Vetur，Volar 是唯一正解
Vetur 已停止维护，对 <script setup></script>、defineProps、TypeScript 泛型推导支持极差，且与 Vue Devtools v6+ 存在兼容问题。Volar 不仅提供完整语法高亮和跳转，还能解析 defineComponent 返回类型、支持组合式 API 的自动导入（如 useRoute），并内置 vue-tsc 类型检查能力。
- 安装后需禁用 Vetur：右键已安装的 Vetur → “Disable (Workspace)”
- 确保项目根目录有
tsconfig.json或jsconfig.json，否则ref类型推导会失效 - 若
App.vue中defineProps不提示，检查是否启用了"vue.experimental.enableExtendedNativeTypes": true（Vue 3.4+）
Tailwind CSS IntelliSense 失效的三个常见原因
类名不提示、hover 预览空白、@apply 无补全，基本不是插件本身问题，而是工程配置断层：
-
tailwind.config.js必须位于工作区根目录；若使用 monorepo，需在每个子包中单独配置或通过extends指向统一配置 - PostCSS 必须启用：项目中需存在
postcss.config.js且内容包含require('tailwindcss') - CSS 文件必须以
@tailwind指令开头，否则插件无法识别上下文；@layer块内规则不会触发补全
ESLint + Prettier 协同工作的最小可行配置
两者冲突不是“谁该让步”，而是必须明确分工：ESLint 管逻辑规则（如 no-unused-vars），Prettier 管格式（缩进、引号、分号）。关键在配置顺序和关闭重叠项：
立即学习“前端免费学习笔记（深入）”；
- VS Code 设置中只启用一个格式化器：
"editor.defaultFormatter": "esbenp.prettier-vscode" - 在
.eslintrc.cjs中引入eslint-config-prettier，它会自动关闭所有与 Prettier 冲突的规则 - 禁用 Prettier 的
semi和singleQuote以外的所有格式规则，避免 ESLint 报“格式错误”但保存后又自动修正的循环
路径跳转不准？Path Intellisense 和别名路径插件要配合使用
只装 Path Intellisense 只能补全物理路径，对 @/components 这类别名毫无反应。真正起作用的是「别名路径跳转」类插件（如 Alias Navigator 或 JavaScript Booster），它们依赖项目配置：
- Webpack/Vite 项目需确认
resolve.alias已正确声明，例如{ "@": path.resolve(__dirname, "src") } - TS 项目还需在
tsconfig.json的compilerOptions.baseUrl和paths中同步配置，否则跳转会失败 - 插件默认不处理
.vue文件中的import路径，需手动开启对应语言支持选项
插件装得再多，只要 tsconfig.json 或构建配置里少写一行 baseUrl，或者 tailwind.config.js 放错位置，所有智能提示都会退化成手动拼写——这才是前端开发里最常被忽略的“配置链断裂”。
