装对插件比调设置更省时间，核心是 ESLint+Prettier 正确协同（禁用其格式化、启用 Prettier 默认）、Vue 3 必用 Volar 替代 Vetur、CSS 类名补全用 Zignd 插件、路径导入靠 Path Intellisense。
装对插件比调半天设置更省时间，但别一上来就装20个——真正每天高频用、解决具体卡点的，其实就那几个核心组合。
ESLint + Prettier 怎么配才不打架
这两个不是“装了就行”，配错会导致保存时格式反复来回改、报错提示消失、甚至 eslint.format.enable 被意外启用后覆盖 Prettier 的排版逻辑。
- 必须在项目根目录加
.eslintrc.cjs（或.eslintrc.js），且extends里明确包含eslint-config-prettier，否则 ESLint 会坚持用自己的缩进/引号规则 - VS Code 设置中关闭 ESLint 的格式化能力：
"eslint.format.enable": false，只让它做检查 - Prettier 设为默认格式器：
"editor.defaultFormatter": "esbenp.prettier-vscode"，并开启"editor.formatOnSave": true - 如果用了 TypeScript，
parserOptions.project必须指向正确的tsconfig.json，否则类型相关规则（比如no-unused-vars）会大面积误报
Vue 项目该选 Volar 还是 Vetur
Vue 3 项目装 Vetur 就是给自己埋坑：类型推导不准、defineProps 泛型支持弱、TSX 文件基本不识别。Volar 是 Vue 官方维护的现代语言服务器，不是“可选项”，而是 Vue 3 + TS 项目的事实标准。
- Volar 安装后需禁用 Vetur（右键扩展 → “禁用工作区”），否则两者冲突导致语法高亮失效、跳转失败
- 确保开启了
"vue.experimental.enableSourceMap": true（部分版本需要），不然组件内ref()类型推导会丢 - 如果用
unplugin-vue-components自动导入组件，Volar 需要额外配置"vue.suggestions.autoImportComponents": true才能补全 - Vetur 只保留在 Vue 2 项目里，且建议锁死版本（如
0.7.3），新版已停止维护，对 Vue 3 的 SFC 支持极差
写 HTML/CSS 时类名总得切到样式文件里找
靠记忆或手动翻 styles.css 或 tailwind.config.js 写 class，效率低还容易拼错。真正起效的是把类名补全“钉”在写 HTML 的那一刻。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 装
IntelliSense for CSS class names（作者 Zignd），它会扫描项目中所有.css、.scss、.less和tailwind.config.js，实时构建类名索引 - 输入
class="后按Ctrl+Space（Mac 为Cmd+Space）触发补全，不是等自动弹出——很多用户卡在这步，以为插件没生效 - 若项目用 CSS Modules，需在设置中开启
"csslassnames.includeCssModules": true，否则xxx.module.css里的类名不会被收录 - 搭配
Tailwind CSS IntelliSense使用时，注意关闭它的类名补全（设"tailwindCSS.experimental.classRegex": []），避免和前者重复触发
路径 import 总是输错 ../../
大型项目里，从 src/views/UserPage.vue 导入 src/utils/request.ts，手输 ../../../utils/request 不仅慢，而且极易少一个点或写反斜杠方向。
-
Path Intellisense是唯一能真正缓解这个问题的插件，它基于当前文件位置实时计算相对路径，并支持别名（如@/）自动展开 - 别名支持需在
jsconfig.json或tsconfig.json中正确定义compilerOptions.baseUrl和paths，否则插件识别不了@/components - 如果项目用 Vite，确保
vite.config.ts中的resolve.alias和 tsconfig 保持一致，否则插件提示的路径可能在运行时报错 - 禁用 Webpack 相关插件（如
Webpack Alias）——它和 Path Intellisense 功能重叠，且常因缓存导致路径提示滞后
插件不是越多越好，关键是让信号出现在对的时间、对的位置：ESLint 在你敲错 useEffect 依赖项时标红，Prettier 在你保存瞬间抹平空格争议，Volar 在你输入 props. 时立刻列出所有属性。这些微小确定性叠加起来，才是真实可感的效率提升。
