How to Run HTML in VSCode (Visual Studio Code) in Chrome on Windows 10 | Live Server | Best IDE 2023

in this tutorial i'm going to show you arguably the best way of writing html code in your vs code editor keep in mind that this tutorial is for chrome on windows 10 but the instructions for mac os are identical we're going to use the vs code extension called live server live server allows you to do two things it will run your html code as a web application running on your localhost web server directly from your computer it also reloads your page automatically every time you save the file so go ahead and open your ps code editor and go to extensions now go ahead and type live server then all you have to do is just click on the install button so go ahead and click on this settings wheel and select extension settings you'll end up on the main vs code settings page now go into the upper right corner and click on this button this will open vs code settings.json file now we're going to add the chrome browser to our live server settings simply open the double quote and start typing live server dot settings dot advanced custom browser cmd line go ahead and close the double quote column chrome or you can use firefox but in this example we're just going to stick to chrome okay now let's close all of the tabs and go back to a blank editor let's create a new project by going into file and open folder actually i'm going to right click and create a folder here i'm going to name it my project and then just go ahead and click the open folder button now we've just created a vs code project go ahead and right click anywhere on the left sidebar and go to new file i'm going to name my project file subscribe.html now i'm just going to paste my basic html code semicolon.dev goes into the title i'm going to create a header with subscribe now to run this html in vs code all you have to do is right click on the file and click on open with live server and as you can see our html is running in the visual studio code as a live web server directly on our local host computer now live server will also automatically update your html page every time you update it so for example here let's run the example again and you will see that every time we update the web page it will actually change in real time without us having to refresh the browser again and that's a really nice feature to have and basically it's going to save you a lot of time in the long run i'm going to update my html and hit control s and you will see automatically that's reflected in the chrome browser and really that's all there is to writing html code in vs code editor

Channel: Ghost Together

Views: 137,731

Keywords:

Id: Wd7cVmtiFUU

Length: 3min 7sec (187 seconds)

Published: Sun Jul 25 2021