前端开发者必看的VSCode插件配置建议-VSCode-PHP中文网

vscode路径别名跳转失效的根本原因是其不读取webpack/vite的alias配置，必须在项目根目录的jsconfig.json或tsconfig.json中正确配置baseurl和paths，并重启ts server；推荐配合path intellisense插件增强补全，但插件不能替代基础配置。

前端开发者必看的vscode插件配置建议

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 没指定，或者多个格式化插件冲突。

PigX UI 前端开发

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

下载

检查设置里是否设置了 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 文件变更。

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></template> 块时，确保插件版本 ≥ 0.1.10，旧版对 <script setup></script> 支持不全
如果用了自定义组件前缀（如 <elbutton></elbutton>），插件默认不处理，需配合 vetur 或 volar 提供的语义支持