How to run HTML in Visual Studio Code
The extensions: HTML Preview, Live Server and open in browser
You might use Visual Studio Code (VSC) as the editor for coding. Have you faced the problem to review HTML files lively in VSC?
I have tried three extensions and would like to share my experiences.
- HTML Preview
HTML Preview can open the rendered web page inside VSC lively.
Once the below version HTML Preview (as pic1)is being installed, there will have an icon named “ Open Preview to the side” as pic 2 displayed in the editor.
The result can be displayed lively in VSC. But I face a problem to change the background color of the Preview. Let’s say: keep the editor as black, but Preview as white, like that. Please feel free to make comments if you have any ideas. Thanks.
2. Live Server
Live Server can launch a development local Server with live reload feature for static & dynamic pages.
Once the extension is installed, the icon “Go Live” displays at the bottom as below pic4:
Choose the HTML file, click Go Live, it will be opened at a development local Server with 127.0.0.1:5500 as below.
The windows can be arranged as below, which can help me check the result lively.
3. open in browser
Once the extension is being installed, write click the file, you will find there are two items being added to the dropdown menu: Open in Default Browser and Open in Other Browsers. Click it, the file will be opened in pop-up windows.
The display with this extension can’t display lively, and it has to be refreshed once changes happen in the HTML file, as shown below: the HTML has been changed to “hello!”, the display doesn’t change automatically. But this is my experience, if there is anything wrong, please feel free to make comments.
In a summary, my experience is:
- HTML Preview is good to display rendered web pages inside VSC lively. It would be perfect if the background can be changed.
- Live Server will open a new development local server and display the changes lively.
- open in browser will open a new web, but need to refresh the web to display the changes.
Thanks for your reading.
