VSCode前端开发必备插件是刚需而非锦上添花：Prettier与ESLint必须组合使用并配eslint-config-prettier以避免规则冲突；Vue3项目必须用Volar禁用Vetur，否则丢失类型提示；Path Intellisense和Auto Rename Tag解决路径与标签低级错误；Live Server与Debugger for Chrome构成调试闭环。
VSCode 插件不是“锦上添花”，而是前端日常开发的刚需——没装对插件，save 一下代码还是乱的，import 路径手敲到崩溃，v-model 拼错半天才发现，console.log 还在手动打。真正省时间的插件，得解决这三类问题：格式自动对齐、路径/标签不写错、Vue/TS 类型不猜。
为什么 Prettier + ESLint 组合必须配，且不能只开一个
单独开 Prettier 只管空格换行，不管 undefined 访问或未使用变量；单独开 ESLint 又可能和 Prettier 规则打架，比如一个要分号一个不要，保存时反复来回改。
- 必须安装
eslint-config-prettier，并在.eslintrc.js的extends末尾加上它，禁用所有与格式相关的规则 -
settings.json中设"editor.defaultFormatter": "esbenp.prettier-vscode"，否则 ESLint 的自动修复会绕过 Prettier - Vue 3 项目里，
plugin:vue/vue3-essential和plugin:vue/vue3-recommended选后者，它包含 props 类型校验，但需配合vue/compiler-sfc版本 ≥ 3.4
Volar 和 Vetur 到底怎么选，装错直接丢类型提示
Vue 3 项目装 Vetur 就是自找麻烦：它不支持 <script setup></script> 的类型推导，ref 解构后丢失类型，defineProps 泛型也报红——这些不是你代码错，是插件压根没适配。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- Vue 3（含
create-vue或 Vite 默认模板）只装Volar，禁用Vetur（VSCode 会提示冲突，点“禁用”） - 若用
unplugin-vue-components自动导入组件，需在volar.config.json中开启"types": ["@vue/runtime-core"]，否则defineComponent提示失效 - 遇到
Cannot find name 'defineProps'，先检查compilerOptions.types是否含"vue"，再确认Volar是启用状态而非“已禁用”
Path Intellisense 和 Auto Rename Tag 看似小，实则防低级错误
这两个插件不炫技，但每天帮你省下几十次键盘纠错：前者防止 import '@/components/foo.vue' 手抖多打个 s，后者避免改 <div> 忘了闭合标签导致整个页面渲染异常。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>
<code>Path Intellisense 默认不补 @/ 别名，需在 settings.json 加配置："path-intellisense.mappings": { "@": "${workspaceFolder}/src" }
Auto Rename Tag 对 Vue 的 <template></template> 和 <script></script> 标签无效，只作用于 HTML/XML 结构，别指望它改 <script setup></script> 里的变量名import 补全失效，先确认文件是否在 tsconfig.json 的 include 数组里，否则插件根本“看不见”那些文件Live Server 和 Debugger for Chrome 不是可选项，是调试闭环基础
没有 Live Server，改完 CSS 得手动刷新浏览器；没有 Debugger for Chrome，debugger 断点只能在 DevTools 里看，变量作用域和调用栈不如 VSCode 直观。
-
Live Server默认端口 5500，若被占用，右键 HTML 文件 → “Open with Live Server” → “Change Port” 即可，不用改配置文件 -
Debugger for Chrome需配合launch.json，关键字段是"url": "http://localhost:5500"和"webRoot": "${workspaceFolder}"，漏掉webRoot会导致断点不命中 - Chrome 启动时加
--remote-debugging-port=9222参数（可通过命令行或快捷方式），否则 VSCode 无法连接调试器
插件装得多不代表效率高，真正卡住开发节奏的，往往是某个插件没配对、某个配置项漏写了、或者两个插件在暗地里互相覆盖。与其堆砌插件，不如盯紧这四类：格式、路径、框架支持、调试链路——每个环节少一次手动干预，就是一天少出三次线上 bug。
