刚配好VSCode写前端，真正影响日常开发节奏的核心插件是Live Server、Auto Rename Tag、Auto Close Tag、ESLint、Prettier、Path Intellisense——分别解决热重载预览、HTML标签自动闭合与同步、代码规范检查、保存自动格式化、路径智能补全五大高频痛点，少一个即明显拖慢开发节奏。
刚配好 VSCode 写前端，别急着装一堆插件——真正影响日常开发节奏的，就那几个核心插件，装错或漏掉一个，写 HTML 时标签总忘闭、改个 class 名要手动搜三次、保存后还得切浏览器点刷新。
Live Server：改完代码不手动刷新的关键
它不是“能打开浏览器”就行，而是靠内置本地 HTTP 服务 + WebSocket 实现真正的热重载。Open in Browser 只是调用 file:// 协议，无法加载相对路径资源（比如 ./css/index.css），也触发不了 JS 的模块解析逻辑。
- 安装后右下角出现
Go Live按钮，点一下就启动，默认端口5500 - 若端口被占，直接在设置里改
liveServer.settings.CustomBrowser或设liveServer.settings.Port为0（自动分配） - 注意：它不处理构建产物（如 Webpack 输出的
dist/），只适合静态 HTML/CSS/JS 原生开发或 Vue/React 的单文件快速预览
Auto Rename Tag & Auto Close Tag：HTML/XML 编辑不翻车的基础
这两个插件解决的是最原始但高频的错误：标签没闭合、改了 <div> 忘改 </div>。它们不是锦上添花，而是防止你花 15 分钟 debug 一个拼写错误。
-
Auto Close Tag在输入<div后敲>，自动补全</div>；在 JSX 中也生效（但需确保文件关联为javascriptreact） -
Auto Rename Tag修改开始标签时，结束标签实时同步；但如果标签跨行或嵌套过深（比如<template><div><span>...</span></div></template>），可能漏匹配——这时得靠Bracket Pair Colorizer辅助肉眼确认结构 - 二者都依赖 VSCode 的语言模式识别，确保
.html文件被识别为html，.vue模板部分识别为vue-html，否则不生效
ESLint + Prettier：格式和规范不能靠自觉
它们不是“选装”，而是团队协作的底线。ESLint 检查潜在 bug 和风格问题（比如未使用的变量），Prettier 统一换行、缩进、引号等格式。两者冲突常见，必须协同配置。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 装插件
dbaeumer.vscode-eslint和esbenp.prettier-vscode - 关键配置项：
"editor.defaultFormatter": "esbenp.prettier-vscode"+"editor.formatOnSave": true，同时关掉eslint.format.enable - 项目根目录加
.eslintrc.js，用eslint-config-prettier关闭所有与 Prettier 冲突的规则，否则保存时反复格式化又报错 - Vue 项目务必加
plugin:vue/vue3-essential（Vue 3）或plugin:vue/essential（Vue 2），否则v-model、defineProps等语法会标红
Path Intellisense：import 路径输一半就补全
写 import { utils } from '../../../utils' 这种路径时，手动数 ../ 容易错，而且重构移动文件后全部失效。这个插件直接读 jsconfig.json 或 tsconfig.json 的 baseUrl 和 paths，支持别名跳转。
- 装完默认启用，无需额外配置；但若项目用了
@/components别名，必须确保jsconfig.json里有对应"@/*": ["src/*"] - 按
Ctrl+Space触发补全，支持相对路径、绝对路径、npm 包名（如输入react补全react或react-dom） - 注意：它不解决 “跳转不到定义” 问题，那是
Volar（Vue 3）或Vetur（Vue 2）的职责；它只管路径字符串怎么写得快、写得对
插件不是越多越好，而是每个都要清楚它解决什么具体问题、在哪种场景下失效、以及和其它插件怎么配合。比如 Live Server 对构建项目无效，Path Intellisense 依赖正确的 tsconfig 配置，ESLint 规则不配好反而拖慢编辑器响应——这些细节，比装十个插件更值得花五分钟确认。
