VSCode路径别名跳转失效的根本原因是其不读取Webpack/Vite的alias配置，必须在项目根目录的jsconfig.json或tsconfig.json中正确配置baseUrl和paths，并重启TS Server；推荐配合Path Intellisense插件增强补全，但插件不能替代基础配置。
VSCode插件不是装得越多越好，关键在解决真实痛点——比如路径跳不进去、保存不格式化、标签改了闭合没同步、浏览器要手动刷新。
路径别名跳转失效：@/src 无法 Ctrl+点击
这是 Vue/React 项目最常遇到的“假死”现象：写 import { api } from '@/api/user'，按住 Ctrl 点击却毫无反应。根本原因不是插件没装，而是 VSCode 不知道 @ 指向哪。
- 必须确认项目根目录下有
jsconfig.json（JS）或tsconfig.json（TS），且含"baseUrl": "src"和"paths"配置 - 推荐插件：
Path Intellisense或Alias Navigator，但它们只是“补救”，不是替代配置 - 如果用了 Vite，还需在
vite.config.ts中显式导出resolve.alias，否则部分插件识别不到 - 重启 VSCode 后仍无效？执行命令
Developer: Reload Window，别只关再开
保存后代码没自动格式化：editor.formatOnSave 不起作用
你明明开了 editor.formatOnSave，但保存 JS 文件时缩进还是乱的——大概率是默认 formatter 没指定，或者多个格式化插件冲突。
- 检查设置里是否设置了
editor.defaultFormatter，例如：esbenp.prettier-vscode（Prettier）或dbaeumer.vscode-eslint（ESLint） - 若同时装了 Prettier 和 ESLint，必须加
eslint-config-prettier关闭 ESLint 的格式类规则，否则会打架 - HTML/CSS 文件格式化异常？确认
html.format.enable和css.format.enable是true，它们默认可能为false - 某些文件类型（如
.vue）需单独指定 formatter，例如："[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
Live Server 热重载不触发：改完 HTML 刷新了，JS 却没更新
Live Server 插件启动后，修改 HTML 能自动刷新，但改了 main.js 却没反应——这不是插件问题，是它压根不监听 JS 文件变更。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- Live Server 默认只监控
.html、.htm、.php等服务端文件，JS/CSS 属于静态资源，浏览器缓存后不会强制重载 - 解决方案只有两个：
Ctrl+F5强制硬刷新，或在 Live Server 设置中启用"liveServer.settings.donotShowInfoMsg": true+ 手动开 Chrome 的 “Disable cache”（DevTools → Network 标签页） - 真正需要热更新 JS 逻辑？该用 Vite / Webpack Dev Server，Live Server 只适合纯前端静态原型
- 别迷信“自动”，它连
fetch请求都抓不到，调试 API 请直接用浏览器 Network 面板
Auto Rename Tag 在 JSX/Vue 中失效：改了 <MyComp>，</MyComp> 没变
插件装了、也启用了，但在 React 或 Vue SFC 里重命名组件标签就是不生效——大概率是语言模式没识别对，或者插件没覆盖对应语法范围。
- 确认当前文件右下角显示的是
JavaScript React（JSX）或Vue，不是Plain Text或HTML - 检查插件设置：
auto-rename-tag.activationOnLanguage必须包含"javascriptreact"（注意不是jsx）、"vue" - Vue 模板中使用
<template>块时，确保插件版本 ≥ 0.1.10，旧版对<script setup>支持不全 - 如果用了自定义组件前缀（如
<ElButton>），插件默认不处理，需配合vetur或volar提供的语义支持
插件配置真正的难点不在“怎么装”，而在“谁管什么、谁听谁的”。比如 Prettier 负责格式、ESLint 负责质量、Volar 负责 Vue 类型，三者各司其职又互相牵制。一个配置项改错，可能让整个保存流程静默失败，而错误提示几乎为零。
