什么是quokka?
Quokka.js 是一个用于快速开发javascript或typescript的开发者工具。它能在你键入代码的时候，实时将运行的值更新或展示在你的IDE上。

quokka版本

Quokka Community（社区版） 免费的
Quokka Pro（增强版） 收费的，但是新增了一些功能，比如性能测试等。

新建quokka文件

1. ctr+shihft+p 输入Quokka -> 选择new file
2. Cmd/Ctrl + K, J新建js文件， Cmd/Ctrl + K, T新建ts文件

实时记录打印或比较

1. 你可以使用console.log或者标示表达式（就是书写一个普通变量名）来打印任何值信息

1. 你可以使用一系列表达式来比较对象

备注：请注意当你使用标示表达式打印信息时，当你显示的属性数量和打印对象遍历深度，你可能会遇到一些限制。
你可以通过console.log()来解决这个问题

实时代码覆盖：

一旦quokka.js运行，你便可以在编辑器的左侧装订线（边框）看到代码的覆盖。覆盖是实时的，只要你改动代码就会自动更新。

• 灰色 - 代表没有被执行
• 绿色 - 代表已经被执行
• 黄色 - 代表仅部分被执行，Quokka支持分支代码覆盖级别，因此如果一行包含逻辑表达式或三元运算符均有覆盖（执行）和未覆盖（未执行）分支的，则它将以黄色装订线指示器显示
• 红色 - 代表该源码行是错误的来源，或者在是错误的堆栈中

Value Explorer（实时值浏览器）

简介

Value Explorer 会以一种导航树的形式实时展示 console.log，identifier expressions, live comments, and the Show Value command所记录打印的信息

右击菜单

1. 复制值
2. 复制路径

节点自动展开（pro版本才有）

在Identifier Expressions and Live Comments后面加上注释//?+ 或 /?+/

VS CODE实施共享集成

这是个很实用的功能，特别是在授课的时候，开发一般不会关心这个功能。这里就不展开介绍了。

Interactive Examples（互动示例）

Wallaby.js团队策划了一组交互式示例，我们在新建quokka文件的时候可以使用，这对一些新手或者一些有经验的开发者的学习很有帮助。

Live Comments（实时评论）(需要pro版本)

虽然console.log在显示值方面可能做得很好，但有时您可能需要在表达式中间看到值。
例如，给定一个a.b().c().d()链，您可能想在调用.d()之前检查a.b().c()的结果。
记录任何表达式的最强大方法是在要记录的表达式之后立即使用特殊注释。

Live Value Display(实时值展示)（需要pro版本）

简介

尽管“实时注释”功能提供了记录表达式值的绝佳方法，并且在更改代码时将始终显示值，但有时您可能希望在不修改代码的情况下显示或捕获表达式值。“Show Value”和“Copy Value”功能使您可以做到这一点。
要使用这些功能，在调用命令时，需要选择正在记录的表达式，或者光标位置必须在表达式之后。就像您在光标所在的位置插入实时注释一样。使用“Show Value”或“Copy Value”并更改代码后，“实时值”显示将被删除。

Show Value（显示值）

如果你想要快速的现实某些表达式的值，又不需要改变代码。实时值显示允许您通过在编辑器中或使用特殊命令（“Show Value”命令，或使用Cmd + K，V键盘快捷键）选择一个表达式来执行此操作。

Copy Value（拷贝值）

如果要在不修改代码的情况下将表达式值复制到剪贴板，则“实时值显示”可让您使用特殊命令（“Show Value”命令或Cmd + K，X键盘快捷键）执行该操作。

项目文件导入

Quokka Community版本 允许您将任何本地安装的节点模块导入Quokka文件。
Quokka Pro版本 还允许从您的项目中导入任何文件

快速包导入

无需退出编辑器，该功能允许通过npm或yarn快速安装任何节点软件包，甚至不必输入入软件包名称，只要代码中已经有足够的信息。该软件包可能仅用于quokka文件环境安装，因此在您只是尝试写一些东西（测试代码等）时，不会浪费（影戏）您的node_modules文件夹。话虽如此，如果您想这样做，也可以将项目的node_modules作为目标。

(安装包部分为pro版)
您可以安装缺少的软件包，通过悬停消息或快捷键Cmd + K(只要有缺少的软件包)，或通过命令面板（Quokka.js：Install Missing Package ... 命令）或在quokka输出中的链接。

默认情况下，quokka使用npm install {packageName}命令。您可以通过在quokka配置中设置installPackageCommand值，将其更改为yarn add {packageName}：
{

"installPackageCommand": "yarn add {packageName}"

}

实时性能测试（pro）

该功能使您可以快速查看代码各部分的执行情况。这对于确定应用程序中可能存在的瓶颈以及进行性能优化，或者只是尝试观察不同事物的性能非常有用。

将注释添加到多次执行的表达式中（例如在循环内），将使该工具显示总执行时间，平均执行时间（总执行时间除以表达式执行的次数），最小和最大执行时间处理时间。

配置

Quokka.js默认不需要任何配置。它将使用系统的node.js运行您的代码。如果您不导入任何外部TypeScript模块，它也可能无需任何配置即可运行您的TypeScript代码。
如果您想使用Babel / React JSX，或者从Quokka文件中的项目中导入其他TypeScript文件，或者要覆盖tsconfig.json设置，则可以配置quokka.js。
如果您使用的是VS Code，则可以使用VS Code用户设置替代替代我们的编辑器显示设置。您可以在Settings -> Extensions -> Quokka.下的“ VS代码设置”编辑器中查看可覆盖的设置。

如果使用的是VS Code，则可以在VS Code用户设置（settings.json文件）中覆盖coverage指示器的颜色。下面的代码段显示了Quokka默认颜色的配置。

{
    ...

    "quokka.colors": {
        "covered": "#62b455",
        "errorPath": "#ffa0a0",
        "errorSource": "#fe536a",
        "notCovered": "#cccccc",
        "partiallyCovered": "#d2a032"
    }
}