Click here to improve your skills! !! [click]

[VS Code] Extension function that reflects real-time in live preview when editing a file | Live Server

HTML
This article can be read in about 3 minutes.

When editing with VS Code, I think one of the “I wonder if it can be done” is “Reflect the browser status in real time when editing HTML”. “Live Server” is a convenient extension function in such a case.

Live Server

This is an extension that updates the display without refreshing (reloading) the browser side when you edit the file and press “Save”.

Installation method

First, search for “Live Server” from the icon in the menu. Live Ser … I think it will come out first of the candidates.

Install it.

Go Live

Click Go Live to run Live Server.

Port: 5500 with localhost loopback address (127.0.0.1) is started, and the display on the browser side is updated in real time just by saving the VSCode file!

To stop Live mode, click Port: 5500 next to the no-entry icon.

I also want the editorial side to be in real time

It is convenient as it is, but if it is left as it is, it will take a lot of time and effort to “overwrite and save on the editing side”. Like the live preview of “Brackets”, I want the HTML file and browser screen to change in real time even while editing …!

In that case, turn on the automatic save setting.

Auto Save

off: Do not save automatically
afterDelay: Save if there is no operation at the time of AutoSaveDelay below
onFocusChange: Save when editor loses focus
onWindowChage: Save when window loses focus

If you set afterDelay and AutoSaveDelay to 1, you can realize the environment of editing → browser reflection in almost real time.

Please refer(^ ^)

Copied title and URL