前端开发过程中常用的VSCode插件总结-VSCode-PHP中文网

vue 3 项目必须装 volar 而不是 vetur，因 vetur 已停更且架构不兼容，无法支持、响应式类型推导及 defineprops 等特性，禁用 vetur 并启用 volar 才能保障语法高亮、智能提示与跳转正常。

前端开发过程中常用的vscode插件总结

Vue 项目必须装 Volar 而不是 Vetur

Vue 3 项目里用 Vetur 会出问题，比如 <script setup></script> 语法不识别、TypeScript 类型推导失效、ref / computed 提示不准。这不是配置能修好的，是架构级不兼容。

Volar 是 Vue 官方推荐的 Vue 3 语言支持插件，基于 @vue/reactivity 实现按需响应式类型计算，性能和准确性都远超 Vetur
安装后需手动禁用 Vetur（右键插件 → Disable Workspace），否则两者冲突导致语法高亮错乱、跳转失败
如果项目同时存在 Vue 2 和 Vue 3 文件，Volar 默认只激活 .vue 中的 Vue 3 支持；需要在 settings.json 加上 "volar.autoEnableForVue2": true 才能覆盖旧版

路径别名跳转失效？别硬配 webpack.config.js

写 import utils from '@/utils' 却 Ctrl+点击进不去，不是你 tsconfig.json 或 jsconfig.json 没配好，而是 VS Code 根本没读到别名规则——它不认 webpack.resolve.alias。

PigX UI 前端开发

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

下载

必须在 jsconfig.json（JS 项目）或 tsconfig.json（TS 项目）里显式声明 "baseUrl" 和 "paths"，例如：
```
{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } } }
```
装 Alias Navigator 或 Vue Alias Skip 这类插件只是“补救”，本质是模拟解析逻辑；真正稳定的方式是让 TS/JS 语言服务原生支持
注意：修改 tsconfig.json 后要重启 TS Server（Ctrl+Shift+P → “TypeScript: Restart TS server”），否则跳转仍不生效

ESLint + Prettier 冲突时别删规则

ESLint 报红但 Prettier 格式化后又变红，常见于分号、引号、空行等风格项——这不是谁对谁错的问题，是两者职责重叠了。

不要在 .eslintrc.js 里手动关 semi、quotes 这类规则，而是装 eslint-config-prettier，并在 extends 末尾加上它，自动关闭所有与 Prettier 冲突的规则
settings.json 中设 "editor.defaultFormatter": "esbenp.prettier-vscode"，并开启 "editor.formatOnSave": true，确保保存时只走 Prettier 流程
如果用了 eslint-plugin-vue 或 eslint-plugin-react，记得对应加 plugin:vue/vue3-recommended 等扩展，否则组件相关规则不会触发

调试时断点不命中？检查 sourcemaps 是否被剥离

在 .vue 或 .ts 文件打的断点显示为空心圆（unbound breakpoint），说明调试器找不到源码映射——大概率是构建产物里没保留 sourceMap。

Vue CLI 项目：确认 vue.config.js 中 devtool: 'source-map'（开发环境）或 'hidden-source-map'（生产环境）已启用
Vite 项目：检查 vite.config.ts 的 build.sourcemap 设为 true，且 resolve.alias 与 jsconfig.json 中的 paths 一致，否则调试器无法匹配原始路径
Chrome DevTools 里打开 Sources → Page 面板，看左侧是否出现 webpack:// 或 app:// 前缀的源文件树；没有就说明 sourcemaps 根本没生成或加载失败

实际项目里，插件不是装得越多越好，而是每个都得清楚它在哪个环节起作用、失效时怎么验证、以及和其它插件有没有隐性冲突。比如 Volar 和 ESLint 插件共存时，vue-eslint-parser 版本不匹配会导致 template 里 v-model 报错；这种细节不查文档根本想不到。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！