VSCode 插件应精准解决开发卡点：Prettier 需开启 formatOnSave 并设为默认格式化器，ESLint 要配置自动修复链路，Auto Rename Tag 需激活对应语言模式，Live Server 依赖正确监听路径且不适用于复杂构建项目。
VSCode 插件不是“装得越多越好”，而是要解决你当前卡点：保存还在手动格式化、改个 div 忘记同步闭合标签、npm run dev 启动后切浏览器刷新、路径写错三次才反应过来——这些才是真实拖慢节奏的地方。
怎么让代码一保存就自动对齐？用 Prettier + 保存触发
Prettier 不是“美化工具”，它是帮你消灭团队里关于空格/分号/引号的无意义争论。关键不是装上，而是让它真正在你按下 Ctrl+S 的瞬间起效。
- 必须在设置里打开
"editor.formatOnSave": true，否则它只是个摆设 - 设为默认格式化器：
"editor.defaultFormatter": "esbenp.prettier-vscode"，不然可能被其他插件抢走控制权 - 如果项目用了 TypeScript，加一行
"prettier.parser": "typescript"，否则interface和泛型可能格式错乱 - 别全局开
prettier.semi，Vue 单文件组件的<script>块里关掉分号更自然，可单独配"prettier.semi": false
为什么 ESLint 报错但不自动修？缺了 --fix 链路
ESLint 默认只标红，不修。想让它像 Prettier 那样“保存即修复”，得打通两层：
- 插件本身要支持自动修复：确认已安装
dbaeumer.vscode-eslint，且项目根目录有.eslintrc.js或.eslintrc.cjs - VSCode 设置里加这句：
"eslint.codeAction.showDocumentationCodeAction": true，否则右键没“Fix this”选项 - 最常用的一键修复方式是
Ctrl+Shift+P→ 输入ESLint: Fix all auto-fixable Problems，比等保存更可控 - 注意：
no-console这类规则默认不能自动修复，得手动删或改console.log
改 HTML 标签总漏改闭合标签？Auto Rename Tag 要配语言模式
这个插件默认只对 html 文件生效，Vue/React 文件里不会动——很多人装了却觉得“没用”，其实是没激活对应语言支持。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 打开设置搜索
autoRenameTag，找到"auto-rename-tag.activationOnLanguage": ["html", "vue", "javascriptreact"] - Vue 文件里改
<template>中的div，闭合标签会同步；但<script>里的 JSX 不会，那是另一个作用域 - React 中如果用
.tsx，需额外加"typescriptreact"到 activation 列表，否则<div>改成<section>时闭合标签不动 - 它不处理自闭合标签（如
<br />），这类标签改名后需手动补斜杠
每次改完代码都要切浏览器按 F5？Live Server 不是点一下就完事
Go Live 按钮背后依赖的是文件监听机制，大项目或某些构建产物目录下它会失效——不是插件坏了，是监听范围被限制了。
- 启动后看 VSCode 底部状态栏，显示
Running on http://127.0.0.1:5500才算真正跑起来，没显示就是没启动成功 - 如果项目根目录有
dist/或build/，Live Server 默认不监听这些目录，得右键对应文件夹 →Open with Live Server - 端口冲突时（比如本地已有服务占了 5500），它不会报错，只会静默失败；可改配置
"liveServer.settings.port": 3001 - 它只适合静态页或简单 demo，
create-react-app或vite项目请用官方 dev server，Live Server 无法处理 HMR 或路由 fallback
插件配置不是一次性的动作，而是随着项目结构变化持续调整的过程。比如从 Vue2 升级到 Vue3，vue-vscode-tools 的自动导入行为会变；TS 版本升级后，typescript.tsserver.maxMemory 可能得重新调。别指望一套配置用三年。
