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> 但 <code>
没变，其实是因为 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 比不用还糟，因为你会下意识多看一眼闭合标签是否更新了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
