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.

Live Preview
Go to the Extensions view, search for “live preview”, and click on the Install button.

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

    Open File
    From the top-level File menu, select the Open File option.

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

    Open File Dialogue
    Open the code file from your preferred directory.

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

    Live Preview Button
    Click on the Live Preview button.

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

    Live Preview Demo
    Live Preview will open a live-reloading browser preview inside the VS Code.

Leave a Comment