Why Visual Studio Code Live Server Not Working?

visual studio code or vs code nowadays one of the most popular code editor and many developer use vs code as their default code editor vs code has an excellent extension called live server which helps you to see your website while you are working on a live browser just all you need to know you need to right click and then select open with live server it works fine on every computer but sometime you might face some issue and in this video i will let you know why your live server is not working perfectly so if you're interested keep watching step one vs code live server don't work only on a file meaning if you have a html file and you want to open this html file with live server in that case that html file must be on a folder if you have a independent html file and you want to work with live server it will not work so just create a folder and then open the folder with vs code and then the file you can open with live server this way it will work step two your folder name shouldn't have any space meaning if your folder name have a space in that case your live server might not work perfectly so if you're interested to work with live server your folder name should not have any space you can leave the name with camel notation or snake notation also you can place hyphen or underscore between two words so that it works perfectly on live server step three vs code live server do not work without perfect html structure meaning if you interested to work with html file definitely that file's markup should be perfect it should have doctype it should have html tag body tag head tag properly if you don't have that it will not work properly a simple shortcut can help you a lot if you interested to work with live server just press on your vs code control plus exclamatory sign and then press tab if you do in that case you will have a basic boilerplate and you are good to go with your live server as well as you can start your project first what do you think about this video you can encourage me just giving a thumbs up or if you are still not subscribed my channel please click the subscribe button so you will find lots of this type of video still your issue is not fixed let's go a bit deep step 4 restart your vs code sometime a simple restart can help you a lot we might need to install a new extension sometime we want to work with random file in that case vs code needs a restart and in that situation if you interested to work with live server your live server might not work so simply restart your vs code and then try again if your problem solved or not step 5 set up a default browser for your operating system after the operating system update our system default browser setting reset automatically in that case you should select your default browser if you do in that case your problem might solve so if you interested to know how to do that on windows 11 go to start and then go to the settings and then go to apps and then default app and here you can select your own default browser meaning if you interested to open your html file with a browser you can select if you interested to open a html file with a browser you can also do so you can select very customized way on your windows 11. if you are windows 10 go to settings and then app and then default tab and here at the option for default browser setting and from the drop down you can select your browser a simple trick is if you see that your browser is here so i recommend you to reset that meaning if your default browser is firefox click the chrome and then select the firefox again so it can be a reset it okay and on ubuntu go to settings and then default application and here from the drop down you can select your default browser if you are in the mac open the launchpad and then system preference and then general and here also you can see a drop down and you can select your default browser so i recommend you to select your default browser and if you do i think your live server problem should be solved step six if still your problem is not solved you need to open the vs code setting and then go to extensions and then live server config and then custom browser and from the drop down you can select your browser here also i recommend you to select a browser first and then again meaning you can see my default browser is google chrome private mode i will select firefox and i will select chrome private mode if i do in that case it might be reset it and your problem should be solved still if your problem is not solved open settings.json file on vs code and then make sure your this line is available live server dot settings dot custom browser colon the browser name what actually you want to be your default browser for me you can see it's chrome private mode and if you have this line your live server should work perfectly but still if you face same issue i recommend you to set up the port so if you interested to set up the port in that case you need to open settings.json file again and then right here liveserver.settings.port and it should be zero after you saved i highly recommend you to restart your vs code and then your lab server should work perfectly i tried my best to explain all common fixes and i hope now your problem is solved what do you think about this video don't forget to let me know in the comment section if you think this video is helpful don't forget to click the like button still if you don't subscribe my channel i recommend you to subscribe if you interested to know top 5 vs code theme extension click here if you interested to subscribe my channel click here see you soon till then you take care

Channel: Ali Hossain

Views: 119,188

Keywords: Why Visual Studio Code Live Server Not Working, Visual Studio Code Live Server Not Working, Live Server Not Working, vs code live server, live server not working, ali hossain

Id: -p2DbWDe_zQ

Length: 5min 22sec (322 seconds)

Published: Wed Dec 15 2021