How vscode achieves real-time preview effect

1. Open VScode, click [Extension], enter Live Server in the search box, find the following plug-in in the search results, and select to install

2. After the installation is complete, restart the software to make the plug-in take effect.

3. After restarting, create a new workspace (you can also drag a folder directly into vscode) , create an HTML file here for testing. Note that you cannot use Live Server by dragging a new HTML file into the IDE. You need to put this HTML file into the created workspace (folder). After the new creation is completed, we can When you see a Go Live on the status bar, click it and it will automatically open the browser and display

Tip: If you have an HTML project before, just drag the project root folder directly into VScode and it will automatically Add to workspace

#4. If there is no status bar, you can also right-click on the file , select the Open With Live Server option

5. Next modify the code, just ctrl S to save the modified code, and the browser will automatically refresh

Recommended related articles and tutorials: vscode tutorial

The above is the detailed content of How vscode achieves real-time preview effect. For more information, please follow other related articles on the PHP Chinese website!