VSCode前端开发效率卡点在于插件配置错位与协同失效：Volar未替代Vetur、tsconfig.json缺失或paths未配、ESLint与Prettier规则冲突、editor.formatOnSave误用，导致补全失效、路径跳转失败、格式越修越乱。
VSCode 前端开发效率卡在哪儿？不是写不出代码，而是改个 props 要手动同步标签、路径写错三次才补全、保存后格式乱七八糟还要手动调、Vue3 的 defineProps 提示压根不出现——这些全是插件没配对或配置冲突导致的。
ESLint + Prettier 怎么配才不打架
很多人装了插件但保存时格式越修越乱，核心是规则没对齐。Prettier 管样式（缩进、引号、分号），ESLint 管质量（未定义变量、死代码），两者必须职责分离。
- 项目本地必须装
eslint和prettier，不能只靠插件：运行npm install eslint prettier --save-dev -
.eslintrc.js中extends数组最后一项必须是'prettier'，顺序错了就失效 - 禁用 ESLint 自带的样式类规则：装
eslint-config-prettier，别手动关quotes或indent - VS Code 设置里关掉
editor.formatOnSave，改用editor.codeActionsOnSave触发 ESLint auto-fix
Volar 为什么比 Vetur 更适合 Vue3
Vetur 已停止维护，对 setup 语法、defineProps 类型推导、script setup 中的 ref 响应式推断基本无效。Volar 是官方推荐替代方案，但默认模式不兼容旧项目。
- Vue3 项目必须在项目根目录加
.vscode/settings.json，显式启用vue.experimental.enableVolar - 若同时用 TypeScript，需额外配
"vue": "hybridMode"，否则template里无法跳转到script中的变量 - 遇到
Property 'xxx' does not exist on type '...'错误，大概率是没开hybridMode或tsconfig.json没包含src/**/* - 别再装 Vetur，它和 Volar 冲突，会直接让类型提示消失
路径补全和组件跳转总失败？检查 Path Intellisense 和 Volar 协同
import Header from '@/components/Header.vue' 写到 @/ 就没提示，或者 Ctrl+点击跳不到文件——这不是插件没装，而是路径解析链断了。
立即学习“前端免费学习笔记（深入）”；
-
Path Intellisense依赖项目里的jsconfig.json或tsconfig.json中的baseUrl和paths配置 - Vue3 + Vite 项目常见配置是
"baseUrl": ".", "paths": { "@/*": ["src/*"] } - 如果用了
src/pages和src/views两个目录，得把它们都加进paths，否则只认一个 - Volar 默认不处理别名路径跳转，必须配合
jsconfig.json才能 Ctrl+点击跳转成功
为什么装了插件但错误不标红、格式化不生效
插件装了≠生效。VSCode 插件多数依赖项目级配置和本地依赖，全局安装几乎无效。
- ESLint 插件只读取项目内安装的
eslint包，全局安装的会被忽略 - Prettier 插件默认找项目根目录下的
.prettierrc，没有就用内置默认值，和你预期可能差很远 - 所有插件配置最终落地点是
.vscode/settings.json，不是用户设置；团队协作必须把这个文件提交到 Git - 重启 VSCode 不一定够，要关掉所有窗口再重开，否则插件缓存可能没刷新
真正卡住人的从来不是“该装什么”，而是“装了之后哪一层没配对”。比如 Volar 开了但 tsconfig.json 没配 include，或者 Path Intellisense 装了但 jsconfig.json 路径映射漏了一条——这些细节不验证，插件就是摆设。
