prettier 和 eslint 必须同时安装，因二者职责不同：prettier 专注代码格式化（如引号、缩进），eslint 负责逻辑错误检测与质量检查（如未定义变量、赋值误用等），缺一不可；单独使用任一工具均无法兼顾格式统一与代码健壮性。
为什么 Prettier 和 ESLint 必须同时装
只装 Prettier 会格式漂亮但不报错，只装 ESLint 会标红一堆问题却不会自动修复排版。两者职责不同，缺一不可。
常见错误现象：保存后代码缩进变整齐了，但 console.log 没删、unused variable 还在，说明只配了格式化没配检测；或者改完代码满屏红色波浪线，但光标停在 if (a = b) 上却不提醒，说明 ESLint 规则没启用或冲突未解决。
-
prettier管样式：单引号/双引号、换行位置、括号是否换行 -
eslint管逻辑：变量未定义、赋值误写成等号、箭头函数返回对象漏括号 - 必须加
eslint-config-prettier关闭 ESLint 中和 Prettier 冲突的规则，否则保存时会来回打架 - 推荐配置中
"editor.defaultFormatter"设为"esbenp.prettier-vscode"，且开启"editor.formatOnSave"
Vue3 项目里 Volar 和 Vue VSCode Tools 怎么选
Volar 是 Vue 官方推荐的现代 Vue 工具链核心插件，Vue VSCode Tools 是旧时代产物，2026 年已基本淘汰。
如果你用的是 Vue3 + TypeScript + <script setup></script>，Volar 提供完整的类型推导、组件自动导入、模板表达式类型检查；而 Vue VSCode Tools 对 <script setup></script> 支持弱，跳转不准，甚至无法识别 defineProps 类型。
-
Volar需配合typescript-vue-plugin（内置）才能启用模板内类型提示 - 禁用
Vetur—— 它和Volar会冲突，VS Code 提示“多个语言服务器激活”时就是它在作祟 - 若项目含 Vue2 代码，需手动在
settings.json中关闭volar.ignores对.vue的全局启用，避免旧文件报错
路径跳转失效？别名（@/、~/）点不开的真正原因
不是插件没装，而是 VS Code 默认不认识 @ 这种别名——它只认真实文件系统路径，@/api/user 这种写法需要额外告诉编辑器“@ 指向 src 目录”。
常见错误现象：按住 Ctrl 点击路径无反应，或跳转到错误目录；Path Intellisense 能补全路径但跳转仍失败。
- 根本解法是配置
jsconfig.json或tsconfig.json中的"baseUrl"和"paths" -
vue-alias-skip这类插件只是“绕过”问题，不解决底层映射，团队协作时别人不装就失效 - 例如：
"paths": { "@/*": ["src/*"] }，且"baseUrl": "."必须存在，否则无效 - 配置完需重启 VS Code 或重新加载窗口（
Ctrl+Shift+P→Developer: Reload Window）
Live Server 和 REST Client 不是“可选”，而是调试刚需
不用 Live Server，你就得手动开终端 npx http-server 或刷新浏览器五次才能看到 HTML 修改效果；不用 REST Client，就得切出 VS Code 去 Postman 打请求，输 URL、Header、Body 重复劳动。
这两个插件的坑不在安装，而在默认行为不符合直觉：
-
Live Server默认端口5500，若本地已有服务占用了，它不会自动换端口，而是启动失败且无提示——需手动设"liveServer.settings.port": 0（0 表示随机） -
REST Client发送请求前必须保存.http文件，否则报错Request must be saved before sending - 建议把常用接口存成
api.http，用###分隔不同请求，比 Postman 的 collection 更轻量易维护
别指望一个插件解决所有问题。路径跳转靠配置，格式靠 Prettier，质量靠 ESLint，调试靠 Live Server 和 REST Client——它们各自守好一段链路，断掉哪一环都会卡住真实开发节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
