VSCode插件赋能前端开发流程优化-VSCode-PHP中文网

vscode插件不在多而在精，关键在于禁用内置ts服务、配置codeactionsonsave自动修复、强制文件类型关联、排除无关目录，核心是删干扰项、固化高频操作。

vscode插件赋能前端开发流程优化

VSCode 插件不是越多越好，真正起效的往往是那几个被你写进 settings.json、关掉默认干扰项、并和项目配置对齐的插件。盲目装插件反而拖慢启动速度、引发规则冲突、掩盖真实问题。

VSCode 自带的 TS 支持常和你项目里安装的 typescript 版本不一致，导致 Go to Definition 跳错、类型提示消失、保存时 import 不自动补全。

按 Shift+Alt+F 是临时补救，不是工作流。真正省时间的是保存即修复：ESLint 报错自动修、import 自动整理、未使用变量直接删。

PigX UI 前端开发

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

下载

在 .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 插件接管格式化逻辑

.astro、.svelte、.vue、.mdx 这些文件，VSCode 默认不识别语法，插件激活常有延迟，导致高亮失效、无法 lint、跳转失败。

在 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 提示

没配路径映射时，断点打在构建后的 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