vscode插件 - quokka

什么是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"
    }
}