VSCode插件不在多而在精，关键在于禁用内置TS服务、配置codeActionsOnSave自动修复、强制文件类型关联、排除无关目录，核心是删干扰项、固化高频操作。
VSCode 插件不是越多越好，真正起效的往往是那几个被你写进 settings.json、关掉默认干扰项、并和项目配置对齐的插件。盲目装插件反而拖慢启动速度、引发规则冲突、掩盖真实问题。
禁用内置 TypeScript 服务，改用项目本地 tsserver
VSCode 自带的 TS 支持常和你项目里安装的 typescript 版本不一致，导致 Go to Definition 跳错、类型提示消失、保存时 import 不自动补全。
- 在命令面板（
Ctrl+Shift+P）中运行Extensions: Show Built-in Extensions - 搜索
TypeScript and JavaScript Language Features，点击齿轮图标 →Disable (Workspace) - 确保项目根目录有有效的
tsconfig.json，且已安装typescript和@typescript-eslint/parser - 检查状态栏右下角是否显示 “TypeScript 5.4.5” 这类来自
node_modules的版本号，而不是 “Built-in”
用 editor.codeActionsOnSave 替代手动格式化
按 Shift+Alt+F 是临时补救，不是工作流。真正省时间的是保存即修复：ESLint 报错自动修、import 自动整理、未使用变量直接删。
- 在
.vscode/settings.json中写入： "editor.codeActionsOnSave": {"source.fixAll.eslint": true,"source.organizeImports": true,"source.removeUnusedVariables": true}-
"eslint.enable": true，但"eslint.format.enable": false - 不要设
"editor.defaultFormatter": "esbenp.prettier-vscode"—— 它会和 ESLint 的fixAll冲突；应让 ESLint 插件接管格式化逻辑
强制 files.associations 处理非标准文件类型
.astro、.svelte、.vue、.mdx 这些文件，VSCode 默认不识别语法，插件激活常有延迟，导致高亮失效、无法 lint、跳转失败。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 在
settings.json中显式声明语言关联： "files.associations": {"*.astro": "astro","*.svelte": "svelte","*.vue": "vue","*.mdx": "mdx"}- 搭配对应插件（如
Vue VSCode Tools）启用vue.components.autoImport，组件引用才真正能自动补全 - 若用 Vite，注意
vite.config.ts中esbuild.drop或treeShaking开关不能影响开发时的 import 提示
调试配置必须配 sourcemapPathOverrides
没配路径映射时，断点打在构建后的 dist/main.js 上，VSCode 根本找不到源码位置，光标悬停、变量监视全失效。
- 在
.vscode/launch.json中，Chrome/Firefox 调试器配置里必须加： "sourceMapPathOverrides": {"webpack:///./src/*": "${webRoot}/src/*"}- 若用 Vite，默认是
"webpack:///src/*": "${webRoot}/src/*"，但实际要根据构建产物 sourcemap 中的sources字段来反推（可打开dist/assets/index-xxx.js.map查看） -
"webRoot"必须指向项目源码根目录，不是dist或public
最常被忽略的其实是路径映射的准确性——它不依赖框架文档，只取决于你实际生成的 sourcemap 内容。花两分钟打开 .map 文件确认 sources 值，比反复试错快得多。
