How to Preview your Code in Visual Studio Code

Previewing Code allows you to view a live-reloading browser preview inside the VS Code itself. You can use the preview feature to see the changes on a browser as soon as we make the changes in the code. We will need to install the Live Preview extension to use this feature. The Live Preview extension supports JavaScript, HTML, and CSS languages. This guide will show how to preview your code in Visual Studio Code.

Installing the Live Preview Extension

In VS Code, open the Extensions view or press Ctrl + Shift + X in Windows or Shift + Cmd + X in Mac OS. Inside the search bar, type “live preview”. Then select the extension and click on Install.

Using the Live Preview Extension

To preview your code in VS Code, do the following:

1. Open the code file that you want to preview. Select the Open File option from the “File” menu. Alternatively, press Ctrl + O in Windows or Cmd + O in Mac OS

   

2. Navigate to the code file in the Open File dialogue box, select it, and click on the Open button.

   

3. Click on the Live Preview button in the top right corner of the editor.

   

4. This is how you can work with the Live Preview.