VSCode插件市场中前端框架配套插件的协同开发策略-VSCode-PHP中文网

vue项目@/路径无法跳转的根本原因是vscode未识别别名，必须在项目根目录配置jsconfig.json（js）或tsconfig.json（ts），含baseurl和paths，如{"compileroptions":{"baseurl":".","paths":{"@/":["src/"]}}}，且需重启vscode生效。

vscode插件市场中前端框架配套插件的协同开发策略

Vue 或 React 项目里装了一堆插件却越配越卡、跳转失效、保存就报错——问题不在插件多，而在没理清谁该管什么、谁该听谁的。

Vue 项目中 @/ 路径无法 Ctrl+点击跳转？

不是插件没装，是 VSCode 根本不知道 @/ 指向哪。Path Intellisense、Vue Helper 这类插件只负责“执行跳转”，不负责“定义路径”。

必须在项目根目录有 jsconfig.json（JS）或 tsconfig.json（TS），且含 baseUrl 和 paths 配置，例如：
```
{"compilerOptions": {"baseUrl": "src", "paths": {"@/*": ["*"]}}}
```
Vite 项目还需同步配置 vite.config.ts 中的 resolve.alias，否则运行时正常、编辑器跳转仍失败
改完配置必须重启 VSCode，否则不会重载 jsconfig.json
别用 Path Intellisense 当跳转主力——它只补全，不解析别名；真正支持跳转的是 Vue VS Code Extension Pack（官方）或 Vue Helper

ESLint 和 Prettier 保存后反复修改代码？

根本不是规则冲突，是 VSCode 让两个插件同时抢 editor.formatOnSave 的控制权。Prettier 管格式，ESLint 管逻辑，但默认都试图格式化。

前端美化

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

在 .vscode/settings.json 中明确指定："editor.defaultFormatter": "esbenp.prettier-vscode"，并设 "eslint.format.enable": false
.eslintrc.js 的 extends 数组末尾加 "eslint-config-prettier"，它会关掉 ESLint 所有格式类规则（如 semi、quotes）
别同时启用 eslint-plugin-prettier 和 eslint-config-prettier——前者把 Prettier 当 ESLint 规则跑，后者才是清道夫；二者混用反而增加执行链路
项目根目录必须有 .prettierrc，不能只靠 VSCode 设置；否则团队成员格式不一致

Live Server 启动后改 .vue 文件不刷新？

Live Server 本质是个静态文件服务器，不理解 Vue 单文件组件、不走打包流程、也不支持路由 fallback。它只监听 .html、.css、.js 变更。

Vue/Vite/React 项目一律用框架命令启动：npm run dev、npm run serve，别依赖 Live Server
如果硬要用 Live Server 原型演示，右键 index.html → “Open with Live Server”，而不是点状态栏 Go Live 按钮——后者以工作区根为服务根，常导致路径错乱
Live Server 不支持原生 ESM 模块（import 报 Failed to resolve module specifier），遇到就换 npx serve 或 vite preview
端口冲突静默失败很常见，启动前先执行 netstat -ano | findstr :5500（Windows）或 lsof -i :5500（macOS/Linux）查杀占端进程