怎么在VSCode中使用Quokka.js_VSCode JavaScript实时运行与输出-VSCode-PHP中文网

quokka.js 安装后无反应需确保文件为已保存的 .js/.ts/.jsx/.tsx 类型，并手动触发 cmd+k q 或通过命令面板启动；remote 开发须在远程环境安装扩展；实时更新依赖独立表达式加 //?，避免副作用；模块需用 es import 且项目含 package.json；配置应通过项目级 .quokka 文件指定 ts/node 版本及参数。

怎么在vscode中使用quokka.js_vscode javascript实时运行与输出

Quokka.js 安装后没反应，`Cmd+K Q` 没输出？

Quokka 默认不自动激活，必须手动触发或配置文件关联。常见原因是未在支持的文件类型中打开（比如纯 .txt 或未保存的 Untitled 文件），或者 VSCode 正在使用 Remote-SSH / WSL 但 Quokka 未启用对应扩展支持。

实操建议：

确保当前编辑的是 .js、.ts、.jsx 或 .tsx 文件，且已保存（有实际路径）
按 Cmd+K Q（macOS）或 Ctrl+K Q（Windows/Linux）启动 Quokka；若无效，用 Cmd+Shift+P 输入 Quokka: Start on Current File 手动运行
检查右下角状态栏是否出现 Quokka.js 状态图标 —— 没出现说明未启动成功
Remote 开发时，需在远程环境中也安装 Quokka 扩展（VSCode 会提示“Install on SSH”）

代码写完不实时更新，`//?` 输出消失或滞后？

Quokka 的实时性依赖「可执行上下文」和「无副作用表达式」。它不是完整 Node.js 运行时，不会执行 console.log 以外的副作用（如修改全局变量、发起网络请求），也不会重新运行整个文件——只增量计算被修改行附近的表达式。

实操建议：

把想观察的值写成独立表达式，并加 //? 后缀，例如：arr.map(x => x * 2) //?
避免在 //? 行上方写有副作用的语句（如 arr.push(1)），否则 Quokka 可能跳过该行或报错 ReferenceError
函数定义后要调用才出结果：const double = x => x * 2; double(5) //? ，只写 double 不会执行
异步代码需显式标记：await fetch('/api') //? 或 (async () => { ... })() //?

遇到 `Cannot find module 'xxx'` 或 `require is not defined`？

Quokka 默认使用轻量沙箱，不加载 node_modules，也不支持 CommonJS 全局 require。报错本质是模块解析失败，而非环境缺失。

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

实操建议：

优先用 ES import：例如 import _ from 'lodash'; _.chunk([1,2,3], 2) //? （前提是项目根目录有 package.json 且已安装 lodash）
不推荐在 Quokka 中测试依赖复杂的模块（如 React 组件、数据库驱动），它不适合替代 Jest 或真实服务端环境
需要 Node.js 内置模块（如 fs）？在 Quokka 配置中启用 node: true（见下一节），但注意这会禁用浏览器兼容模式
自定义模块路径报错？确认 jsconfig.json 或 tsconfig.json 已存在且 "baseUrl" 配置正确，Quokka 会读取它们

如何让 Quokka 使用项目里的 `tsconfig.json` 或 Node.js 版本？

Quokka 默认用内置 TypeScript 编译器和 Node 18，与你本地项目可能不一致，导致类型推导错误或语法报错（如 ??= 不识别）。

实操建议：

在项目根目录新建 .quokka 配置文件（JSON 格式），指定运行参数：

{
  "babel": false,
  "env": {
    "params": ["--experimental-specifier-resolution=node"],
    "NODE_OPTIONS": "--enable-source-maps"
  },
  "ts": {
    "compilerOptions": {
      "target": "ES2022",
      "moduleResolution": "node"
    }
  }
}

想强制用本地 Node：在 .quokka 中加 "node": "path/to/your/node"（如 /usr/local/bin/node）
TS 项目务必确保 tsconfig.json 存在且含 "include" 字段（如 ["**/*.ts"]），否则 Quokka 可能忽略类型定义

复杂点在于：Quokka 的配置是 per-project 的，跨项目复制 .quokka 文件比改 VSCode 全局设置更可靠；另外，它对 exports 字段和 package exports mapping 支持有限，遇到 ERR_PACKAGE_PATH_NOT_EXPORTED 就得降级到直接 import 具体路径。