Test your website live using a Visual Studio Code extension

Hey there, this video is going to do dual purpose. It's going to show us how to install what's called an Extension in VS code. And that extension is going to show us how to do live updates in a browser rather than going and hitting Refresh every time. 

So we've installed the browser-- so I've installed the extension. I'm going to change the color here to green. It's going to be green yellow, and watch it change over here when I hit Save. I'm not hitting Refresh; ready? Just updates naturally. I'll show you how I use this, how I set up my work space, my physical space with my desktop and my laptop, and we'll learn all about Extensions in VS code. 

To get started open up any file. I've got our index.HTML open. You can have anything open. We're going to go to the Extensions tab over here. So there's a bunch of icons, it's this last one, or at least this one with the square. Don't know how to describe that one, click on that. 

The other thing that you might-- it might look different to mine slightly because of the width of it. See this, like see my cursor, when I get close to this edge here, I can click, hold, drag it out. And eventually if I drag it big enough, let's just drag it big enough so we can see the icons. It might be a bit big for you, but it will make it easier for us to work out which extension we're actually looking at. 

So let's do a search at the top here. I'm going to put in Live Preview, let's pretend-- like I know exactly what we're going to install, but let's pretend you don't, you're like, "I want to do live previewing of my HTML." So you do a kind of a search in here, and you might have to keep typing a few different things, to get the extension you want. Now the one we're going to use is this one here called Live Server. Now this is, I guess to be clear, how extensions are made. So Microsoft, amazing people, made VS code, and share that free with us, you're like, "Thank you, Microsoft." What they also did is said, "Hey, rest of the world, we will allow other people to build extensions for the software." We won't do it, not Microsoft, but we'll let other people do it. So it's a big thing to remember. 

We're using a live server, and it feels like it's part of the product but it's not, if I click on it, it is something made by Ritwick Dey. And one day he decided, "I'm going to build this plugin to help me use VS code", because it's not built-in by default. So he did it, he made it, and other people started downloading it. Now the trouble is, is that there might be a better live server out there. There might be another person who've made one, and it might, here, Live Server Preview, that looks pretty good, but it's got lower stars, 3.5. This one here, it's got 5 stars, and it's got a zillion downloads, that's how I judge it. 

So when I'm looking for an extension, just solve my solution, solve my solution? Solve my problem, I type it in, and then I go through and say, how many times has it being downloaded, versus how many stars it's got, and then it's like, it's like X-Factor, I kind of just compare them all, and see who's got the most stars, who's got the most downloads. And then I just pick that one. And I guess I want to show you that, because you might be watching this in that distant future, and it might be Live Server is not that good now, it's got like two stars, because Ritwick Dey got hit by a bus, and nobody's been looking after this application. So you have to make your own choices here about which one you might use, and these will change over time. 

We're going to use this one, and I'll show you how to install it. It's pretty easy, I'm going to click on it. Should appear over here in another little tab. This is my website, hasn't gone, but this is extension. It tells me a little bit about it, and I generally read through it, to make sure it kind of does what I need it to do. And it tells you how to install it, and, "I'm sorry, I'm busy bee now, if you want to maintain the project-- This is a good one, there's a note in here from Ritwick saying, "I'm not going to support this product, this extension anymore." I know it works perfectly because I was using it today, but there's going to be a time where it's probably not going to work, and the stars will drop off. And he says, "Sorry, I'm busy, does anybody else want to look after it?" And that is true of lots of programs now. A lot of software, XD is doing it, they're allowing extensions to be added, rather than the software makers, they just do the core, and they let other people make all the interesting extras. 

So to install it is easy, click the install button. Come on, Dan, should have done it at the beginning. You can kind of see it over here. That's your only visual cue that it's doing something, until it says, 'Installed'. And you can uninstall if you don't like it. You can run through a couple of them, turn them on and off. 

Now for this particular one I don't think we need to restart VS code, but a lot of them will, they'll say it's somewhere in here, and if it's not working that's a pretty good way to do it. So if it's not working-- let's just do it anyway. Let's go to 'Code', 'Quit Visual Studio Code'. Now I'm going to reopen it. And it's probably going to work. 

So how this particular plugin works, have you read the documentation? Basically it says, have a document open and click this button down here. So click on 'Go Live', it launches Google Chrome. It doesn't look much different than we were before, except this one is, it will update live. We'll show you what I mean by making it a bit smaller. I'm going to push it over here. This over here, so you can see it. It basically stops you hitting the Refresh button. And you might be like, "I don't mind hitting the Refresh button", then don't install this plugin. We don't need it, it's just handy, I like it, but if you were like, "Man, there's just too much work, and too much hassle", yeah, you can just do it by hitting Refresh, but I guess what I want to do is, mainly in this video, show you how to install other extensions. 

We'll do another one in the next video. So what ends up happening? Watch this, before, I had to hit Refresh, now it does do our work. Yes, I do, and I hit 'Save', can you see, it just-- I saved over the site, it just automatically refreshes. I'll show you in a second how I use this, but let's just quickly recap. 

Find extension, type in what you want to do. We're going to use FTP later on, and we're going to use some code hinting. Find it, go through and say, oh, they've got about, not about the same downloads, this one's got twice as many, but these both got really bad reviews. This one's got less, but it's got higher stars. So you kind of make a decision based on stars versus downloads This one looks good, that's the one we're going to use. That's got 2.3 million downloads. It will be different when you look at it, with a higher star rating And you can close the extensions by clicking back on to your Explorer. 

All right, so we're going to preview here. What I've been doing is either having it side by side like this, which is going to work for my really big screen. I'll show you how I normally work though. I'm going to jump out to my cell phone now, and I'll show you. 

Hi everyone, that's me, real me, not just the computer screen me. I want to show you how I kind of work. So laptop, big screen. I plug them in so they're connected. When I'm working on the big screen here, I have that, using VS code. And VS code, I'll launch the cool live server thing. So I launch it, it goes big. And what I do is I just click, hold, and I drag it. And I drag it to over this screen. And I leave it on there all the time. That's how I kind of do my editing. So, over here in VS code, I'll try and do something so you can see a change live. 

So h1, I'm going to go and set font size. Font size is going to be like 400 pixels, massive. Hit 'Save', and watch it update over there; ready? Did it update? It updated, hey. So I'm always hacking away over here and watching it, to make sure the results are good over here, so I don't have to kind of toggle between screens or switch between them. You're going to have an extra problem while you're learning, because you're going to try and do this, but you'll also need to watch the video that I'm making. 

So, maybe yeah, some people use an iPad down here to watch the video on, and then do these things here. You might not have, you might have a tiny laptop that you're working on, and you just, it's just going to be fun. You have to toggle between all three videos, but that's it, extensions, make sure you check the star rating versus how many times it's been downloaded, and make your own choice. The live server at the moment is pretty good, but it might not be in a year, because nobody's looking after it. 

That is it, we'll install our extension, life savers are helpful. I'm babbling, it's hard when you're on live camera. It's easy when you can edit, when you're doing the screencast, I sound a lot more sensible. All right, more rambling, I'll see you in the next video, bye.