必须配对启用ESLint与Prettier并禁用冲突规则，否则保存时反复“打架”；Live Server提供本地HTTP服务解决CORS问题；Path Intellisense依赖jsconfig.json配置alias路径；Auto Rename Tag仅作用于HTML/Vue模板中的非自闭合标签；配置落地比插件数量更重要。
前端开发在 VSCode 里不装这 5 类插件，等于裸写代码——不是效率低，是容易漏掉关键错误、写错路径、改错标签、看不到实时效果，甚至调试时找不到 source map 映射。
ESLint + Prettier 组合必须配对启用
单独装 ESLint 只报错不修复；单独用 Prettier 只格式化不检查逻辑。两者冲突会导致保存时反复“打架”，比如 ESLint 要分号、Prettier 去分号，结果格式化后立刻标红。
- 必须安装
eslint-config-prettier插件，并在.eslintrc.js的extends末尾加上'prettier'，禁用所有与格式相关的规则 -
settings.json中设"editor.defaultFormatter": "esbenp.prettier-vscode"和"editor.formatOnSave": true，但仅当eslint.enable为true且文件被 ESLint 监控时才生效 - React 项目记得加
plugin:react/recommended；Vue 3 项目用plugin:vue/vue3-recommended，别混用 Vue 2 规则
Live Server 不是“点一下就完事”的预览工具
它本质是本地 HTTP 服务，不是文件协议预览。直接双击 HTML 打开会触发 CORS 或 fetch 失败，而 Live Server 启动后地址是 http://127.0.0.1:5500/xxx.html，才能正常加载模块、调用 API、读取本地 JSON。
- 端口被占？在
.vscode/settings.json加"liveServer.settings.port": 3001 - 需要局域网访问（比如手机真机调试）？设
"liveServer.settings.host": "0.0.0.0"，并确保防火墙放行该端口 - 启动时自动打开浏览器？配
"liveServer.settings.donotShowInfoMsg": false，否则可能静默失败无提示
Path Intellisense 对 alias 路径支持依赖 jsconfig.json 配置
写了 import Button from '@/components/Button' 却不提示、跳转失败？不是插件坏了，是 VSCode 根本不知道 @/ 指向哪。TypeScript 项目用 tsconfig.json，JS 项目必须有 jsconfig.json，否则 Path Intellisense 和 Go to Definition 都失效。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
jsconfig.json至少要包含：{"compilerOptions":{"baseUrl":".","paths":{"@/*":["src/*"]}}} - 路径补全默认只对
import和require生效，CSS 中的url(./img.png)不触发 - 如果用了 Vite 别名（如
$lib），需同步在jsconfig.json里声明，否则类型检查和跳转会断
Auto Rename Tag 在 JSX/Vue 中行为有差异
它能改 <div> → <section>，但对自闭合标签（<input />）、动态属性（<Component v-if="show">）或 Fragment（<></>）完全不响应——这不是 bug，是设计限制。
- React 中改
<div className="x">，闭合标签会同步，但className不会自动改成class（那是 Prettier 的事） - Vue 单文件组件中，只作用于
<template>区域，<script>里的 JSX 字符串不处理 - 如果重命名后没反应，先确认是否在 HTML/XML 模式下（右下角显示
HTML或Vue），不是Plain Text或JavaScript React
插件再多，核心还是配置落地：一个没生效的 jsconfig.json，会让十个路径补全插件集体失明；一个没禁用重复规则的 eslint-config-prettier，会让格式化变成永动机。别只复制粘贴配置，得看懂每行为什么存在。
