In this lesson, you'll learn how to set up a "live scratchpad" for JavaScript using an extension called [Quokka](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode). 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](https://quokkajs.com/).

Set Up a Live Scratchpad for JavaScript in VSCode using Quokka

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.

Set Up a Live Scratchpad for JavaScript in VSCode using Quokka

Share this video with your friends