Quokka 默认不支持 TypeScript 文件直接运行，因其仅识别 .js 和 .mjs 文件；需在项目根目录配置 quokka.config.json 并安装 typescript 与 @babel/preset-typescript，启用 TS 编译及 Node 运行时，否则 .ts 文件被静默跳过、无图标、无响应。
Quokka 默认不支持 TypeScript 文件直接运行，必须显式启用 TS 支持并配置运行时环境，否则打开 .ts 文件只会静默失败或报错“Cannot use import statement outside a module”。
为什么 .ts 文件里 Quokka 没反应？
Quokka 默认只识别 .js 和 .mjs 文件；遇到 .ts 文件会跳过，状态栏不显示绿色图标，也不报错——它根本没尝试运行。这不是插件坏了，是默认策略。
- 右键菜单里没有
Quokka: Start on Current File选项 → 当前文件类型未被识别 - 按
Cmd+K Q或Ctrl+K Q无响应 → Quokka 未注册该语言的启动逻辑 - 即使手动选了
Quokka: New JavaScript File，粘贴 TS 代码也会 SyntaxError → 缺少 TS 编译步骤
怎么让 Quokka 正确运行 TypeScript 代码？
核心是告诉 Quokka：这不是 JS，要先用 TypeScript 编译器转成 JS，再交给 Node 执行。需两步落地：
- 在项目根目录新建
quokka.config.json，内容至少包含：{ "babel": true, "runner": "node", "env": { "type": "node" } } - 确保本地已安装
typescript和@babel/preset-typescript（不是全局，是项目级）：npm install --save-dev typescript @babel/preset-typescript @babel/core
- 如果用了
import type、const enum或路径别名（@/utils），还需在tsconfig.json中设"compilerOptions": { "declaration": false, "isolatedModules": true }，否则 Babel 会解析失败
console.log() 和内联值都不显示？检查这三个点
TypeScript 场景下，日志和求值失效往往不是 Quokka 问题，而是类型擦除或执行上下文错位导致：
-
console.log()输出只出现在 VSCode 底部的QUOKKA输出面板，不会内联 → 想看内联结果，改用return或加/**?*/，例如：getUser() /**?*/ - 写
let x: string = 'hello'; x不显示值 → TypeScript 声明语句本身不是表达式，Quokka 不求值；改成const x = 'hello'; x或直接'hello' - 用了
async函数但没await→ Quokka 默认不自动await，必须写await fetchData() /**?*/，否则显示的是Promise对象而非结果
常见报错及对应解法
这些错误信息出现时，基本能定位到具体配置缺失环节：
-
SyntaxError: Cannot use import statement outside a module→quokka.config.json里漏了"runner": "node"，或 Node 版本 node -v ≥ v14.8 -
ReferenceError: require is not defined→ 错用了"runner": "browser"；TypeScript 项目必须用"runner": "node" -
Cannot find module '@utils/helper'→ 路径别名未被 Babel 解析；在quokka.config.json的babel字段里加"plugins": ["@babel/plugin-transform-typescript"]，并配好baseUrl/paths
最易被忽略的是：Quokka 的 TS 支持完全依赖项目本地的 node_modules，它不读取全局安装的 typescript 或 @babel 包——哪怕你 npm install -g 了也没用。
