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.
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?!
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.
I eventually moved on to CodePen when I began working on freeCodeCamp projects. Similarly, CodePen has a 'Save' button, that also allows you to easily view your changes.
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 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')
Before you preview your HTML file, you must save it. (Command + S on Mac)
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.
Alternatively, you can right-click on your HTML page and click 'Open with Live Server'
Either way, your HTML document should appear.
I hope you found this tutorial helpful.
Thanks for reading!
Top comments (9)
What a great post Dayren! Thank you!
Thank you. 🙂
Thank you write the article,it is really let me use feel depression!
it is have help for me.
I think this approach is very good related to when you are developing only front-end and I think we need to do some more research, in order to preview code while working with back-end as well.
Good point. I focused solely on front-end because I'm a front-end developer.
Being a Front-End Developer which Technologies are you using right now ?
I'm working on improving my JavaScript knowledge before moving on to frameworks like React and Vue.
Thank you write the article,it is really let me use feel depression!
it is have help for me.
Thank you write the article,it is really let me use feel depression!
it is have help for me:)