Quokka.js支持编辑器内实时执行JS并显示结果，需注意环境切换和语法限制；ESLint与Prettier须正确配置避免冲突；REST Client可轻量调试API；Turbo Console Log提升日志效率；插件宜精不宜多。
Quokka.js：写 JS 时立刻看到执行结果
它不是 REPL，也不是终端运行，而是直接在编辑器里实时显示变量值、表达式结果和错误信息——只要光标停在某行，右边就自动浮现 → undefined 或 → "hello" 这类反馈。
常见错误现象：Quokka: Cannot find module 'fs' —— 默认运行在 Node 环境，但你开了浏览器上下文（比如用了 window）；反之亦然。解决办法是右键文件 → Quokka: Start on Current File，或按 Ctrl+Shift+P 输入 Quokka: Set Environment 切换为 browser 或 node。
- 适合快速验证数组方法链、async/await 执行顺序、对象深拷贝行为
- 不支持 import/export 语法的全局作用域（需用
require或开启 ES modules 支持） - 免费版限制单文件运行时长，复杂逻辑建议用
quokka.config.json配置maxExecTime
ESLint + Prettier：代码检查和格式化别再手动选了
两者必须配合使用，否则 eslint --fix 可能和 prettier 冲突，导致保存后代码反复“抖动”。关键不是装插件，而是配置对。
容易踩的坑：eslint-config-prettier 必须作为 extends 的最后一项；prettier 插件不能启用自带的格式化规则（关掉 prettier.eslintIntegration，新版已移除该选项，改用 "editor.defaultFormatter": "esbenp.prettier-vscode"）。
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 在
.eslintrc.js中确保包含'prettier'和'prettier/react'（若用 React） -
settings.json里设"editor.formatOnSave": true，但只对javascript、typescript、vue等语言生效，避免误格式化 JSON 或 Markdown - 如果项目用 Vite，注意
vite-plugin-eslint和 VSCode ESLint 插件可能重复报错，关掉一个即可
REST Client：不用切出编辑器发 HTTP 请求
比 Postman 轻量，比 curl 直观，适合调试接口、验证响应结构、甚至做简单自动化测试。
典型错误：Cannot resolve variable 'baseUrl' —— 变量没定义或拼写错误；Request timeout —— 默认超时是 10 秒，大文件上传需加 @timeout = 60000。
- 请求写在
.http或.rest文件里，支持环境变量（@host = https://api.example.com）、多请求分组、响应体高亮 - 响应可直接点击
Save Response存为 JSON 文件，或右键Insert Response Body粘贴到当前编辑器 - 不支持 cookie 持久化跨请求（除非手动 set-cookie + 后续请求带 header），复杂流程建议用 Postman
Turbo Console Log：别再手敲 console.log('xxx', xxx)
选中变量名，快捷键 Ctrl+Alt+L（Windows）或 Cmd+Alt+L（macOS），自动生成带变量名和值的 log 行，比如 console.log('user', user);。
为什么值得用：它会自动识别作用域，避免 console.log(user) 输出 undefined 却不知道是变量名写错还是真没定义；多光标下每行都能独立生成 log。
- 支持自定义模板，例如加时间戳：
console.log('[%s] %s:', new Date().toISOString(), '%%', %%); - 默认输出到
console.log，也可切换为debugger或console.table - 不推荐在生产构建前全删 log —— 更好做法是用
/* eslint-disable no-console */注释块控制，或配置no-console规则为 warn
真实项目里，插件越多越容易冲突。比如 Bracket Pair Colorizer 2 和 VSCode 原生括号高亮同时启用，可能让配对线重叠；Import Cost 在大型 monorepo 里会拖慢打开速度。选 3–5 个解决你当前最痛的点，比堆满插件列表更有效。
