那些让前端开发更顺手的VSCode插件-VSCode-PHP中文网

prettier保存自动格式化需设editor.defaultformatter为esbenp.prettier-vscode、开启editor.formatonsave，并用eslint-config-prettier避免与eslint冲突。

那些让前端开发更顺手的vscode插件

保存就自动格式化，别再手动调空格缩进

代码风格统一不是靠人盯，而是靠 Prettier 在保存瞬间完成。它不检查语法错误，只管“怎么写好看”：单引号还是双引号、是否加分号、对象属性换行位置、一行最多多少字符……这些全由几个配置项控制。

常见错误现象：装了 Prettier 却没生效，或和 ESLint 冲突报红；多人协作时有人用 2 空格、有人用 4 空格，Git 提交全是格式差异。

必须在 settings.json 中设 "editor.defaultFormatter": "esbenp.prettier-vscode" 和 "editor.formatOnSave": true
若同时用 ESLint，务必加 eslint-config-prettier 关闭其格式类规则，否则两者打架
prettier.singleQuote 设为 true，prettier.tabWidth 设为 2，是目前主流团队的保守选择

路径一按 Ctrl 就跳转，别再手输 ../../..

大型项目里 @/components 或 ~/utils 这类别名路径，靠人脑记层级极易出错。插件 Path Intellisense 和 Alias Navigator 能实时补全并支持 Ctrl+Click 跳转，本质是读取项目中的 jsconfig.json 或 tsconfig.json 的 baseUrl 和 paths 配置。

容易踩的坑：新建项目没配 tsconfig.json，或配了但没重启 VSCode；Vue 项目用了 Volar，却忘了关 Vetur，导致路径提示失效。

PigX UI 前端开发

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

下载

确保 tsconfig.json 中有合法的 "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } }
Vue 3 项目优先用 Volar，禁用 Vetur（二者冲突）
React + TypeScript 项目需确认 jsconfig.json 或 tsconfig.json 存在且被 VSCode 正确识别

括号颜色一目了然，嵌套 jsx 不再头晕

写 React 或 Vue 模板时，{} 里套 {}、map 里嵌 filter，光靠缩进很难快速定位匹配对。插件 Bracket Pair Colorizer（新版已集成进 VSCode 1.69+，只需开启设置）给不同层级括号上色，配合 "editor.guides.bracketPairs": true 更直观。

注意：旧版插件名是 Bracket Pair Colorizer 2，新版本直接用内置功能即可，避免重复安装。

VSCode 1.69+ 用户，在设置中搜 bracket pair，勾选 Bracket Pair Guides
若颜色太淡，可自定义主题色：在 settings.json 加 "workbench.colorCustomizations": { "editorBracketMatch.background": "#ff000033" }
不要同时启用第三方括号着色插件和内置引导线，否则视觉干扰严重