This is my first article on learning HTML the full-stack route! full stack route
This article is about the use of the front-end editor.
The editor can choose vscode, which is a free editor from Microsoft and supports many plug-ins.
Now share a super useful plug-in, Live Server.
We write the front-end page, if we need to manually save the code every time, and then refresh it in the browser, is it very cumbersome?
Can the browser refresh the effect in real time after I modify a line of code?
sure! Auto save + live server, improve work efficiency!
vscode settings are automatically saved
In VS Code, you can set up automatic code saving through the following steps:
-
Open the VS Code editor, click the "Settings" button (gear icon) in the lower left corner or use the shortcut key "Ctrl + ," to open the settings panel.
-
Search for "Auto Save" in the settings panel and find the "Files: Auto Save" setting item.
-
Set the value of "Files: Auto Save" to "afterDelay" or "onFocusChange".
- "afterDelay" means automatically save the code after you stop editing and wait a certain amount of time.
- "onFocusChange" means automatically save the code when you switch to another application or window.
-
(Optional) You can also change the value of the "Files: Auto Save Delay" setting item to your desired auto save delay time in milliseconds.
-
Save the settings and close the settings panel.
After completing the above steps, VS Code will automatically save your code without manual saving. This can help you develop more efficiently and avoid lost code issues such as accidentally closing the editor or crashing the computer.
VS Code Live Server is an extension plug-in of VS Code, which can help developers realize the function of automatically refreshing pages in the local development environment. Specifically, Live Server can automatically refresh the browser page when you save the code, so as to realize the real-time preview effect.
vscode set real-time refresh
Using the Live Server plugin is as easy as right-clicking on your HTML file and selecting the "Open with Live Server" option.
At this point, Live Server will automatically open a new browser window and load your HTML file in it.
When you save an HTML file, Live Server will automatically refresh the browser page so that you can see the latest effect.
In addition to automatic refresh, Live Server also provides some other useful functions, such as support for CSS real-time injection, support for HTTPS, support for custom ports, etc. These features can help you develop and debug web applications more efficiently.
It should be noted that Live Server is only applicable to the local development environment and should not be used in the production environment. In a production environment, you need a dedicated web server to deploy and run your application.