Quokka.js 在 VSCode 中不显示变量值最常见的原因是未手动启动——安装插件后需右键选择 Start On Current File 或按 Ctrl+K Q，且文件类型需匹配默认支持的 .js/.ts 等扩展名，ESM 项目还需启用 "quokka.esm": true。
Quokka.js 为什么在 VSCode 里不显示变量值
最常见原因是 Quokka 没真正激活——它不是装完插件就自动运行的，必须手动触发。你写 const a = 1，光保存文件或按 Ctrl+S 没用；Quokka 默认只在「当前编辑器有 Quokka 文件标识」且「显式启动」时才注入实时计算逻辑。
确认是否启用：看 VSCode 右下角状态栏有没有 Quokka.js 字样（灰色表示未运行，绿色表示已运行）。没有？说明还没启动。
- 右键编辑器空白处 → 选
Start On Current File（或按快捷键Ctrl+K Q） - 确保当前文件是支持类型：默认识别
.js、.ts、.jsx、.tsx；如果是.mjs或无后缀脚本，需在设置里加quokka.jsFileExtensions - 如果用了 ESM（
import语法），得配"quokka.esm": true，否则会报Cannot use import statement outside a module
变量值不显示 / 显示为 undefined 的典型场景
Quokka 不是“执行一遍然后停住”，而是持续监听变更并重跑作用域块。所以变量是否能被标记、是否能显示值，取决于它是否处于可访问的执行上下文里。
- 函数内部的变量（如
function f() { const x = 42; }）不会显示——Quokka 默认只标记顶层语句和表达式的结果 - 用
let/const声明但没赋值（let a;），会显示undefined，这是 JS 行为，不是 Quokka bug - 异步代码中直接写
console.log(promise)不会等 resolve，要改用await或$语法：$(async () => await fetch('/api')) - 对象属性修改后不刷新？Quokka 默认不深监听，
obj.a = 2不会自动更新obj的预览，得重新写一行obj才触发
如何让复杂值（数组、对象、Promise）清晰显示
Quokka 对简单值（数字、字符串、布尔）自动内联显示，但对引用类型，默认只显示构造器名或 [object Object]。想看到结构，得主动“触发求值”。
- 在变量名后加分号（
users;），Quokka 就会把它的JSON.stringify结果贴在右边 - 用
console.log()也能输出到 Quokka 控制台（面板底部），但不会内联；适合调试中间态 - 对 Promise，写
await apiCall();（注意前面不能是const res = await ...，赋值语句本身不触发显示） - 开启
"quokka.showAsyncValues": true后，await表达式结果会自动内联，但可能拖慢响应速度，大项目建议关闭
VSCode 设置和常见冲突点
Quokka 运行依赖 Node.js 环境和 VSCode 的插件通信机制，某些配置会静默禁用关键功能。
- 检查
settings.json是否误设了"quokka.enabled": false（搜索关键词即可） - 使用 Prettier 或 ESLint 自动保存格式化时，可能把
arr;这类“无用语句”删掉——关掉prettier.removeTrailingCommas或加// quokka注释保活 - 工作区启用了
typescript.preferences.includePackageJsonAutoImports？某些 TS 版本下会导致 Quokka 启动卡死，临时关掉试试 - Mac 上遇到
spawn node ENOENT？说明 Quokka 找不到 Node，去设置里填绝对路径："quokka.nodePath": "/opt/homebrew/bin/node"
Quokka 的实时性建立在“轻量重跑”上，它不会模拟完整模块加载或生命周期，所以 class、export、require 等模块系统行为容易出预期外结果——别把它当 REPL 用，而要当成“带即时反馈的沙盒脚本环境”。
