# 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:

    ![Open in browser](https://930399471-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8Yfaa-LOM7hRx2at%2F-LAU8d-duY6bwC_8VxWj%2F-LAU8t9dUevfgQg-3TlE%2F1-openinbrowser.PNG?generation=1524162337854739\&alt=media)
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:

    ```markup
    <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`.&#x20;

    &#x20;On a Mac `cmd + alt + o`.
8. You should be given a list of browsers. Choose Chrome.&#x20;
9.  You should see some text in a browser window:

    ![HTML Test](https://930399471-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8Yfaa-LOM7hRx2at%2F-LAU8d-duY6bwC_8VxWj%2F-LAU8tDN-IER6NfJL08l%2F1-htmltest.PNG?generation=1524162347805589\&alt=media)

## 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.&#x20;
3. Click on the `Node Exec`. It should be the top one.
4. Click install.&#x20;
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:

```javascript
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`.&#x20;
3.  You should see the following message in your OUTPUT window:

    ![Node Exec Test](https://930399471-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8Yfaa-LOM7hRx2at%2F-LAU8d-duY6bwC_8VxWj%2F-LAU8t8GGmSa77o9h3UX%2F1-nodeexectest.PNG?generation=1524162347628730\&alt=media)

## 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.

Here is an unsaved file:\
&#x20;![unsaved](https://930399471-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8Yfaa-LOM7hRx2at%2F-LBaFpW1-Y8Xe4eercT3%2F-LBaFqusDZOzpfC2Jsui%2Fnot-saved.PNG?generation=1525355351190278\&alt=media)

Here is a saved file:\
&#x20;![unsaved](https://930399471-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8Yfaa-LOM7hRx2at%2F-LBaFpW1-Y8Xe4eercT3%2F-LBaFqwJLU2W_PxrRr02%2Fsaved.PNG?generation=1525355351380634\&alt=media)
