Shulou(Shulou.com)06/02 Report--

This article is about how vscode implements real-time preview. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Open VScode and click the last one on the coordinates toolbar to enter the plug-in installation

If the toolbar on the left is not displayed, you can also find Extensions in View to enter the plug-in installation

Enter Live Server in the search box, find the following in the search results, and select install

The installation needs to be restarted for the software plug-in to take effect.

After restart, create a new workspace (you can also drag a folder directly to vscode), create a HTML file here for testing, note that you can't use Live Server by dragging a new HTML file to IDE, you need to put this HTML file into the created workspace (folder), after the new construction is completed, you can see a Go Live on the status bar, click to automatically open the browser and display.

Tip: if you have a HTML project before, dragging the project root folder directly into VScode will automatically add it to the workspace.

If you don't have a status bar, you can also right-click on the file and select Open With Live Server.

Next, to modify the code, we only need ctrl+S to save the modified code, and the browser will refresh it automatically.

Thank you for reading! This is the end of this article on "how to achieve real-time preview of vscode". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.