VSCode前端开发必备插件功能对照表-VSCode-PHP中文网

真正影响日常编码节奏的必备插件是path intellisense、eslint、prettier、auto rename tag、vue alias skip（vue项目）或typescript hero（ts项目）、volar（vue 3）、es7+ react snippets与auto import（react项目），它们分别解决路径补全、语法检查、格式统一、标签同步、别名跳转、语言支持及自动导入等关键链路问题。

vscode前端开发必备插件功能对照表

哪些插件真正影响日常编码节奏

能让你少按十次 Ctrl+Space、少修三次路径拼写错误、少查一次文档的，才算“必备”。不是装得多就高效，而是关键链路是否被补全。

比如 Path Intellisense 和 @/api/user 这种别名路径跳转失败，本质是没配 jsconfig.json 或没装 Vue Alias Skip；ESLint 报红但不自动修复，大概率是没开 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }；Vetur 在 Vue 3 项目里会和 Volar 冲突，必须禁用其中一个。

Volar 是 Vue 3 官方推荐，Vetur 仅兼容 Vue 2 项目
Prettier 负责格式，ESLint 负责逻辑规范，两者需共存但不能互相覆盖（靠 eslint-config-prettier 关闭 ESLint 中与 Prettier 冲突的规则）
Auto Rename Tag 对 JSX 支持有限，React 项目建议配合 Auto Import + ES7+ React/Redux/GraphQL/React-Native Snippets

别名路径跳转为什么总失效

按下 Ctrl+单击 @/utils/request 没反应？这不是插件没装，而是 VSCode 不知道 @ 指向哪。它依赖两层配置：项目级声明 + 插件级解析。

必须同时满足：

项目根目录有 jsconfig.json 或 tsconfig.json，含 "baseUrl": "./src" 和 "paths": { "@/*": ["*"] }
已安装 Vue Alias Skip（Vue 项目）或 Typescript Hero（TS 项目），且插件未被禁用
VSCode 工作区打开的是整个项目根目录，而非只开了 src 子文件夹（否则路径解析上下文丢失）

常见报错：Cannot find module '@/api' or its corresponding type declarations —— 先检查 tsconfig.json 的 compilerOptions.paths 是否生效，再确认插件是否在当前工作区启用。

Prettier 和 ESLint 格式化打架怎么办

保存后代码被 Prettier 格式化成单引号，下一秒又被 ESLint 强制改成双引号，本质是两个工具在争「谁有最终格式决定权」。

PigX UI 前端开发

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

下载

解法不是关掉一个，而是明确分工：

Prettier 管样式：缩进、换行、括号位置、引号类型（设 prettier.singleQuote: true）
ESLint 管逻辑：no-unused-vars、eqeqeq、react-hooks/exhaustive-deps 等，关闭所有和格式相关的 rule（靠 eslint-config-prettier）
VSCode 设置中指定唯一默认 formatter："editor.defaultFormatter": "esbenp.prettier-vscode"
开启保存时自动修复："editor.formatOnSave": true + "editor.codeActionsOnSave": { "source.fixAll.eslint": true }