How to Run HTML in VSCode on a Mac (Localhost) Visual Studio Code Live Server / Macbook Pro / Air

hey guys in this tutorial i'm going to show you the fastest way of writing html in vs code we're going to use chrome browser on mac os x if you're using macbook pro or macbook air you're in the right place but instructions on the windows are identical we're going to use visual studio code live server extension this extension allows you to run your html files on localhost basically what it means is that your html is going to run more like a real web application in your browser instead of the browser simply opening the file so let's go ahead and get started first thing you want to do head over to the extensions and start typing live server as soon as you do that click on the first search result here you want to go ahead and click on the install button once live server extension is installed go ahead and click on this settings button and then select extension settings now in the upper right corner of the screen click on this button this will open vs codes settings.json file in this file go ahead and add a new property called liveserver.settings dot advanced custom browser cmd line now use a colon and for its value i'm going to use chrome now you can use firefox safari which some people say is like modern day internet explorer [Music] guys are you still watching i think i'm going to stick with chrome on this one now go ahead and press command s to save settings.json file i'm going to go ahead and close all of these tabs and everything now in your visual studio code go to file and open folder i'm going to navigate to my projects folder here i'm going to create a new folder called html and press create and click on the open button now in this project i'm going to create a new html file by clicking on this button over here i'm going to name this file subscribe.html hit enter i'm going to copy and paste a basic html content into this file and once again hit command s to save it now you have two different ways of running this html file in vs code using live share the first one is you can simply click on this button in the lower right corner that says go live but you can also click on the html file itself and select open with live server once you do that your html file is going to run in the browser at your local host address now just keep in mind that live server also has something called live refresh so every time you edit the file and hit command s your new changes will automatically reflect in the browser

Channel: Ghost Together

Views: 41,610

Keywords: run, html, vscode, visual studio code, mac, mac osx, osx, live server, install, execute, localhost, locally, chrome

Id: S_iPfU3wK2Q

Length: 3min 5sec (185 seconds)

Published: Tue Aug 09 2022