VSCode插件助你高效完成前端任务-VSCode-PHP中文网

vscode中@别名路径可点击跳转需安装path intellisense或vue alias skip插件，并在jsconfig.json中正确配置baseurl和paths（如"baseurl": "./src", "paths": { "@/": ["*"] }），同时禁用冲突插件并重启vscode。

vscode插件助你高效完成前端任务

VSCode 插件不是“锦上添花”，而是解决具体卡点的工具——比如改个 @/api/user 路径却跳不到定义、保存后缩进还是乱、写完 v-if 忘关标签、括号嵌套三层就晕……这些不是你手慢，是缺对的插件。

怎么让 `@/` 别名路径真正可点击跳转

默认情况下，VSCode 对 @/api/user 这类 Webpack/Vite 别名路径完全无感知，Ctrl+左键 点击直接失效。光靠 jsconfig.json 或 tsconfig.json 的 paths 配置还不够，VSCode 需要插件主动解析别名语义。

推荐插件：Vue Alias Skip（专为 Vue 项目优化）或更通用的 Path Intellisense
必须补全配置：在 jsconfig.json 中确保有正确 baseUrl 和 paths，例如：
```
{ "compilerOptions": { "baseUrl": "./src", "paths": { "@/*": ["*"] } } }
```
常见坑：插件装了但没生效？检查是否禁用了其他路径解析类插件（如旧版 Alias Navigator），它们会冲突；重启 VSCode 后再试

`Prettier` 格式化后为什么还报 `ESLint` 错误

这是最典型的规则打架场景：Prettier 强制用单引号、不加分号、对象末尾不加逗号；而 ESLint 默认规则可能要求双引号、必须加分号、必须加尾逗号。两者同时启用时，格式化完立刻被 ESLint 标红。

PigX UI 前端开发

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

下载

关键解法：安装 eslint-config-prettier，并在 .eslintrc.js 中把它放在 extends 数组最后，覆盖所有与 Prettier 冲突的规则
VSCode 设置里务必关闭 editor.formatOnSave 和 editor.codeActionsOnSave 的双重触发，只留一个入口（推荐只开 Prettier 的保存格式化）
验证方式：在任意 JS 文件中输入 const a = { b: 1 };，保存后看是否还有 ESLint 提示“Extra semicolon”或“Strings must use singlequote”——没有才说明协同成功