Live Server端口冲突可改settings.json中liveServer.settings.port为8080或0（随机端口），并检查.vscode/settings.json是否覆盖全局配置、禁用其他服务器插件；启动卡顿需确认CustomBrowser设置及项目根目录配置。
真正能提速的插件不在数量多，而在配置精准、触发及时、不抢焦点。装一堆但没调好，反而拖慢编辑节奏——比如格式化卡顿、路径补全弹出太慢、热重载延迟半秒，这些细节才是前端日常卡点的根源。
Live Server 启动慢或端口冲突怎么办
默认端口 5500 经常被其他服务（如旧版 webpack-dev-server、本地 Python 服务）占用，导致点击 Go Live 没反应或报错 Address already in use。
- 在 VSCode 设置中搜索
liveServer.settings.CustomBrowser，设为"chrome"可避免默认浏览器启动失败 - 修改端口：打开
settings.json，加这一行："liveServer.settings.port": 8080（或设为0启用随机端口） - 若仍卡在 “Starting Live Server…”，检查项目根目录是否有
.vscode/settings.json覆盖了全局设置，或禁用其他本地服务器类插件（如 Five Server）
Auto Rename Tag 在 JSX 里不生效
默认只启用 HTML/XML，React 开发者常遇到改了 <div> 但 </div> 没变，其实是因为 JSX 不在默认激活语言列表里。
- 必须手动在
settings.json中添加："auto-rename-tag.activationOnLanguage": ["html", "xml", "vue", "javascript", "typescript", "jsx", "tsx"] - 注意
jsx和tsx是独立项，漏掉任一都会导致组件标签（如<Button>→</Button>）不同步 - 如果用了 Vite 或 Next.js，默认语言模式可能是
typescriptreact，需确认该语言 ID 已包含在列表中（VSCode 状态栏右下角可查看当前语言 ID）
Prettier + ESLint 冲突导致保存后代码反复重排
常见现象：保存一次，eslint --fix 加了分号，prettier 又删掉；或引号风格来回切换。这不是插件问题，是规则没对齐。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 先统一格式化入口：在
settings.json中设"editor.defaultFormatter": "esbenp.prettier-vscode"，并关闭 ESLint 的自动修复（"eslint.formatEnable": false） - 在项目根目录加
.eslintignore，排除node_modules和构建产物，避免 ESLint 扫描时拖慢保存响应 - 关键一步：安装
eslint-config-prettier并在.eslintrc.js的extends末尾加上它，确保所有与 Prettier 冲突的规则被禁用
Path Intellisense 补全 alias 路径失败
写了 import Header from '@components/Header'，但按 Ctrl+Space 不提示 @components/ 下的文件，说明路径映射没被识别。
- 确认项目有
jsconfig.json或tsconfig.json，且含正确baseUrl和paths配置（例如"@/*": ["src/*"]） - VSCode 默认只读取工作区根目录的配置，如果项目是 monorepo 子包，需把
jsconfig.json放到子包目录，或在settings.json中指定"path-intellisense.mappings": { "@": "${workspaceFolder}/src" } - 补全失效时，先执行命令面板
Developer: Reload Window，而非重启 VSCode —— 这能更快刷新路径缓存
插件本身不会提速，你对它们「何时触发、如何响应、在哪生效」的理解才决定开发流是否顺畅。一个没配对的 auto-rename-tag 比不用还糟，因为你会下意识多看一眼闭合标签是否更新了。
