VSCode中那些能提升前端开发幸福感的插件-VSCode-PHP中文网

bracket pair colorizer 2 与 indent rainbow 可共存，需禁用旧版插件、将 indent rainbow 层级减至4层、关闭 coloronwhitespace，并以括号高亮为主、缩进色为辅。

vscode中那些能提升前端开发幸福感的插件

括号配色和缩进彩虹怎么选才不冲突

Bracket Pair Colorizer 2 和 Indent Rainbow 同时启用时，颜色层级可能打架——比如嵌套三层后括号颜色和缩进色块混在一起，反而更难分辨。实际用下来，Bracket Pair Colorizer 2（注意是 v2 版本）比老版更稳定，且支持自定义括号对范围；Indent Rainbow 则建议把默认的 6 层颜色减到 4 层，避免和括号色抢占视觉焦点。

禁用旧版 Bracket Pair Colorizer，只装 Bracket Pair Colorizer 2
Indent Rainbow 配置里加 "indentRainbow.colorOnWhiteSpace": false，避免空格区域也上色干扰
两者都开启时，优先靠鼠标悬停看括号高亮，缩进色仅作层次辅助

路径补全插件为什么有时找不到 @/src 下的文件

Path Intellisense 默认不识别 Webpack 或 Vite 的 alias 配置，比如 @/api 这类路径会提示“no suggestions”。它只扫描物理路径，不会读 jsconfig.json 或 tsconfig.json 里的 "paths"。

PigX UI 前端开发

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

下载

必须手动在 VSCode 设置里开启 "path-intellisense.mappings"，填入 {"@": "${workspaceFolder}/src"}
或者换用 Auto Import 插件，它能解析 tsconfig.json，对 TypeScript 项目更可靠
Vite 项目还需确认 vite.config.ts 中 resolve.alias 和 jsconfig.json 保持一致，否则路径跳转也会失效

Prettier 和 ESLint 一起用时保存反而报错

常见现象：打开 "editor.formatOnSave" 后，保存文件时 ESLint 报 prettier/prettier 错误，但格式化又没生效。本质是两个工具规则打架——ESLint 检查格式，Prettier 执行格式化，但没协调好执行顺序。

安装 eslint-config-prettier 并在 .eslintrc.js 的 extends 末尾加上 'prettier'
VSCode 设置里关掉 "eslint.format.enable"，让 Prettier 独占格式化权
确保 defaultFormatter 设为 esbenp.prettier-vscode，而不是 ESLint 插件本身

Vue 项目里 template 中的变量点不跳转到 data 或 setup

这是 Volar 和 Vetur 的兼容性遗留问题。Volar 是 Vue 3 官方推荐，但如果你还装着 Vetur，两者会争抢 .vue 文件处理权，导致悬停/跳转失效。

彻底卸载 Vetur，哪怕项目里有 Vue 2 代码也不建议共存
确认 Volar 已启用，并在设置里打开 "volar.autoImportCompletion"
如果用的是 defineComponent + setup()，确保 tsconfig.json 中 "compilerOptions.types" 包含 "volar"