path intellisense 是 vscode 中无需配置即可自动补全 import、css、html 等多场景文件路径的轻量插件,智能识别上下文、跳过 node_modules、支持大小写敏感系统及深层嵌套结构。

路径补全总出错?Path Intellisense 和 Path Autocomplete 别混用
两者功能高度重叠,但底层行为不同:Path Intellisense 依赖项目结构自动推导,对 jsconfig.json 或 tsconfig.json 中的 baseUrl 和 paths 配置敏感;Path Autocomplete 更偏向文件系统扫描,对别名支持较弱。实际项目中如果用了 @/components 这类别名,优先选 Path Intellisense,并确保配置里有对应映射:
"compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } }- VSCode 设置里打开
path-intellisense.mappings,手动加一条"@": "${workspaceFolder}/src" - 重启 VSCode 或执行
Developer: Restart Extension Host
常见错误是装了两个插件还同时启用,导致补全候选重复、光标跳位或路径解析失败。
HTML 标签写一半就卡住?Auto Rename Tag 必须配 Auto Close Tag
单独开 Auto Rename Tag 只解决改名同步问题,不处理未闭合标签;而 Auto Close Tag 能在输入 <div> 后自动补全为 <code><div></div>,但默认不处理自闭合标签(如 <img>)。两者组合使用才真正流畅:
- 确认
Auto Close Tag的autoCloseTag.enableAutoCloseTag设为true - 在设置里搜
html.autoClosingTag,确保它没被其他插件或用户配置关掉 - 若用 Vue/Svelte,需额外开启
Auto Close Tag的autoCloseTag.enableAutoCloseSelfTag,否则<input>类写法不会自动补全
常见坑:关掉 editor.autoClosingBrackets 后,Auto Close Tag 会失效——它底层依赖这个基础开关。
ESLint 报错却不修复?检查 Prettier 是否冲突
ESLint 和 Prettier 不是天然兼容的。Prettier 强制格式化可能覆盖 ESLint 的规则(比如 semi、quotes),导致保存后反复报错又自动改回。关键不是“谁该让步”,而是明确分工:
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
ESLint管逻辑和质量(no-unused-vars、react-hooks/exhaustive-deps) -
Prettier只管格式(缩进、换行、引号),且必须通过eslint-config-prettier关闭所有与格式相关的 ESLint 规则 - VSCode 设置里设
"editor.defaultFormatter": "esbenp.prettier-vscode",但禁用"editor.formatOnSave",改用"eslint.formatEnable": true+ 保存时运行eslint --fix
典型症状:保存后代码缩进变两格,但 ESLint 提示“Expected indentation of 4 space characters”——这就是 Prettier 没屏蔽掉 ESLint 的 indent 规则。
Vue 文件里 Ctrl+Click 跳不到 @/api?别名路径跳转要分两层配
仅装 vue-helper 或 Path Intellisense 不够。VSCode 默认不认识 @,跳转失败本质是 TypeScript/JavaScript 语言服务没加载别名配置。必须做两件事:
- 在
jsconfig.json或tsconfig.json里声明baseUrl和paths(同上文) - 安装插件
Alias Navigator或Vue Alias Skip,它们会读取上述配置并注入到 VSCode 的跳转逻辑中 - 确认
typescript.preferences.includePackageJsonAutoImports设为"auto",否则某些基于 package.json 的别名(如~components)无法识别
容易忽略的是:Vue 3 + Vite 项目里,vite.config.ts 中的 resolve.alias 对编辑器跳转无效——VSCode 不读 Vite 配置,只认 tsconfig.json。










