Vue 3 项目必须装 Volar 并禁用 Vetur，否则 ref、defineProps 等类型推导和模板提示失效；ESLint 与 Prettier 需配对使用并配置 eslint-config-prettier，路径补全需映射 @/ 别名。
Vue3 项目直接装 Volar，别碰 Vetur；ESLint 和 Prettier 必须配对用，单装一个等于白装；路径补全、标签重命名、图标美化这三类插件不是“锦上添花”，而是每天省下 10 分钟的刚需。
Vue3 开发必须用 Volar 而不是 Vetur
Vetur 是 Vue2 时代的产物，对 setup 语法、defineProps / defineEmits、组合式 API 类型推导基本不支持。Volar 才是 Vue 官方推荐、基于 TypeScript 语言服务深度集成的现代方案。
- 安装后需在项目级
.vscode/settings.json中显式启用 hybridMode："vue.experimental.templateCompilerOptions": { "target": 3 } - 若 props 使用 kebab-case（如
user-name），必须加"vue.format.enable": true并配置"vue.format.options": { "parser": "vue" }，否则格式化会报错 - 禁用 Vetur：打开命令面板（
Ctrl+Shift+P），运行Extension: Disable All Extensions in Workspace，再手动禁用vetur
ESLint + Prettier 协同配置最容易出错的三个点
两者规则冲突是前端新人最常遇到的“格式化后又标红”问题根源。核心不是谁替代谁，而是让 ESLint 管逻辑、Prettier 管样式。
- 必须安装
eslint-config-prettier插件，并在.eslintrc.js的extends数组末尾加入'prettier'，否则quotes、semi等规则会打架 -
editor.defaultFormatter必须设为esbenp.prettier-vscode，且editor.formatOnSave设为true；但javascript.format.enable要设为false，否则 VSCode 自带 JS 格式化器会抢跑 - TSX/JSX 文件中，若用
eslint-plugin-react，需额外加eslint-plugin-react-hooks，否则useEffect依赖数组警告不会触发
Path Intellisense 和 Auto Rename Tag 这类“隐形效率插件”怎么避免踩坑
它们不炫技，但一旦失效，你会反复手动输路径、手敲闭合标签——看似小问题，日积月累就是心梗源头。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
Path Intellisense默认不识别@/别名，需在settings.json中配"path-intellisense.mappings": { "@": "${workspaceFolder}/src" }，Vue CLI 或 Vite 项目通用 -
Auto Rename Tag对 JSX 支持弱，默认不处理className或自定义组件标签；开启"auto-rename-tag.activationOnLanguage": ["html", "vue", "javascriptreact"]才能覆盖 .tsx 文件 - 两个插件都依赖文件监听，若项目 node_modules 过大（>5k 文件），建议在
settings.json加"files.watcherExclude": { "**/node_modules/**": true }防卡顿
插件装太多反而拖慢 VSCode？这些“伪刚需”可以先放一放
新手容易被“Top 20 插件”清单带偏，实际很多插件和你当前技术栈无关，甚至互相干扰。
-
Beautify和Prettier同时启用会导致保存时格式化两次，代码缩进错乱；留 Prettier 就够了 -
Live Server适合纯 HTML/CSS/JS 原生项目；Vue/React 项目用npm run dev启动开发服务器更准，它不模拟真实打包环境 -
Code Spell Checker对中文变量名无效，且会把useState、useEffect当错词标黄；关掉或加["useState", "useEffect"]到cSpell.words
真正卡住效率的，往往不是某个插件没装，而是 ESLint 规则没关掉 JS 自带校验、Volar 没关 Vetur、别名路径没映射——这些细节不调通，装再多插件也只是堆砌。
