Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Set Up a Live Scratchpad for JavaScript in VSCode using Quokka

    Joe PreviteJoe Previte
    vscodeVS Code

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    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.