New to VS Code and Have No Idea How to Preview Your Code? Read This!
Tags: beginners, vscode, help
Published: 2019-06-22 02:52:43

### Why I'm Writing This Article

My main hangup with VS Code was not knowing how to preview my code. After tons of Google searches, I was no closer to figuring it out. This made me question if VS Code even had preview capability. I couldn't wrap my mind around why someone would use it if they couldn't see what their code looked like. 

(This frustration actually caused me to stop coding for a few months because I thought that if I couldn't figure something as 'simple' as this out, then I obviously wasn't cut out to be a developer. 😞)


It wasn't until earlier this year that someone showed me how to preview my code in VS Code. **Looking back, I can now see how unintuitive it was for a beginner.**

*Disclaimer: While I don't assume you have much, if any experience with VS Code, I DO assume that you've used a text editor before. Also, the shortcuts I provide are for Mac. (I'm sure they're similar on Windows.)*

### VS Code Pains

When I became 'serious' (this was the first of many times I thought I was serious 😂) about becoming a professional developer, I started talking to developers who told me that I needed to start using [VS Code] (https://code.visualstudio.com/). 

Since I'd used text editors before I thought I could pick VS Code up pretty quickly. Plus, everyone was telling me how easy it was to use. I mean, how hard could it be?!

![](https://media.giphy.com/media/h2OLfcSKKthRK/giphy.gif)
<figcaption>Obviously, it wasn't easy for me.</figcaption>

### My Experience with Beginner Friendly Text Editors

When I was first began learning to code, I started with a soon to be defunct text editor called Cloud9 (RIP 🙏🏽). What I liked about Cloud9 was that I could write a few lines of code, click the 'Preview' button, then immediately see the changes.

![Screenshot of my Cloud9 instance](https://thepracticaldev.s3.amazonaws.com/i/l7wrc063pxs61le3yory.png)
<figcaption>My code is on the left and the preview window is just below the clearly labeled Preview button.</figcaption>

I eventually moved on to [CodePen] (https://codepen.io/) when I began working on [freeCodeCamp] (https://www.freecodecamp.org/) projects. Similarly, CodePen has a 'Save' button, that also allows you to easily view your changes.


![Screenshot of my CodePen instance](https://thepracticaldev.s3.amazonaws.com/i/ccok060zi8w6c3ar5qw6.png)
<figcaption>My code is on top along with the Save button and the preview window is below.</figcaption>


### Live Server Extension

Once I explained my frustrations with VS Code to a fellow developer, he graciously showed me how to use an extension called [Live Server] (https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) to preview my code. 

You can either download Live Server from the link above or go straight to the 'Extensions' tab in VS Code and search for it.

![Red arrow pointing to the 'Extensions' tab in VS Code](https://thepracticaldev.s3.amazonaws.com/i/jntxgdrjburct64npaul.png)
<figcaption>The red arrow is pointing to the 'Extensions' tab in VS Code.</figcaption>

After searching for and downloading Live Server, open an existing HTML file or create one. 

If you're unsure of how to create an HTML file in VS Code, view the screenshot below.

![Screenshot of creating an HTML page](https://thepracticaldev.s3.amazonaws.com/i/bs1ieltp6uitzx9g080v.png)
<figcaption>Click 'New File' under the 'Start' section.</figcaption>

After clicking 'New File', you'll be taken to a blank page, where you can begin to create your HTML file. (Don't forget, all HTML files must always end in '.html')

Before you preview your HTML file, you must save it. (Command + S on Mac)
![Screenshot of unsaved page](https://thepracticaldev.s3.amazonaws.com/i/ictm9ukbrgvz0wtzncpf.png)
<figcaption>If there's a white circle next to your HTML document, that means it hasn't been saved!</figcaption>

Now that your document is saved, you're finally ready to preview with Live Server!


In order to open Live Server, use the shortcut Command + Shift + P. You should see a dropdown menu appear like the screenshot below.

![Screenshot of Live Server menu](https://thepracticaldev.s3.amazonaws.com/i/9uy0kqujqeyzsk3obahp.png)
<figcaption>It's very important that you leave the '>' in the search bar, otherwise you won't be able to search for anything!</figcaption>

Alternatively, you can right-click on your HTML page and click 'Open with Live Server'
![Screenshot of right-clicking to open Live Server](https://thepracticaldev.s3.amazonaws.com/i/gdtnwbrq6nve7cx6nlsa.png)

Either way, your HTML document should appear.

![Screenshot of open Live Server](https://thepracticaldev.s3.amazonaws.com/i/ya3c3iy7vmjyjevolj7m.png)

![](https://media.giphy.com/media/12NUbkX6p4xOO4/giphy.gif)

I hope you found this tutorial helpful.

Thanks for reading!