Auto Rename Tag是前端开发必备基础设施，可自动同步HTML/Vue/JSX等标签的开闭名称，但需手动配置activationOnLanguage支持非HTML文件，且不处理逻辑层变量重命名。

VSCode插件不是“锦上添花”，而是前端日常开发的基础设施——没有它们，你得手动处理路径拼写、反复刷新页面、猜括号匹配、在控制台里逐行查错、靠记忆写 Vue 指令。

为什么改个 v-model 要装 Auto Rename Tag？

Vue 或 JSX 中改一个组件名或指令，不只改开标签，闭合标签、属性名、甚至 script 里的引用都可能联动变化。原生编辑器做不到跨区域同步修改。

• Auto Rename Tag 默认只响应 HTML 标签，必须手动加配置才能支持 .vue 和 .jsx 文件："auto-rename-tag.activationOnLanguage": ["html", "vue", "jsx"]
• 它不处理逻辑层变量重命名（那是 ESLint + Refactor 插件的事），别指望它帮你改 const foo = ... 里的 foo
• 在 setup() 的 return 对象里改 key 名，它完全无感——这是语言服务（Volar）该干的活，不是标签重命名插件的职责

Live Server 启动后页面没更新？先看这三件事

热重载失效不是插件坏了，大概率是环境或配置卡点。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 确认当前打开的是 .html 文件——Live Server 不会监听 .vue 或 .ts 的变更，它只 serve 静态文件
• 检查端口是否被占用：默认 5500，若冲突，改 liveServer.settings.port 到 0（自动分配）或明确值如 8080
• 如果用了构建工具（Vite/webpack），别用 Live Server——它和 dev server 冲突，浏览器实际连的是构建产物目录，不是源码目录

ESLint 报错但不提示修复？缺了关键链路

ESLint 插件本身只是“报错器”，不带自动修复能力，除非你配对了执行动作。

立即学习“前端免费学习笔记（深入）”；

• 必须开启 VSCode 的保存格式化："editor.formatOnSave": true，否则 --fix 永远不会触发
• eslint-config-prettier 必须装且启用，否则 ESLint 和 Prettier 规则打架，比如一个要分号一个不要，保存时来回拉扯
• 项目根目录下要有 .eslintrc.js 或 .eslint.json，光装插件不配规则，它连“什么是错”都不知道

真正卡住人的从来不是插件装不装，而是每个插件背后那几行不起眼的配置项——它们决定插件是默默干活，还是静音失效。