vscode插件—— Quokka.js的简单使用

8,361 阅读1分钟

说在前面

最近想搞点面试编程题什么的练练手,可只是要查看结果还要打开浏览器的话又有些麻烦,便想找找有什么可以直接在IDE上查看结果的方法么...

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

开始

关于版本

有社区版和免费版,俺用免费版

下载

image.png

简单动手

新建quokka文件

  1. ctr+shihft+p 输入Quokka -> 选择new file

也有快捷键,开始常用的如下:

  1. Cmd/Ctrl + K, J新建js文件,Cmd/Ctrl + K, T新建ts文件
  2. 更多信息ctr+shihft+p 输入Quokka 里面一一查看

查看运行后的值

pro版本可以直接 在语句后面加上//?即可实时查看运行得出的值

社区版则要用上console.log()才能查看。

实时覆盖功能

quokka.js运行后,可以在编辑器的左边 看到代码的覆盖状态。

  • 灰色 - 代表没有被执行
  • 绿色 - 代表已经被执行
  • 黄色 - 代表仅部分被执行,也就是逻辑表达式或三元运算符那些。
  • 红色 - 代表该源码行是错误的来源,或者在是错误的堆栈中

其他的

目前我还用不到(pro版本没买😥

总结

适合简单的一些js语句练习,比如什么什么js手写高频面试编程题,以及刚开始学习js的同学也可以用来写写小demo。