ESLint 与 Prettier 需通过 eslint-config-prettier 禁用格式冲突规则，Prettier 统一格式化、ESLint 仅报错；Vue 3 项目必须用 Volar 而非 Vetur；Quokka 适合实时调试，Code Runner 适合单次执行；Live Server 需确保 HTTP 协议及正确 webroot。
ESLint + Prettier 怎么配才不打架
ESLint 和 Prettier 一起用，最常遇到的是保存时格式反复“抖动”、标红不消失、editor.formatOnSave 失效。根本原因是两者规则重叠，比如 ESLint 要求分号，Prettier 不要，编辑器来回改。
- 必须装
eslint-config-prettier，并在.eslintrc.js的extends末尾加上它，禁用所有与格式相关的 ESLint 规则 -
settings.json中设"editor.defaultFormatter": "esbenp.prettier-vscode"，别让 ESLint 插件抢格式化权 - 关掉
eslint.autoFixOnSave，只留editor.formatOnSave，由 Prettier 统一格式化，ESLint 只负责报错 - Vue 项目额外加
plugin:vue/vue3-essential（不是vue3-recommended），避免v-for必须带key这类强约束干扰开发节奏
Volar 和 Vetur 到底选哪个
Vue 3 项目硬装 Vetur 会直接导致 <script setup> 无法识别 props 类型、defineProps 报错、模板内变量无提示——这不是配置问题，是架构不兼容。
- 新 Vue 3 项目（含
create-vue脚手架）只装Volar，卸载 Vetur；Volar 已内置类型检查和模板编译支持 - 老项目从 Vue 2 升级上来，若还混用 Options API，可暂时保留 Vetur，但需关掉它的格式化功能，否则和 Prettier 冲突
- 务必在
settings.json加上"volar.ignoreProjectAndWorkspaceConfiguration": false，否则 Volar 会忽略项目根目录的tsconfig.json路径别名配置
Quokka.js 和 Code Runner 用法差异在哪
两者都能跑 JS 片段，但 Quokka 是「实时沙盒」，Code Runner 是「单次执行器」。写工具函数、测算法逻辑时选错，效率差一倍。
- Quokka 适合：边写边看变量值变化，比如
const res = arr.map(x => x * 2); // → [2,4,6]直接标在行尾；支持console.log实时输出，也支持异步 await - Code Runner 更适合：一次性跑完整文件（如
node index.js），或快速验证某段粘贴过来的脚本，不依赖上下文环境 - 注意：Quokka 默认不读取项目
node_modules，要用第三方库得手动配quokka.nodeArgs或改用ts-node模式
Live Server 启动后页面空白或跨域报错
点右键「Open with Live Server」后白屏，控制台报 CORS 或 net::ERR_FILE_NOT_FOUND，多数不是代码问题，而是路径或服务配置偏差。
- 确保 HTML 文件在项目根目录下启动，否则 Live Server 默认以该文件所在目录为 webroot，相对路径全乱
- 如果用了
import或fetch，必须用http://协议访问（Live Server 自动开http://127.0.0.1:5500），不能双击打开file://协议文件 - 需要代理后端接口？在
.vscode/settings.json加"liveServer.settings.proxy": { "enable": true, "proxy": { "/api": "http://localhost:3000" } }
Volar 的类型推导和 Quokka 的实时反馈，这两块最容易被当成“锦上添花”跳过，结果调试时花三倍时间查 undefined 或手动补 console——它们不是插件，是 JS 开发的呼吸感。
