ESLint、Prettier、Path Intellisense、Auto Rename Tag是前端开发真正必需的4款核心插件，分别解决代码错误实时拦截、保存自动格式化、路径智能补全、标签重命名同步闭合四大高频痛点，少一个即明显拖慢开发节奏。
前端开发中真正能省下大量重复劳动、避免低级错误的插件，其实就那么几款——装多了反而拖慢编辑器、引发冲突。关键不是“全装”，而是选对核心组合。
ESLint：代码规范与潜在错误的实时拦截器
它不只检查分号和空格，而是能发现 undefined 变量引用、React 中缺少 key、Vue 模板里未声明的响应式属性等真实运行时隐患。错误直接标在编辑器里，悬停就能看原因。
- 必须配合
.eslintrc.js或.eslintrc.cjs使用，纯 JSON 不支持动态规则扩展 - 和
Prettier一起用时，一定要加eslint-config-prettier，否则格式类规则会打架 -
no-console默认是 error 级别，上线前容易漏掉，建议设为warn - 团队项目务必统一
eslint版本，不同版本对??、可选链等新语法的支持差异很大
Prettier：保存即格式化的“代码洁癖”执行者
它不管逻辑对不对，只管代码“长得好不好看”。缩进、引号、括号换行、对象属性排序——全部由它接管，开发者不用再争论“该不该加分号”。
- 启用
"editor.formatOnSave": true后，务必确认"editor.defaultFormatter"已设为esbenp.prettier-vscode -
.prettierignore必须包含node_modules、dist、build，否则格式化会卡死 - Vue 单文件组件中，
<template></template>和<script></script>的缩进规则可能不一致，需在.prettierrc中显式配置"vueIndentScriptAndStyle": true - TSX 文件里 JSX 元素换行策略（如是否强制多行）受
printWidth和jsxBracketSameLine共同影响，调错一个参数就会让组件模板变得难以阅读
Path Intellisense：路径拼写错误的终结者
90% 的导入报错不是语法问题，而是路径写错一个字母或少了个 ../。这个插件在你敲 import 或 require 时，自动列出当前上下文能访问到的真实路径。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 依赖项目根目录下的
jsconfig.json或tsconfig.json中的"baseUrl"和"paths"配置才能识别@/别名 - 对 Webpack 的
resolve.alias不生效，只认 TS/JS 配置文件 - 遇到
Cannot find module 'xxx'报错，先检查插件提示的路径是否真存在，而不是立刻怀疑打包配置 - Vue SFC 的
<style src="...">和<script setup src="...">也支持补全，但需确保文件后缀被识别为对应语言
Auto Rename Tag：HTML/XML 标签改名不漏闭合的保险丝
在 JSX 或 Vue 模板里重命名一个标签，比如把 <div> 改成 <section>，它会同步改掉 </div>。看似简单，但手动改漏一个闭合标签，轻则渲染异常，重则整个组件挂掉。
- 仅作用于成对标签，
<img />、<input>这类自闭合标签不会触发 - Vue 中
v-if、v-for等指令不影响匹配逻辑，插件只认标签名本身 - 如果改完没反应，检查是否启用了
"auto-rename-tag.activationOnLanguage": ["html", "javascriptreact", "typescriptreact", "vue"] - 和 Volar 或 Vetur 冲突时优先禁用后者，因为 Auto Rename Tag 是底层 DOM 标签操作，更稳定
真正难的是让这些插件彼此不打架，而不是单个插件有多炫酷。比如 ESLint 和 Prettier 的规则边界、Path Intellisense 与 Volar 对路径解析的优先级、甚至插件加载顺序都可能影响行为。这些细节不调好，装得再多也只是表面热闹。
