quokka插件没反应需先确认是否激活:必须手动启动,仅支持.js/.mjs文件或esm配置,状态栏显示绿色quokka图标才生效;console.log不内联显示,需用return或/*?/触发求值;node版本、运行时配置及代码块分隔符(//===)影响执行结果。

Quokka 插件没反应?先确认它真在运行
装完 Quokka 后按 Cmd+K Q(macOS)或 Ctrl+K Q(Windows/Linux)没弹出结果,大概率是它根本没激活。Quokka 不会自动监听所有文件,必须手动触发——哪怕你已经在写 .js 文件里。
- 确保当前打开的是纯 JavaScript 文件(
.js、.mjs或带"type": "module"的package.json下的文件),Quokka 默认不处理.ts、.jsx或未保存的临时文件 - 右键编辑器空白处,选
Quokka: Start on Current File,比快捷键更可靠 - 状态栏右下角出现
Quokka.js且带绿色圆点,才算真正跑起来了;灰色或无标识=没生效
console.log() 不显示?试试用 return 或 /**?*/
Quokka 默认只显示表达式求值结果,不是完整执行控制台日志。直接写 console.log('hello') 会静默执行,但你看不到输出。
- 想看值:把要观察的变量或表达式单独一行写,比如
arr.length、user.name,Quokka 会在行尾实时标出结果 - 想强制输出:用
return语句,例如return { a: 1, b: 2 };,结果会浮在右侧 - 更灵活的方式:在任意位置加
/**?*/,比如getData() /**?*/,Quokka 会在此处求值并内联显示 - 注意:
console.log()本身仍会输出到 VSCode 底部的 Quokka 输出面板(不是终端),只是不内联
Node 版本或 ES 特性报错?检查 quokka.config 和运行时环境
遇到 SyntaxError: Unexpected token 'const' 或 ReferenceError: require is not defined,通常是 Quokka 用错了运行时,比如该用 Node 却走了浏览器沙箱,或用了太老的 Node 版本。
- 默认情况下,Quokka 使用 VSCode 绑定的 Node.js(可通过
which node或node -v确认),但项目级配置可覆盖它 - 在项目根目录加
quokka.config.json,指定"node": "/usr/local/bin/node"或启用 ESM:"babel": true(需本地有@babel/preset-env) - 如果代码含顶层
await或import,必须设"runner": "node"并确保 Node ≥ v14.8,否则会报错 - 浏览器模式(
"runner": "browser")不支持fs、require,也读不到本地node_modules
为什么改了代码,右侧结果没更新?缓存和作用域陷阱
Quokka 是增量执行的,但它不会重新初始化整个模块上下文。上一次运行留下的变量、函数定义,很可能影响下一次结果——这不是 bug,是设计如此。
- 最常见表现:第一次写
let count = 0; count++显示1,再按一次快捷键,它变成2,而不是重置回1 - 解决方法:加
// ===注释分隔「代码块」,Quokka 遇到它会清空前面的上下文,相当于重启沙箱 - 另一个坑:异步代码(如
setTimeout、fetch)不会被 Quokka 自动等待,除非显式用await或/**? await */标记 - 别依赖全局副作用——比如在 Quokka 里改了
window.xxx,别指望它影响其他标签页或真实页面
Quokka 的实时性建立在轻量沙箱之上,它不模拟完整生命周期,也不做模块热替换。你看到的“即时”,背后是刻意省略了很多工程化环节。用它快速验逻辑没问题,但一旦涉及状态累积、模块导入顺序、或跨文件依赖,就得切回真实运行环境验证。











