必须启用vscode的editor.formatonsave和editor.defaultformatter，否则eslint+prettier形同虚设；需配置"esbenp.prettier-vscode"为默认格式化器，并在.eslintrc.js中extend 'prettier'以禁用冲突规则。
ESLint + Prettier 组合必须启用保存自动格式化
不配 editor.formatOnSave 和 editor.defaultFormatter，等于装了没用。很多新手装完插件就以为万事大吉，结果写完代码还是缩进混乱、分号乱飞。
常见错误现象：Ctrl+S 后无反应、格式化后引号变双引号（而团队要求单引号）、const 被改成 var。
- 必须在
settings.json中明确指定："editor.defaultFormatter": "esbenp.prettier-vscode" - 开启格式化：
"editor.formatOnSave": true - 关闭 ESLint 与 Prettier 冲突规则：安装
eslint-config-prettier并在.eslintrc.js的extends末尾加上'prettier' - 若项目用 TypeScript，还需加
plugin:@typescript-eslint/recommended，否则any类型不会报错
Auto Rename Tag 在 JSX/Vue 中失效？检查 language mode
插件只对当前 editor 的 language mode 生效。你在 .jsx 文件里改 <mybutton></mybutton>，但右下角显示的是 Plain Text，那闭合标签根本不会同步。
使用场景：React 函数组件重命名、Vue 单文件组件中修改自定义标签、HTML 模板嵌套结构调整。
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- 手动切换 language mode：右下角点击语言名 → 选
JavaScript React或Vue - 确认配置生效：
"auto-rename-tag.activationOnLanguage": ["javascriptreact", "vue", "html"]（注意不是jsx） - Vue 中若用
<script setup></script>，确保插件版本 ≥ 0.1.10，旧版不识别该语法块内的标签 - 别和
Volar插件冲突——Volar 自带标签重命名能力，两者同时启用可能导致重复触发
Live Server 比 Open in Browser 更适合现代前端开发
Open in Browser 只是打开文件 URL（file://），而现代前端依赖 http:// 协议才能加载模块、读取 API、避免跨域限制。不切到 Live Server，连 import 都会报错。
性能影响：热重载延迟取决于项目体积。小型 HTML/CSS/JS 项目几乎无感；含 Webpack/Vite 构建步骤的项目，需配合其 dev server，而非直接用 Live Server。
- 启动方式：右键 HTML 文件 →
Open with Live Server（不是“Open in Default Browser”） - 端口冲突时，改
"liveServer.settings.port": 3001，避免被本地 Node 服务占用 - 如需调试控制台日志，记得开浏览器开发者工具的
Disable cache，否则 JS 修改可能不生效 - 不建议在 Vue/React 项目根目录直接启 Live Server——它无法解析
.vue或jsx，应只用于纯静态原型验证
Quokka.js 是调试 JS 表达式的最快路径
不用打断点、不用写 console.log、不用起服务，光标停在哪，哪的值就实时显示。适合验证数组方法链、对象解构、Promise 状态、正则匹配结果。
容易踩的坑：默认只对 .js 文件生效，.ts 需额外配置；变量作用域外的引用会标红，不是 bug，是它真正在执行。
- 启动方式：
Ctrl+Shift+P→ 输入Quokka: Start on Current File - 临时禁用某行计算：在行尾加
// q!（注意空格） - 想看异步结果？直接写
await fetch('/api/user').then(r => r.json())，Quokka 会等 Promise settle 后显示结果 - 不支持 DOM 操作（
document.querySelector报错），但它本来就不该干这事——那是浏览器环境的事
@typescript-eslint，ESLint 就形同虚设。别迷信“必装清单”，先看你的 package.json 里到底用了什么。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
