Configuration

In this module we'll have you configure a few things in Visual Studio Code so that you can optimize your build experience.

Open HTML files with Chrome

We're going to install a package just for opening raw HTML.

  1. Go to the extensions on the left side of VS Code.

  2. Search for open-in-browser. The package looks like this:

  3. Install the package.

  4. Go into 00-setup.html in VS Code.

     javascript-library
     └── 0-PreWork
         └── 1-HTML-Basics
             └── 00-setup.html

  5. Add the following snippet:

    <html>
 <h1>Hello World</h1>
</html>

  6. Save your file by pressing ctrl + s *

  7. On a Windows machine, click on the .html file and press ctrl + alt + o.

    On a Mac cmd + alt + o.

  8. You should be given a list of browsers. Choose Chrome.

  9. You should see some text in a browser window:

Node Exec

We'll add a package called node exec to VS Code. It's a free extension that allows us to run JavaScript in a console inside of VS Code. Follow these steps to get it:

  1. Click on the extensions box in the sidepane to the left. It's the bottom one that looks like a box inside of a box.

  2. Type Node Exec in the search bar.

  3. Click on the Node Exec. It should be the top one.

  4. Click install.

  5. Once we set up some files, we'll test our new extension.

  6. Go into the 00-setup.js file. See below for orientation:

    javascript-library
     └── 0-PreWork
         └── 1-HTML-Basics
         └── 2-CSS-Basics                
         └── 3-JavaScript-Basics
             └── 00-setup.js      <----Go Here

Testing the set up

  1. Still inside of 00-setup.js, type in the following:

console.log("Hello World");

  1. Open your terminal window by pressing ctrl + ` . For clarity, we're pressing ctrl and then the back tick key, which is on the top of the "tilde" key. This key is located above the tab key. Do not confuse this with an apostrophe '.

  2. On a Windows machine press fn + F8, for Mac press Function + F8.

  3. You should see the following message in your OUTPUT window:

Helpful Tip

Just a note on saving: VS Code has given us an easy to use tool for identifying unsaved files. The X which normally closes a tab will change to a solid circle or "bubble". It is very important that you adopt the habit of saving files before attempting to execute them.

PreviousDirectory Set upNext2-HTML Basics

Last updated