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.)
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.
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?!
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.
Once I explained my frustrations with VS Code to a fellow developer, he graciously showed me how to use an extension called Live Server 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.
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.
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')
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.
Either way, your HTML document should appear.
I hope you found this tutorial helpful.
Thanks for reading!