How to show websites in VSCode using the Live Preview

When developing websites using VSCode a popular extension that’s used to load up websites and make them work in the web browser is the Live Server extension.

Microsoft is currently developing its extension called Live Preview which works the same way as the Live Server extension except this new extension can preview the website inside of the VSCode application.

It’s currently in beta as the extension page shows a Preview tag, it can still be used but keep in mind it isn’t classed as being stable just yet.

livepreview-site.png

Open the VSCode application, open up the extension page, and search for the Live Preview and the extension should show up in the list. Click on the extension block in the list and the extension view page will shown, click the Install button to add the extension to VSCode.

extension2.png

You will notice a new button in the top right-hand corner of the application. Open up the HTML page of the website you want to load up and then click the preview button.

livepreview-button2.png

A tab will open up showing the website of the HTML page that was originally selected. As you make changes to the HTML page the changes will show up on the preview tab.

livepreview-open2.png