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.

Published:

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

First download VS Code and Node.js and install both.

Make sure npm, node.js' package manager is added to path. Open a command window and enter

npm -v

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 Properties

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

C:\Users\[username]\AppData\Roaming\npm;

The system wide path should contain this:

C:\Program Files\nodejs\;

Creating your project

Create a new directory Demo and open this directory in VS Code. Create a file index.html with this content:

Hello World!

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

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!"

Live preview

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

Comments