如何在 VSCode 中使用 Quokka.js 实时运行并显示变量值

胖枫君_2224

胖枫君_2224

2026-06-18

1009人浏览

原创

quokka.js 在 vscode 中不显示变量值最常见的原因是未手动启动——安装插件后需右键选择 start on current file 或按 ctrl+k q,且文件类型需匹配默认支持的 .js/.ts 等扩展名,esm 项目还需启用 "quokka.esm": true。

如何在 vscode 中使用 quokka.js 实时运行并显示变量值

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 不是“执行一遍然后停住”,而是持续监听变更并重跑作用域块。所以变量是否能被标记、是否能显示值,取决于它是否处于可访问的执行上下文里。

dmap-jsapi-skill
dmap-jsapi-skill

DMap GL地图JSAPI(dmapgl)开发指南。用于编写、审查、调试 DMap 地图 API 代码,涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载
  • 函数内部的变量(如 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 用,而要当成“带即时反馈的沙盒脚本环境”。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

vscode js

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

4356

8

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.07.28

1335

5

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1738

5

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

2023.08.17

9903

11

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

960

4

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

2684

5

Js中concat和push的区别
Js中concat和push的区别

Js中concat和push的区别:1、concat用于将两个或多个数组合并成一个新数组,并返回这个新数组,而push用于向数组的末尾添加一个或多个元素,并返回修改后的数组的新长度;2、concat不会修改原始数组,是创建新的数组,而push会修改原数组,将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.14

1549

5

js截取字符串的方法介绍
js截取字符串的方法介绍

JavaScript字符串截取方法,包括substring、slice、substr、charAt和split方法。这些方法可以根据具体需求,灵活地截取字符串的不同部分。在实际开发中,根据具体情况选择合适的方法进行字符串截取,能够提高代码的效率和可读性 。

2023.09.21

4609

3

js生成随机数方法
js生成随机数方法

JavaScript生成随机数的方法,包括使用Math.random()方法生成指定范围内的随机整数、生成随机字符串和生成随机颜色。根据具体需求,可以选择适合的方法来生成随机数,以实现各种功能 。

2023.09.25

2655

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程