VSCode中提升前端开发专业性的插件-VSCode-PHP中文网

eslint + prettier 组合必须启用自动修复，否则 eslint 就是半残废；需设 editor.formatonsave: true、启用插件“enable auto fix on save”，用 eslint-config-prettier 关闭冲突规则，并确保根目录有 .eslintrc.js 或 .eslintrc.cjs。

vscode中提升前端开发专业性的插件

ESLint + Prettier 组合必须启用自动修复

不配自动修复的 ESLint 就是半残废。保存时自动修正缩进、分号、引号、空行等格式问题，才能让团队代码真正统一。只靠人工检查或手动运行 eslint --fix 会漏掉大量低级错误，尤其在快速迭代中。

editor.formatOnSave 必须设为 true，否则 Prettier 不生效
ESLint 插件需勾选「Enable auto fix on save」，否则 eslint --fix 不会在保存时触发
两者冲突时优先用 eslint-config-prettier 关闭 ESLint 的格式类规则，别硬调顺序
项目根目录必须有 .eslintrc.js 或 .eslintrc.cjs，纯 JSON 不支持动态规则扩展

Volar 是 Vue 3 项目的唯一语言支持插件

还在用 Vetur？Vue 3 的 <script setup></script>、响应式语法推导、类型提示全挂掉。Volar 基于 @vue/reactivity 实现按需计算，TS 类型检查准确率远高于 Vetur，CPU 占用也更低。

PigX UI 前端开发

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

下载

安装后务必禁用 Vetur，否则两个插件抢夺 .vue 文件控制权，导致语法高亮错乱、跳转失效
需要配合 jsconfig.json 或 tsconfig.json 中的 "compilerOptions": {"types": ["volar"]} 才能启用完整类型支持
如果 ref() 变量悬停看不到类型，大概率是没开 "vueCompilerOptions": {"target": "3.4"}（根据你用的 Vue 版本调整）

Path Intellisense 要配 `jsconfig.json` 才能跳转别名路径

写了 import api from '@/api/user' 却 Ctrl+点击无效？不是插件坏了，是你没告诉它 @ 指向哪。Path Intellisense 默认只认相对路径，@ 这种 alias 是“黑盒”，必须显式声明。

在项目根目录新建 jsconfig.json，写入 {"compilerOptions": {"baseUrl": ".", "paths": {"@/*": ["src/*"]}}}
改完配置要重启 VSCode，热加载不识别新 paths
如果用了 ~/ 或 #/ 等其他别名，全部列进 paths，不能只写一个
Webpack/Vite 别名配置（如 resolve.alias）和 jsconfig.json 必须严格一致，否则跳转成功但运行报错

Debugger for Chrome 需要匹配 launch.json 的 sourceMap 路径

断点打了却不停？常见原因是生成的 sourcemap 路径和 launch.json 里 webRoot 或 sourceMapPathOverrides 对不上。Chrome 调试器找不到原始 TS/JSX 文件位置，自然无法映射。

Vue/React 项目推荐用 "webRoot": "${workspaceFolder}"，而不是 "${workspaceFolder}/src"
若用 Vite，确保 vite.config.ts 中 build.sourcemap 设为 true，开发模式默认已开
遇到 Could not load content for webpack:///... 错误，就在 launch.json 加 "sourceMapPathOverrides": {"webpack:///src/*": "${webRoot}/src/*"}
修改 launch.json 后不用重启 VSCode，但必须重新点击「开始调试」启动新会话