Live preview of website when editing in Visual Studio Code
VS Code, being extremely lightweight (at least compared to Visual Studio), does not come with its own web server. This can be a bit confusing for those of us used to just hitting F5 in Visual Studio and getting our website launch in a browser.
When using VS Code, you have to rely on the power of Node.js instead.
This is a tutorial of how to start a really small project, containing only a single HTML file in VS Code and edit it with live preview in a browser.
The first part, installing VS Code and Node.js was also covered in my last tutorial, Getting started with TypeScript in Visual Studio Code, so if you have already done that, skip to section Creating your project below.
Install Visual Studio Code and Node.js
Make sure npm, node.js' package manager is added to path. Open a command window and enter
If you get an error, reboot. If you still get an error, make sure npm and nodejs have been added to your path:
How to check if something is included in path in Windows
Right-click My Computer
Select Advanced system settings
Select tab Advanced
Click on Environment Variables
There are two Paths, one for your user (at the top of the window) and one systemwide (at the bottom).
Select Path and click Edit. The path for your user should contain this:
The system wide path should contain this:
Creating your project
Create a new directory Demo and open this directory in VS Code. Create a file index.html with this content:
Installing a web server
The web server I recommend you install is live-server. You can run this server from any directory, and it detects changes to your files and reloads the page in the browser, which is really useful.
Open a command window and enter
npm install -g live-server
Run live-server from VS Code
In VS Code, right-click on index.html and select Open in Command Prompt. In the console window, type
Live-server should now start and will keep running untill you close the command window. It will also automatically open your default browser.
You should see a website saying "Hello World!"
To make sure that live-server is detecting changes, change the content of index.html. As soon as you hit Save, the page in the browser will reload.
If you set VS Code to auto save, you don't even need to do that.
Categories: VS Code