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或者标示表达式(就是书写一个普通变量名)来打印任何值信息

image.png

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

image.png
image.png

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

实时代码覆盖:

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

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

image.png

Value Explorer(实时值浏览器)

简介

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

右击菜单

  1. 复制值
  2. 复制路径

image.png

节点自动展开(pro版本才有)

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

VS CODE实施共享集成

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

Interactive Examples(互动示例)

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

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

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

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作为目标。
image.png

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

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

"installPackageCommand": "yarn add {packageName}"

}

实时性能测试(pro)

该功能使您可以快速查看代码各部分的执行情况。这对于确定应用程序中可能存在的瓶颈以及进行性能优化,或者只是尝试观察不同事物的性能非常有用。
image.png
将注释添加到多次执行的表达式中(例如在循环内),将使该工具显示总执行时间,平均执行时间(总执行时间除以表达式执行的次数),最小和最大执行时间处理时间。

配置

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"
    }
}
Image placeholder
1359898074
未设置
  64人点赞

没有讨论,发表一下自己的看法吧

推荐文章
vue插槽详解

一、插槽内容一句话:插槽内可以是任意内容。先看一下下面的代码:声明一个child-component组件,如果现在我想在内放置一些内容,结果会是怎样? Vue.component('child

用vscode开发react用哪些插件

用vscode开发react用哪些插件1.代码提示类插件1.1Reactjscodesnippets1.2ReactReduxES6Snippets1.3React-Native/React/Redu

「解放双手」老舅教你VS Code Disco

观感度:🌟🌟🌟🌟🌟口味:驴肉蒸饺烹饪时间:15min这是最好的时代,也是最坏的时代。今年听到过最浪漫的一句话:我们在键盘上留下的余温,也将随时代传递到更远的将来。感觉让理性的技术人多了份柔光滤镜。也许

“margin:0 atuo;” 是什么意思?

推荐课程:CSS3基础视频教程#WEB前端必修课--学习猿地免费体验课 “margin:0atuo;”是什么意思? “margin:0atuo;”所代表的的意思是水平居中,其中的margin后面如果只

如何用vscode启动react项目

如何用vscode启动react项目要求:●具有nodejs环境、已安装npm●已安装vscode首先使用create-react-app脚手架创建一个项目。create-react-appdemo1

AWS vs K8s 是新时代的 Windows vs Linux?

作者:IanMiell是开源程序员、演讲师、作家和博客写手以前……如果你与我一样,年过四十,又在IT行业工作,恐怕还记得每个人使用Windows,一小群但越来越多的人在业余时间埋头编译Linux的年代

jQuery插件实现瀑布留布局masonry + infinitescroll 图片高度处理

课程推荐:Java开发工程师--学习猿地精品课程 jQuery插件实现瀑布留布局masonry+infinitescroll。使用官方的示例代码实际测试发现,当上传到服务器的时候,由于图片下载速度问题

视频流媒体服务器对接宇视摄像机OCX插件出现error code 14001错误分析

背景需求随着雪亮工程、明厨亮灶、手机看店、智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网、微信直播,我们知道摄像头直播的春天了。将安防摄像头或NVR上的视频流转成互联网直播常用的RTMP、HTT

vue 生成二维码插件 vue-qrcode

链接地址生成二维码安装https://www.npmjs.com/package...npm install --save qrcode.vue在组件中引入 importQrcodeVuefrom

理解 cookie、session、token、jwt

发展史 1、很久以前,Web基本上就是文档的浏览而已,既然是浏览,作为服务器,不需要记录谁在某一段时间里都浏览了什么文档,每次请求都是一个新的HTTP协议,就是请求加响应,尤其是我不用记住是谁刚刚发了

什么是jquery插件?

什么是jquery插件?jQuery插件,就是开发爱好者自己利用Jquery制作的特效,然后经过封包或包装处理成js文件,发布到网上供大家使用的脚本集合。通常这类插件除了调用jQuery库文件,还需要

如何使用jQuery的插件?

如何使用jQuery的插件?例如:需要使用表单插件,按下列步骤就可实现插件的调用:(1)在页面中导入包含表单插件的JS文件,并确定它定位与主jQuery库后,其代码如下: (2)在JS文件或页面J

beego 使用 coding 的 webhook 2.0 进行自动部署

beego使用coding的webhook2.0进行自动部署本文介绍beego在coding上如果使用webhook2.0进行自动部署。coding的webhook1.0教程coding平台端的设置这

Go编程语言教程_1.4. Go vs C++

C++是一种通用编程语言,如今已广泛用于竞争性编程。它具有命令式,面向对象和通用编程功能。C++在Windows,Linux,Unix,Mac等许多平台上运行Go是一种过程编程语言。它由Google的

Go编程语言教程_1.5. Go vs Java

Go是一种过程编程语言。它由Google的RobertGriesemer,RobPike和KenThompson于2007年开发,但于2009年作为一种开放源代码编程语言发布。程序通过使用软件包进行组

PHP-FPM vs Swoole

前几天看见有几篇讲swoole的文章,今天我也来凑个热闹。水平有限,细节理解可能不到位,欢迎大家帮我补充、纠正。 PHP-FPM 早期版本的PHP并没有内置的WEB服务器,而是提供了SAPI(Serv

defer vs return

defer看起来与try...catch类似,其实有许多不为人知的小技巧 defer官方行文defer先进后出,对return进行一些扫尾工作。这意味着使用该函数在返回值之前,defer函数内是可以

漫画 | 面试的我 VS 真实的我

作者:纯洁的微笑、孤独烟漫画师:栗子“面试造火箭,入职拧螺丝!”已经是各大互联网公司招聘的常态,为了应对如今越演越烈的面试形势,程序员一个个都变成了表演大师。俗话说面试如戏,全靠演技!HR篇01020

真实的北京IT圈:后厂村姑 vs 后厂村花?

上个月,我们深扒了《真实的上海IT圈:张江男vs漕河泾男》其实还存在另一群人与之本应相亲相爱却又似乎存在在平行世界互相保持着母胎SOLO的高傲姿态她们是北京后厂村IT女(人称“后厂村花”)在帝都北五环

神仙尬聊!哲学马云VS科技马斯克:生活就该每周工作12小时,开特斯拉玩遍三千城市

大数据文摘出品外星人马云的创业之路我们都很熟悉了,他在1999年创立阿里巴巴网站,正式走上了成为国内第一电子商务公司的道路。在美国还有另一位“外星人”为全球熟知,硅谷钢铁侠马斯克。提到他,大多数人会想

DPVS – 小米高性能负载均衡器

随着互联网的快速发展,负载均衡也承担着越来越重要的角色,对于小米这种快速发展中的年轻公司来说,负载均衡的稳定及高性能更是重中之重。本文将主要介绍小米基于DPDK的高性能负载均衡软件DPVS(DataP

开源社区的技术债:写代码的“码农”VS 删代码的“清道夫”,谁更该被嘉奖?

大数据文摘出品编译:楚阳、橡树、钱天培对于开源项目来讲,写新代码的贡献者不一定是好程序员,但不会删代码的程序员一定不是合格的程序员——因为“删代码”才是使开源软件项目的代码简洁高效的关键所在。Mong

哈登vs字母哥,看AI怎样预测今年NBA最有价值球员!

想必篮球爱好者们都非常关注今年的NBA季后赛,MVP的奖项投票结果尚未出炉,但估计各家球迷们心中各有定论了。所以我们来用机器学习预测一下今年MVP奖项的结果。 哈登(JamesHarden)和字母哥(

无服务器vs容器,企业如何正确选择?

对于开发者和企业架构师来说,在不同的技术、框架或架构之间做出选择,是日常工作中最重要的内容。尤其在今天复杂的企业应用环境下,软件开发规则也在时刻变化着,我们必须在软件开发之前就要考虑清楚系统的体系结构

过于真实的上海IT圈:张江男vs漕河泾男

通过比较上海各住宅小区在工作日晚餐与夜宵时段一人食外卖订单指数我们会发现:上海IT圈两大胜地:张江高科和漕河泾双双上榜其中张江位列《上海最孤独的15个区域榜单》第一名真实的上海IT圈大揭秘《张江男 v