In this tutorial, you will learn-
In this article, you will learn-
Visual Studio Code Live Server
Visual Studio Code Live Server: Visual Studio Code is one of the popular code editor out there. It’s free, it has a clean interface, and it has countless extensions which make programming simpler and more fun.
Well, this is passible on the off chance that you configure a useful extension in VS Code called live-server. In this tutorial, We will clarify the details of how it works and how to set up and configure a live server in your VS Code editor.
For what reason would it be a good idea for me to use the live-server extension?
Normally, when you make a change in your code or write something new, you need to refresh the page manually to see the changes.
In other words, on the off chance that you make 100 changes in your code each day, you need to refresh the browser 100 times.
The live-server extension, however, automates this for you. After to introducing it, an automated localhost will be able to run in your browser, which you can begin with a single button.
When you make changes in your code or write something new , after saving it, the browser will auto-refresh itself. Then, at that point, you will be able to see the changes rapidly and automatically.
If you prefer, you can also watch the tutorial video below:
To begin with, Install VS Code
You can skirt this part in the event that you have already installed VS Code on your computer.
Otherwise, you can download it from its official website.
After you’ve downloaded and installed VS Code, you will see the welcome screen:
On the left side, you should see a couple of icons. One of them (under the no bugs icon) is the extension button:
extensions button in visual studio code
When you click on it a search bar will show up. Simply type in “live server”.
You will see many options, so you can choose whichever one works for your system. I use Live Server by Ritwick Dey, so let’s continue with that one in this example:
Click on the install button and it will install the extension.
Create a New HTML Page
To begin the live server, ensure you basically have an HTML created. To do that, click on the file button at the very top, then, at that point, choose the new file button and type index.html:
Configuration Issues
Presently after you created an HTML page and installed the extension you ought to have the option to see a “Go Live” icon right beneath in the blue field:
In the event that you don’t see it simply restart VS Code. Then, at that point, it ought to be OK.
Click on the “Go Live” button and the localhost (assigned to a port number) should begin your default browser. You can begin and stop your live server whenever by clicking on the same button.
On the off chance that you have arrived at this progression, congrats! 🙂 Now you can work with the live-worker.
Related:
How to Download and Install Visual Studio Code
How to Write Code in Visual Studio Code Editor.
How to Run Program Directly From Visual Studio Code
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
