vscode前端开发不“开箱即用”，必须装eslint、prettier、volar、path intellisense、error lens五款插件，并正确配置：禁用prettier自动格式化、启用eslint接管保存格式、关闭volar take over mode、在tsconfig.json中声明paths别名、live server需走http服务而非file协议。
VSCode前端开发环境配不配得上“开箱即用”，关键不在装多少插件，而在哪几个必须装、怎么配才不踩坑。装错或配漏，轻则格式错乱、跳转失效，重则 ESLint 和 Prettier 互相打架、Vue3 模板里没提示、别名路径点不开。
ESLint + Prettier 怎么配才不冲突
很多人装了 ESLint 和 Prettier 后发现保存时代码越格式越乱，根本原因是两者职责重叠又没协调好。
- 必须禁用 Prettier 的自动格式化功能：在 settings.json 中设
"prettier.enable": false，否则它会绕过 ESLint 规则直接格式化 - 让 ESLint 接管格式化：启用
"editor.formatOnSave": true，同时确保"eslint.formatEnable": true - 加一层约束：安装
eslint-config-prettier并在 ESLint 配置中 extends 它，关掉所有和 Prettier 冲突的规则 - Vue 项目额外注意：
Volar默认启用自己的格式化，需在 settings.json 中关掉："volar.format.enable": false
Vue3 开发必须装 Volar 而不是 Vetur
Vetur 已停止维护，对 Vue3 的 Composition API、<script setup></script>、类型推导支持极弱，强行用会出现 props 不提示、defineProps 报错、模板里无法跳转到 script 中定义的变量等问题。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
-
Volar是 Vue 官方推荐的替代方案，但默认启用“Take Over Mode”，会禁用 VSCode 原生 TS 支持 —— 这会导致 .ts 文件里类型检查失效 - 解决办法：关闭 Take Over Mode，在命令面板运行
Volar: Disable Take Over Mode，然后重启窗口 - 确保
typescript.tsdk指向项目内 node_modules/typescript/lib/tsserverlibrary.js，否则defineProps类型推导会失败
别名路径（如 @/components）点不开？不是插件问题，是配置缺位
装了 Path Intellisense 或 vue-alias-skip 却依然无法 Ctrl+Click 跳转，大概率是 jsconfig.json 或 tsconfig.json 里没声明 paths。
- Vue CLI 项目：确认
tsconfig.json中有"baseUrl": "./"和"paths"配置，例如："@/*": ["src/*"] - Vite 项目：同样需要
tsconfig.json，且vite.config.ts中的resolve.alias必须和 paths 一致 - 别名插件只是“翻译器”，不读 tsconfig 就不知道 @ 到底指向哪 —— 所以先配 config，再装插件
Live Server 和 Open in Browser 到底选哪个
Open in Browser 只是把文件用 file:// 协议打开，不走 HTTP，很多现代 API（如 fetch、service worker、CORS 相关逻辑）根本跑不起来；而 Live Server 启的是真实本地 HTTP 服务，还带热更新。
- 必须关掉
Open in Browser的 auto-reload 功能（它其实不会真 reload），避免和 Live Server 冲突 - Live Server 默认端口 5500，若被占，改
"liveServer.settings.port": 8080即可 - 注意：Live Server 不处理路由 history 模式，刷新 404 时需配
"liveServer.settings.CustomBrowserUrl": "http://localhost:8080/"并配合后端路由 fallback
真正卡住人的，往往不是“该装什么”，而是“装了但没配对”——比如 Volar 的 Take Over Mode、ESLint 和 Prettier 的控制权归属、别名路径和 tsconfig 的映射一致性。这些地方一错，插件就变成摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
