前端开发者必装的VSCode插件指南-VSCode-PHP中文网

前端开发依赖关键插件解决真实痛点：eslint+prettier需配对使用并加eslint-config-prettier消音；live server与debugger for chrome分工明确；别名跳转需jsconfig.json/tsconfig.json配置baseurl和paths；括号着色应启用vs code原生功能。

前端开发者必装的vscode插件指南

前端开发不是靠插件堆出来的，而是靠几个关键插件解决真实痛点——格式混乱、调试断点难、路径跳转失效、组件结构看不清。

eslint + prettier 组合为什么必须配对用

单独装 eslint 会报一堆风格警告但不自动修；只装 prettier 又不管逻辑错误（比如未定义变量、重复声明）。两者冲突时，eslint-config-prettier 是必加的“消音器”。

安装后必须在 .eslintrc.js 的 extends 数组末尾加上 'prettier'，否则规则仍打架
editor.formatOnSave 开启后，保存时优先走 prettier 格式化，再由 eslint --fix 补救语义问题
Vue/React 项目要额外加 plugin:vue/vue3-essential 或 plugin:react-hooks/recommended，不然 v-model 或 useEffect 依赖检查直接失效

Live Server 和 Debugger for Chrome 不是替代关系

Live Server 解决的是“改完 HTML/JS 立刻看效果”，但它不支持断点、不读 sourcemap、无法 inspect scope；Debugger for Chrome 才能真正进 JS 执行栈。

面向设计的AXUI前端框架表单

面向设计的AXUI前端框架表单是一款包含表格、列表、弹窗等的AXUI前端框架表单下载。

下载

启动 Live Server 后地址是 http://127.0.0.1:5500/xxx.html，而 launch.json 中的 url 必须严格匹配这个地址，写成 file:/// 路径会失败
Vue/React 项目构建后（如 Vite dev server），webRoot 应设为 ${workspaceFolder}，而不是 out 或 dist 目录
如果断点灰掉，先检查浏览器是否开了“启用 JavaScript 源映射”，再确认 sourceMap 在构建配置里已开启

别名路径跳转（@/、~/）为什么 Ctrl+Click 失效

VS Code 默认不认识 @ 指向 src，也不懂 ~ 是 webpack 别名——这不是插件问题，是配置缺失。

装 Path Intellisense 只补全路径，不解决跳转；真正生效的是 Vue VSCode Tools（Vue 项目）或 JavaScript and TypeScript Nightly（TS 项目）+ jsconfig.json/tsconfig.json 中的 baseUrl 和 paths
示例配置："compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"], "@/api/*": ["src/api/*"] } }
改完配置要重启 TS 服务：Cmd/Ctrl+Shift+P → 输入 Restart TS server

Bracket Pair Colorizer 已被 VS Code 原生替代

VS Code 1.6x 版本起内置了括号着色（editor.bracketPairColorization.enabled），第三方插件反而可能和新语法（如 Vue <script setup></script>）冲突。

关掉旧插件，打开设置搜 bracket pair，勾选原生选项即可
如需增强，只开 editor.guides.bracketPairs 显示垂直对齐线，比彩色括号更轻量
若 JSX 中括号颜色错乱，大概率是 emerald 或 github-dark 主题没适配新 API，换 One Dark Pro 或 Material Theme 即可

插件装得越少，出问题时定位越快。真正卡住你的从来不是“没装某个插件”，而是配置没对齐、sourcemap 没生成、别名没声明——这些细节比插件名字重要得多。