Set Up a Live Scratchpad for JavaScript in VSCode using Quokka
In this lesson, you'll learn how to set up a "live scratchpad" for JavaScript using an extension called Quokka. Similar to JS Bin, CodePen, or CodeSandbox, Quokka lets you run some JavaScript code right from VSCode without leaving your text editor.
This is a handy tool for debugging or isolating code when you want to quickly test something out.
To learn more about Quokka, check out their website at quokkajs.com.
Instructor: [0:00] Inside of VS code, go to the Extensions tab on the left, and then search for Quokka. Then you'll click Install, and you can close the sidebar, close the extension, and then you're going to go to View, Command Palette. Or you can access the Command Palette by using the keyboard shortcut, Command-Shift-P.
[0:24] Then we're going to search for "Quokka New JavaScript File." This will open a new JavaScript file, and on the right, it should open up Quokka in the output menu.
[0:35] This tells us that it's running Untitled-1, our new JavaScript file using that version of Node printed to the right. Now we can start writing some code.
[0:46] I'm going to write a function, sayHello, which takes one parameter, a name. It's going to console log "Hello, name from the world of Quokka." Then I can call that function. You'll see to the right, our log printed out.
[1:13] You can also look at things like objects and their properties. We'll create a new object called newPerson with a property name, and a second property, fave language, set to JavaScript, of course.
[1:30] Then we can simply write the name of that object, and see it printed in line, and also to the right, in the Quokka output. That's it. Now, you have a live scratchpad for JavaScript right in your text editor.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!