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

Editor to share with you how to set up VSCode real-time preview web code, I believe that most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

I. description of the setting

1.VSCode as a very good development software, smaller than DW, used to test the front end is especially good, then we usually develop the web page found that only write the code, and then save, then to the browser to refresh the results, and then keep repeating, we find that a lot of time is wasted on these three steps.

two。 In fact, we can configure a web server in VSCode. After modifying the code, we only need to save the code browser to preview it in real time.

II. Operation steps

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

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

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

4. After the installation, you need to restart the software plug-in to take effect.

5. After restart, create a new workspace (you can also drag a folder directly to vscode), and create a HTML file here for testing. Note that you cannot use Live Server when 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, we can see a Go Live on the status bar. Clicking will automatically open the browser and display it.

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

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

7. Next, to modify the code, we only need ctrl+S to save the modified code, the browser will refresh automatically, and the dynamic picture will be displayed.

The above is all the content of this article "how to set up real-time preview web code for VSCode". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.