What do you want to learn?
Skip to main content
Play by Play: Visual Studio Code Can Do That
by John Papa and Burke Holland
In this course, you’ll learn about amazing features and how to turn your productivity up with Visual Studio Code.
Start CourseBookmarkAdd to Channel
Table of contents
Hi I'm John Papa, and welcome to this Play by Play on VS Code Can Do That. Or VS Code Can Do That? Can Do That. Yeah. So do you want some tips that are going to make you a much more effective and efficient developer writing your code? I assume yes is the answer. So in this Play by Play, myself and --- Burke Holland. --- we're going to walk you through some of our favorite features inside VS code, including some of the extensions. Yeah, and even if you're an avid VS Code user or you've never used it at all, this Play by Play's going to show you how to turn your productivity up to 11. Oh yeah, I like that. So we hope that you enjoy this opportunity to get started quickly and effectively with VS Code.
Customizing VS Code
Introducing VS Code
Hi, I'm John Papa, and I'm a web developer with Microsoft. And I'm Burke Holland, and I'm also a web developer with Microsoft. And today, we wanted to get together to share with you some cool things that we've learned about VS Code in a session called VS Code Can Do That. So Burke, first of all, what is VS Code and why'd you get into this? So VS Code is an open-source text editor from Microsoft, so it's cross-platform, runs on Windows, and it runs on Mac. And I had started using VS Code, and I became fascinated with all of the things that VS Code could do. And it's become super popular, and there's a good reason for that because it can do a lot. And so I started learning all of these tricks, and I thought man, VS Code can do that. That's kind of crazy. It's pretty cool. And going back, going back in the way back machine now, a couple of years ago when it first came out, one of the reasons I got into VS Code is I was bouncing around searching for my favorite editor. I was using Sublime, and Brackets at the time was a thing, Vim, I even tried that for a bit, TextMate, WebStorm, Visual Studio, IntelliJ, all these different options that were out there. And I heard about VS Code and wanted to try it, and the thing I really, really needed to have for me was, like everybody's got their personal favorites, I needed speed. It had to open fast and be fast. Nothing's worse than when you're using an editor and you're waiting for letters to type or things to open. The second feature was I really am keyboard heavy. I wanted to not have to touch my mouse, I didn't want to go to menus, I wanted to be able to use my own keystrokes to drive around, and I found that to be the case with VS Code. Yeah, it's a phenomenal editor, it's great with keyboard shortcuts, and it's great if you're coming from other editors where you sort of become used to those keyboard shortcuts. There's a lot of that stuff --- And we're going to show some of that, right? --- that's very, very similar. Yeah, we are.
Installing VS Code
So Burke, the first thing we have to do is figure out where do we get this thing from? Right, where do you get it? So you can get it on the internet. You can Google VS Code or you can go to code.visualstudio.com, and you can download for your platform, and the button should change. So you're on a Mac, it says Download for Mac, and if you're on Windows, it says Download for Windows. And if you click that right-arrow button there, you can also see we've got Stable and Insiders, right? So the Stable is their monthly Stable version. Insider's, what? A nightly build? Right, that's the latest build that has all of the latest features in it. So if you don't want to wait, if you like to live on the edge. I know a lot of people use the Insiders build, so --- That's me. --- so, yeah, so you're not alone. A lot of people do that. So if that's something you want to do, I think you're safe doing that. And you can have both install at the same time too, which is kind of nice. Right. That's really nice. They don't interfere with each other or conflict. That's pretty cool. So, if you don't want to go to the internet, you can also order the 50 floppy disk pack from Burke's house. That's correct, and that will come to you in 6 to 8 weeks and 3 easy payments of $99.99. Awesome, with $20.00 shipping and handling on top. Correct, yeah absolutely. Good. We're kidding.
Customizing Your Visual Theme
Customizing Your Icon Theme
Customizing Font Ligatures
Synchronizing Customized Settings
Now once you have your user settings like this, so you've tweaked your editor, you've got the right icon theme, you've got the right color theme, you've got a special font ligature, so awesome, one of the things that people generally do is they want to share their settings between different installations. Maybe you have Code running on a different machine, maybe you have the insiders build and the stable build running together, maybe you just want to share it with a friend. How do you do that? Well there's an extension --- Copy and paste? Well, that's one option, copy and paste. There's an extension for Visual Studio Code that's called Settings Sync. So we'll just look for that here. It's an absolute must if you have more than one computer that you use. Yes. You can see I already have this installed here, and what Settings Sync is going to allow us to do is exactly what it sounds like, which is just sync our settings. So to do that, what we'll do is open up the Command palette, which if you're on Windows is Ctrl+Shift+P, if you're on a Mac that's Command+Shift+P, and then we're just going to say settings sync and look for that extension. And you can see here it says Update/Upload Settings. What this is going to do, I'm going to select this, and this is going to actually go out and it's going to create a gist of all of my settings, and then it's going to come back and bring me an ID that I can then use somewhere else to pull down all my settings. So you can see, not only did it upload my key bindings, all of my user snippets, all of the extensions that I have installed are here, and then it gives me a token that I can use, so I can just copy this, and what I'm going to do is I'm going to come over to the insiders build of Visual Studio Code, which we talked about earlier, I have both of them installed. So you have two separate products installed. Two separate instances of Visual Studio Code. It could be on the machine too, right? It could be, right. And so you can see, it doesn't look anything like my other instance, it's a different theme. We've already talked about my feelings about light themes. So what I can do now is I can sync my settings to this instance. So to do that I'm going to go to the extensions here, and I'm just going to search for the Settings Sync extension and grab this, and then we'll just install it and go ahead and reload, because it's going to ask us to, and now --- That's really fast, it's all live. --- right, we just did that. This is why people love Visual Studio Code. There's no waiting around. So now that the extension is installed, we're just going to sync our settings across. So to do that, we're going to open the Command palette and we're going to type sync, and then Download Settings. It's going to ask us for, you can see it takes us to a page that wants a personal access token. In your GitHub. In my GitHub, but we've actually already got one over, right there. So we're just going to copy this and paste it in, hit Enter. That token gives you permission. Right. Now we have permission to read, so not just anyone can read it. And then it wants to know, okay, well what's the ID of the gist that you want to read. And that we're going to grab from right here, we're going to paste that in, and now it's going to go ahead and it's going to start installing all of my extensions, it's going to install the theme, it's going to install my icon theme, we can see all of that happening down here in the status bar. So if we come back to this in a little bit, this instance will actually look exactly like my stable instance because they'll be perfectly in sync. That's pretty cool. So this way we're uploading, so the upload syncs it to your gist, and then the download settings pulls it down to your local instance of VS Code on multiple machines, or same machine, different instance. Yeah, exactly. Just a really nice way to share your settings either with yourself or with someone else. And something I think people skip over, I know I did, is that output that you're showing where it shows the token and the gist, I didn't realize it was in the output, because usually the output comes up, and I'm going to scroll for a minute, it looks like that. It's at the bottom. Sure. So you have to scroll back up a little bit, and then it gives you the information that you need kind of up here at the top. So it makes it easy for you and for your team if you want to do that. And to be clear, the token for GitHub, when that was set up, you have options on where you can set permissions to. Correct. I usually just select for this particular token, it only has access to my gists, and that's it. Which is a good idea. Because once you have the token, then you can do other things with it. Exactly. So one thing I noticed that you did while this is installing, is when you were in your settings, you had to press Save before those settings would apply. Right.
I do something slightly different, and this is kind of just how do you want to roll? I'll show this over here on my machine. In my machine if I change something, like let's say I've got the fontSize set to 16 right now. I'll change that to, I don't know, 32. When I do that, it automatically will change within like a second. Can you see that? That's really big, so let's go back to 16 in there. What's happening there for me is I have autoSave turned on. Oh, look at that. So you didn't even save. You just typed, and then it saved. Exactly. And to do that, you can go to File and check Auto Save. What that actually does is if you look down here for it, you can see files.autoSave. I like to alphabetize mine. You can see it's afterDelay, and I have a --- So you're manually alphabetizing your saves. I manually alphabetize my saves. You're very organized. Yes, I am. I'm kind of like that. So I kind of go through there. Let's say you didn't know where that was though. Let's scroll to the top when you're looking for it. If you go up to the search settings, I can type in AUTO like this, SAVE, and you can see the setting over on the left. If you hit the Edit button, notice it automatically found it on the right. Oh, that's nice. And you can change the settings right here, so you don't have to remember what they were. So just to give an idea, let's say I changed this manually to off, and now I come back over here. When I select this to afterDelay, it'll automatically change it for me. I've got ya. And then have an autoSaveDelay of looks like 1000ms, so sort of a 1-second delay. Right, because you wouldn't want it saving as you type because that might get a little bit annoying. It gives me just enough. I usually go somewhere between 500 and 1000 just because it gives me a little bit of time to do stuff.
Customizing Keyboard Shortcuts and Key Maps
I talked about earlier how I like to map my keys, so I know how to-- I can use a keyboard a lot with VS Code. But what if you come from another editor and you want to be able to use those keystrokes, are there ways you can do that? Yeah, that's a good point. A lot of times with our editors if you come from another editor you have a lot of knowledge invested in being productive, and so a lot of times people don't want to switch editors because they're like, but I know this one, I know how to do all these things. Right, they're like I just do this. Right, and it's even it's in your brain. You're not even sure exactly of what you're doing. So what Visual Studio Code offers is something called keymaps, and that's to help you move from another editor such as Sublime, or Atom, or some of the others. So what that does is it just maps what you're used to. It maps your brain to VS Code, or rather, VS Code to your brain. So you don't have to learn new keyboard shortcuts, you just, the ones you already know work. So to install that, you just come to your extensions here. I think we should be very comfortable installing extensions at this point. We should. And then just search for keymap, and you'll see a bunch of them come up here. There's a Sublime Text. There is an IntelliJ. There's an Atom. There's even a Visual Studio Keymap if you want to come from Visual Studio to Visual Studio Code. Because these are different products. These are different products, yes. Similar name, very different products. Extremely different. One's about a gig, and the other one's about 50MB. Right, exactly. So you can install one of these keymaps here. I started with the Sublime Keymap when I came over because I came from Sublime Text. But I'll tell you this, keymaps are kind of like training wheels. They're great, but it's a good idea to sort of learn the keyboard shortcuts that are in VS Code so that you can at some point not have to use the keymap anymore. But it's there to help you make the transition, which I think is really neat. I used it for a while, and then I stopped using it at some point because I was super comfortable with VS Code. Especially if you're somebody who's been using an editor like Vim or Emacs for years, so maybe you just want to use the keymaps and then eventually switch over. Right, which is a good idea. It's just a great way to help you make the leap without having to make such a large leap. So that also brings you to, like sometimes you want a special keymap. Like I notice that I do a specific command a lot, and if I do that command, I want to make sure I can use a certain keystroke to do it. There's actually ways you can do that too inside of VS Code. So you can pull in keymaps from other places, or you can set up your own custom, they call them key bindings, right? Right, exactly. So if you go to the Command Palette here, if you just look for Keyboard Shortcuts Reference here, I believe is what you're referring to, you can go click on this, and, oops sorry, let's do, what we want is Preferences Keymaps. Keyboard Shortcuts actually takes you to a document that tells you what it is. They keymaps opens --- Those are all the ones from like Vim, or Emacs, or App, right? Correct. There is one for Vim. Look at that. I didn't realize that. And then let's see here. And then Preferences: Open Shortcuts. Keyboard Shortcuts. This is the one I was looking for here. And these are all the different shortcuts you have. So if you wanted to add in a shortcut for something, you could just come here, find something that's in the list here, and then like, I don't know, Disable ESLint. Let's say you just want to, and then you would come up and just add a, right, so it's Command+E, T, G, H, I don't know, something like that, right? And now you have a keyboard shortcut specifically for that, so that's how you'd do that. And if you're not sure if it will override something else because there's like WHERE clauses in this where you can say under this context, only when I'm in a code window do this, for example. You can actually go to the keybindings.json file, which is right there in the upper right. So if we click on that, then you can see all the key bindings are already in there. The right-hand side's the ones you've customized, and the left-hand side is, that's actually a place I'll actually search a lot going when I set my keystrokes, I want to make sure I'm not overriding something really important. Right. Very interesting. And you can see I've actually got one here set up myself set up for Emmet, which we're going to talk about here in a moment. Great.
Emmet for HTML Files
So Emmet. Emmet. What's Emmet, and who is he? Emmet is a productivity tool that helps you to generate markup in CSS a lot quicker than you might normally be able to do it. So the best way to think about this is to look at an index file here. So I'm just going to open up an index file, index.html, and there's not much in here right now. This is basically an empty file. But usually when we're creating HTML what we do is we open up this left bracket, and then we type in a tag, let's say div, and then we close it, and then the editor is nice enough to close the tag for us. But this whole Shift, open bracket to the left, Shift, close it is kind of cumbersome, and we tend to fat finger that, or at least I do. I'm constantly hitting the wrong keys. So what Emmet does is it provides a syntax to make creating markup a lot easier by removing the brackets from the equation. So if we wanted a div, we would just type div, and this is Emmet right here. You can see it says Emmet Abbreviation. It gives you a preview on the right-hand side? Right, it gives you a preview of what's coming. You just say Tab, and then you get a div, which is nice. And this is built into VS Code, right? Right, you don't have to install anything, this just works inside of VS Code. It used to be called Zen Coding, right? It did, and I think there was some, like a naming conflict or something, so they renamed it to Emmet. So it's been Emmet for a while now. So that's how you would create a simple element, but Emmet goes further than that to allow you to create elements with classes and IDs because a lot of times you're not just creating elements. So, for that same div, let's say we had a class of navbar, and let's say that we had an ID of thenav. Okay, I don't know what it might be there. So, with this shortcut, this syntax, the dot means the class and the pound sign means the ID. And on the right again it's showing you exactly what you'll be typing in. Right, so before you commit, you can see, and then when you commit, it expands it out, and there you go. And what if you had like nested HTML? Could you do that? Right, absolutely. So you can do something really complex. So this is a good example right here. Let's just copy this one up, and then we'll talk about it. So this is some complex Emmet here, but you can see we have a navbar, and notice that I didn't even put the div. If you just put a dot, it knows that you want a div by default, it just assumes. Because everything's a div anyway, right? Right, exactly. There's no semantic HTML. Right, right. And then inside of that, we use this right caret to say okay, now we're going to go down a level. And I say I want an anchor with a class of navbar, and then the plus sign means I want something at the same level. Right, so this is another div with a navbar-nav. And then inside of that, I'm going to have an anchor, and I want three of those. So the plus is side by side, the alligator mouth, keeping it simple --- The right arrow. --- that's going to be below it like a child, --- That's down. --- and the multiplier is how many of those things do you want. Exactly right. And so I'm going to back up and then hit the 3 again so that you can see the actual --- That's a great tip. I'm going to interrupt you, that's a great tip. Sometimes you'll lose that preview, and all you have to do is back up one and go over it, and it gives it back to you. Right, you get it back. And this is really nice because once you commit, you're going to get a lot of markup here, but you can see the pipes are where the tab stops are. So, if we go ahead and expand this out, then we get all of this nice markup here, and we can just come here and add classes. And it tabs you through all the places that you'd think you need to put something in there, which is great. Right, and I'm fat fingering all this stuff now. Of course, which is why Emmet's so great, so you don't fat finger as much, right? Right, exactly. It reduces the amount of error that you'd be prone to doing. So this is Emmet inside of HTML. Now we should also point out that Emmet can do actually entire HTML files, so I actually use this a lot. I open a new HTML file, just touch create one, and then you can just say HTML, and you can see Emmet's got one here, just hit Enter, and then you get a whole file. That's nice because I always forget. You don't type this that often, right? Right. I always forget the basic of HTML. Nobody remembers. You're like I know I need a head, and a body, and a doc type. What's the schema? Nobody knows. Nobody knows. If you don't know, look, you're in good company. We don't know either. Yeah, what do we know? Right. So and then you can just Tab through these things, give the document a nice title, then just drop down to start creating your HTML. And actually, I expanded a little bit wrong. We Emmeted Emmet. I did because title's a valid tag, and it was like cool. That's like inception man. I know. Emmet inside of Emmet. So that's Emmet inside of HTML.
Enabling Emmet for Other Types of Web Files
Modifying Images with Emmet
Now let's come back to Angular and React, but there is something else that you taught me the other day that I thought was kind of neat is you can actually modify images with Emmet. Yeah, you can. So this is a really sort of weird trick that you can use with Emmet. A lot of times, tell me if this hasn't happened to you before, but you'll come over you'll say well, I have an image. And, in this case, let's say our image is this pug here. Okay, it just happens to be this pug. Alright, so we know that our file is, let's see, it's pug.jpg, right, because right because that's the relative path to our file, but what we don't know is how big this image is. Now if we come over here and look at the file, you can actually see, Visual Studio Code will tell you down here, 456x430. And it's always good to include a width and a height in your image so that the browser doesn't jump, because otherwise it doesn't know how much space to reserve.
Extensions for Lighting up Angular, Vue, and React
So what you can do with Emmet is you can come over here without knowing the width or the height and just open your Command Palette. And if you look for Emmet, let's see here, Emmet: Update Image Size right here, look at that, it knows, it's smart enough to know how big that image is, and it just fills it in for you. That's nice. This is one of my favorite Emmet tricks. You don't have to try to figure out what image sizes are anymore. So, that's cool. I didn't know that actually, so VS Code can do that, which is --- VS Code can do that. --- kind of cool. Hey, I'm catching a theme. One of the things you mentioned, we like React, Angular, and Vue. We kind of toggle between these things ourselves, there's extensions that you can use that will actually light up these different frameworks inside of VS Code. Why don't we show some of those? Sure, so there's a couple different ones. There's one for Angular here. There's the Angular 5 Snippets from yourself. Yep. There is one for Vue. Let's look at that one here. If you look for Vue, you'll see one from, the one that we recommend is from Sara Drasner who's on the Vue Core Team. Fantastic. This one depends on the Vue Tour. I think it's called. Vetur. Vetur extension. Vetur, but it'll install that for you, right? Takes a dependency, installs it for you automatically. Yeah, so what Sarah's does is something similar to what mine does. Sarah's is just the snippets, just the snippets. It's awesome, right? It's got snippets. But she depends upon Vetur. We'll show that real quick. Type that in, and we'll figure it out. The nice thing with that is Vetur is actually an extension that lights up Visual Studio Code with all like the IntelliSense and the features, so it knows what a Vue file is. Because with Vue files, you have .vue files. So the editor, by default, doesn't know what it is. It gives you all that stuff, so you can make extensions that depend upon other extensions like that. Right. So, for instance, if we took and said we want, say we have index.vue, and you can see we get an icon, Visual Studio Code knows. And then inside of that, now our extensions will work, our snippets will work, Sarah's snippets will work, and Visual Studio Code will actually --- Think if you do v- it'll bring up her extensions. Yeah, let's see here. Let's do v-. Vbase, there's a good one. And you can see how Visual Studio Code is just fine with all of this different markup inside of a file type that it previously didn't know about. And without Vetur it wouldn't know what these things are. It wouldn't know what to do, right. And the extensions of the snippets, of course, from Sarah make it far quicker to build Vue applications than it would be to try to roll without it. Yeah, and if you look at the Angular one, there's actually two that I put in there. One is the Angular Snippets, which is just the snippets, but I also created one called Angular Essentials. Oh, that's right. So one of the things like this, I learned this last year, you can create an extension that has no functionality. All it does is include other extensions. So, if you scroll down in the README there, it'll show you rest of those. I'll tell you what, I'm just going to open this. I'm going to use your trick and open this on the web so we can see it here. Yeah, there we go. So you'll see I've got my Snippets, so it's actually v5. That's my typo. I'll go fix that. So it includes my snippets. The second one is the Angular Language Service. That's kind of like Vetur does for VS Code. The Angular Language Service gives you like IntelliSense in your templates. Sometimes you're typing a template in with these frameworks, you have a binding to firstName, which is often your code. Well, maybe you spell it fName, or f-i-s-tName, you misspelled something. Oh, and it can catch that for you. If you're using this extension, it'll catch it, put a red underline on there. Wow, that's really nice. It'll give you IntelliSense for it. So if you're doing Angular, you need Angular Language Service, just like if you're doing Vue, you need the Vetur service to be there. Yeah, because template errors are hard to catch. They are. And then the rest of these here, like Editor Config, that helps you have the right spacing in your project; TsLint, because in Angular you use TypeScript, so it lints your code; debugging features; and then I put a couple others down there. We're going to talk about some of these later, like Prettier, one of our favorites. That's a good one. Yep. Path Intellisense, so you can find IntelliSense in your files in case you're going up and down the chain. Angular Inline helps you get templates like JSX. We can do inline templates inside of Angular. Oh yeah, that's right. Winter is Coming is a theme, so a little bit of selfless promotion there. Shameless promotion? Yeah, shameless, not selfless, right? It's the opposite of selfless. And then these things don't get lit up automatically. You choose what you want. And Prettier, which we will spend a whole section on later. We will. And we should point out that there is actually one of these for Vue as well. So if you look for Vue Essentials, Vue VS Code Extension Pack includes all of the extensions that you would need for Vue development inside of VS Code. Just install this, and that will install all the other extensions. And let's say you really like Sarah's extensions. If you can click on that over there on the far right and go over to the Marketplace. Sure. One thing I do a lot is say you know what, I really like what this person's doing. Sarah did a great job. If you click on Sarah's name, it'll show you all the extensions that that person authored, which is really helpful. Both of them are right there. Yeah, and that way you can kind of get an idea of okay, I like what she did here. What else did she do? Let me go find it. Let's look for this guy. I've heard he's pretty cool. Yeah, he's pretty cool. No, there's not anything there. You don't even exist dude. I don't exist. I should point out though that there is also one for React. It's got a bit of a strange name. It's called the React Food Truck --- Because that's how Burke rolls. --- and it's got emoji. We've already talked about that's how you know it's good. Publishing has a space in it. Ah, that's what it is. And so, yeah, it's the same kind of thing, right? Just a bunch of different extensions that I think would make your life a whole lot better as a React developer. So install the Food Truck, and you get all of the goodies on it. Yes.
Publishing Extension Packs
So those are great. We really liked those three, the Angular Essentials, which gives you Angular stuff, the React Food Truck because you have all the React stuff, and then the Vue extensions from Sarah gives you all the Vue things that you need. I actually have all three installed because I go between the different frameworks, and they don't run into each other, which is great. Yeah, it's really nice. And what I really like about it is a lot of people will come to the Food Truck, and they'll say hey, I think you should include this extension, and then other people will vote it up, and then we add it. And, actually, somebody else came in and I had one that I was including, and they said hey, there's a memory leak in this extension. Let's take it out until we're good to go, and we took it out. So the community's really great about helping out with these extensions --- It's all on GitHub. Yes, all of it's on GitHub. Making these extensions, extension packs is what we're really talking about here, is so easy. All you have to do is go look at one of our GitHub repos, which you can do through that web page. Just click on the GitHub repo, and it'll show you where the list is. Actually, let's go look at yours for a minute. Yeah, sure. Let's pick on Burke. Let's back up, or let's go to the top here. Let's come over to the Repository, and that'll take you to the GitHub repo. Notice there's no code here. But if you click on package.json, and you scroll down, we can see the extensionDependencies. That's just the list of --- Yeah, that's all it is. And therefore, you've published your first extension. Yep, you could totally do this. Anybody could do this. You could do your own. And I recommend you do this even for companies. I've had companies come to me and say this is the list I want all 500 developers to be using. How do I make this happen? Now you can use the Settings Sync, right? But maybe you want to create your own extension pack that would basically say here's the list I want everybody to use, and just, you can even publish it in the store, or you can sideload it. You can create the extension locally and then give it to people. Yeah, that's a really good point. So if you create the extension pack that has maybe all of the extensions that you want someone to install, and you use that in conjunction with Settings Sync, then on day one for someone that's new, they don't have to spend hours setting things up. They just run a couple commands, and their environment is ready to go. Because everybody loves when they start a new job and it takes them a month to get ready. Right, and that's always the way it goes, right? Like the first two weeks I got email running. That was what I did. That's awesome.
Code Checking and Debugging
Trying out the Interactive Playground
One of the other things that I really like to show people is something that gets glossed over a lot, including by myself. In fact, somebody on the VS Code team actually had to show this to me, and I was like wow, that's incredible. I bet a lot of people miss this too. So I'm going to come back to the Welcome page, and there's something called the Interactive Playground. It's right here on the Welcome page, but unfortunately it's below the fold, so you have to scroll down a little bit, and you'll see down here at the very bottom this Interactive Playground. So if you're just getting comfortable with Visual Studio Code or maybe you're not used to using a lot of keyboard shortcuts, that's okay. The Interactive Playground is here to help you learn those things. So if you click on this, you get this markdown file that you can come through and read, and it will teach you things about things like multi-cursor editing --- Oh yeah, one of my favorites. And as you go down here, it's going to give you some examples, so it's going to tell you what to do. And then you can actually come down, and you can use what you just learned, so we can add multiple cursors here, right? So we can, right inside the tutorial, practice the skills that we've just learned. So for anyone who's getting started with Visual Studio Code, I would highly recommend you take just a few minutes to go through the entire Interactive Playground top to bottom and go ahead and use those skills so that you can learn them. That's a great way to learn it, especially since you can do it while you're looking at it. Right, it's just right there inside the, all documentation should be like this. So to get there, we go to the Welcome page, scroll down to the Learn section. It opens up right inside of a new tab, right? Right, it's just there. And if the Welcome page is closed, you can always get back to that just by Command+Shift+P or Ctrl. The Palette. Right, the Palette. And then you can type Welcome page, if you can spell, and I believe you can go directly to the Interactive Playground. What's the most important keystroke to remember though? Command+P? Yes, Command+P. Yes, I got it right. Because it brings up your, it's your file, right? You can bounce on your files. And while you're in Command+P, notice, let's say you wanted to go look for the Welcome page like you were showing. I hit Shift and then the open, I can never say that. I call it the alligator. Yeah, right arrow. The greater than. I don't know what the name is. So I can hit that and it brings me into the regular Command Palette. So if I hit Esc, get out of there, Command+Shift+P brings me to the Command Palette. Hit Esc. Command+P brings me to the file --- Right, the file switcher. --- switcher, yeah. I call it the file bouncing thing. And you can actually, inside of the file switching, you can keep hitting Command+P, and it'll go through and it will down-arrow, or you can just use down-arrow. Oh, look at that. So I find --- But once you let up with that Command+P, then it jumps directly to that file. Yeah, so I'm in pollyfills.ts. If I hit Command+P+P, twice, so Command+P+P goes back to the file it used to be in, which is the Playground. Do it again, goes back to the last file. So you just switch between the last two files --- It's a great way to go back and forth between two files. Really nice.
Using the Common Keyboard Shortcuts
Alright man, so we've just talked about Command Palette and finding files, right, the Command+Shift+P and the Command+P, which --- Which are the ones you probably will use the most often. If you only learn two, it should be those two. And I only really memorized those two because everything else I do, quite frankly, is just I do this. After a while it's kind of just muscle memory. Right, you don't even know what you're hitting anymore. But we'll go through some of the more popular ones and how to find the keystroke combinations here. Sure. So let's just show the Command Palette real quick again. Sure, that's the Command+Shift+P or Ctrl+Shift+P. Yep, for Windows. And there's where you go up. You can type in what you want, and it shows the last couple commands you used up there, so we can see you used Mongo quite a bit. Right, yep. It bumps your most recently used ones to the top, which is nice. You type something in there like, let's say, Reload, for example, it'll show the Reload Window option. Then what we can also do is get out of here and just do find a file. So if you want to find a file, I don't go explore the whole Windows Explorer tree view on the left, the sidebar. Instead, what I do is I get out of the Command Palette, and I just do Command+P, and then you could just type the name of the file that you want to find, and it can be partial too. So if you typed in ex, for example, it finds everything with an ex in it. Oh nice, and it searches in different parts of the name as well and not just the beginning. And let's you wanted the jade file, just type jade right there after it, exjade. I know it's not a word, but it's really good about finding partial matches, which is awesome. So I find this super helpful, Command+P for file finding and Command+Shift+P. Yeah, those are definitely the most, the two most important ones. I like Command+Shift+P because a lot of times I don't know what I'm looking for, especially if you're using an extension. So you can just open the Command Palette, type the extension name, and then just look at the available options that are there, which is how I found the imagery size thing for Emmet. You know what I did once to learn VS Code when it first came out? Before they announced this, they gave me a copy. They're like try this out. First thing I did, this is because how weird I am, I opened up the Command Palette with Command+Shift+P, and I looked at every singe option one at a time. And I looked to see what does that do? What does that do? And I found it, it didn't take me that long. It took me about an hour, but it found, I was like wow, VS Code can do that. Yeah, it can do a lot of stuff. Yeah, that's actually not a bad way to learn. I do that sometimes too, especially with extensions, like I said, where I'm just going through, and I'm like what all does this thing do? That's a perfect way to find out. Because not everything's in the menu. No, and you're not going to read the docs. Nobody reads the docs. What? Read the docs people. Please, read the docs.
Finding References and Symbols
Efficiencies with Keyboard Shortcuts
So we've been playing around with the editor, and I think there's some keystrokes you've been using that I think that we should share with folks. Yeah, sure. So one of the ones I've been using a lot is I keep opening this sidebar and closing it again, and I'm just doing this all day. That needs a sound effect. I know. And the way that we do this is just Command+B, so this is another one that's very helpful to learn is to open and close the sidebar very quickly. A lot of times when I'm coding I'll be coding and I'm like man, I need more real estate, and I realize oh, the sidebar's open. Command+B, close it. You're good to go. Yeah, and sometimes the output terminal at the bottom will come up, well then you have problems on your screen. So if we clicked on, do you have any problems in your code down there? My code has never had problems before. But if we go to, so I'm going to open the sort of the bottom --- The terminal, right? --- the terminal. And that was what? That was Ctrl+backtick. Or grave, grave. I don't know what it's called. It's next to the 1. So everyone can make fun of the way I pronounced it. It's the key I always say that you didn't know what on your keyboard. Right, the tilde, the tilde key. Right below the tilde, yep. So it's right there, and that opens the terminal. You showed me this shortcut, which is Command+J, which just toggles this little section down here. Because there's other things in here besides terminal. There's the Output, there's the Debug Console, and so that's another very helpful one to learn. It's a quick way to get more real estate is Command+B gets rid of the sidebar. Command+J gets rid of the bottom panel. Right, because at some point you'll be in your app and it'll look like this. And you're up here, and then you're, oh okay, let's just get all this out of the way and more real estate. Yeah, it really does help. And something, and I'll show it over here on mine. When I'm inside of a file like this, let's say I've got this open, and it's hard to type like this. I do the Command+J. I do the Command+B, but let's say that I couldn't read my font really good. I can do is I can hit Command+plus, and it'll zoom in one at a time. This is a browser effectively, right? It's inside of Electron. That's the technology used. Or I could do a Command+minus to kind of go back out. And that's like insanely small, but you can kind of get the sense of what's happening. It looks like a mini map. Now when you're done, you can hit Command+plus back in there, Command+0 actually brings up your extensions. It's not like a browser in that sense. But let's say you get stuck in there. If you put your cursor back in the window, you start Command+plusing, if you go back to Command+comma, and you scroll to the bottom. And let's say I can't find it. We'll use the little technique I mentioned. We type in zoom, window.zoomLevel, and you can set that. Right now it's at a -1. So what I can do is just come over here, and I can type in 0, which is the default, and it will change the zoom to the default set. Back to the 0 default. So I like to save mine at 0, and that's when I do a settings sync. But sometimes when I'm presenting I kind of go in or I kind of go out like that, depending on the size your screen too, right? Yeah. And one other thing I like to do is under View, I'll actually use a menu in this case, there's something called Full Screen. Ah, Full Screen mode. So that is the Ctrl? That is, yeah, that is Ctrl+Option+F. And I think that's Ctrl+Command+F on this one I think, right? Ctrl+Command+F. I'm sorry not Option+Command, yeah. And that goes to full screen. It gets rid of the menus and everything else. And we can hit Esc. Then you can do Command/Ctrl+F again, get out of there. There's also Zen Mode, which is Command+K+Z, so you can go Command+K+Z, and that kind of goes into a Zen Mode there and gets rid of all your sidebars there. Right, no distractions. No distraction mode. Get out of my way. Burke is still talking to me. And you can still come up here. And if you highlight at the top, you still get your menu bar, and then you can get out of there if you want to too. And so it works the same way on Windows? It does. Very nice. It's very nice because it gives you more real estate. If I'm coding for 5 minutes, I don't do this, but if I'm coding for hours, sometimes I'm like get everything else out of the way. Yeah, distraction free. And when it comes to the text zooming what's really interesting is when I was, when I first started coding, I worked with a lot of guys that were older, and they'd have their font size zoomed in on their screen, and mine was really small. And now that I'm older, my font size is, I've zoomed in on my font size just because it's easier to read that way. It's nice, the more you learn some of these. It should be okay. And the more you learn some of these keystrokes, the better it is for you as you're coding through stuff. And, by the way, I have a bug here. I noticed as I was typing zoom, I put a z in there by accident. It'll actually tell you when there's a problem. That's right, you've got a little squiggly. And in the bottom left-hand corner, it's also telling me I have two problems. So I have problems. You didn't. But if you click on that, it'll show you the problems. Oh, look at that. It's type, it's type checking your JSON. Yeah, inspect the problem. Okay, I know the z doesn't belong there. Once I get rid of that, there's no problems. Command+J, make it go away. Nice.
Favorite Productivity Shortcuts
Efficiencies. We've just done a bunch of efficiencies, but there's more. There are more. In fact, there's a lot more, but I want to cover just a couple that I think are really important. Let's do our favorites. Okay, so one of my favorites is this whole copy, align, up or down. The reason why this is my favorite is because we do this all the time when we're coding. And you highlight the line. Right, so maybe you highlight the line, hopefully not with the mouse. Hopefully you're at least highlighting the line, Ctrl+C, hit the arrow key, Enter key, Ctrl+V. There's nothing wrong. It's not bad. It's just that there's a better way to do this. And if you can train yourself to do this, you'll speed up exponentially. So what you can do instead is just copy the line down. So with your cursor just on the line, nothing highlighted, you can use Option+Shift+down arrow, and that will copy the line down. It just repeats it down. Likewise, you can send the line up. Let's go here. If I come here to the, find my arrow keys, I can do Option+Shift+Up, and that actually copies the line up. It looked like it went down, but it actually went above it. So what I would suggest here is every time you find yourself copying and pasting a line of code down, stop, do Option+Shift+up or down and train yourself to duplicate lines up or down because you'll find it'll make you a much faster coder. Something else I've found a lot it's like, go to line 10 if you could real quick, super, because it is a super line. Let's say you wanted that to be below line 11. If you hold the Option and go down arrow, it'll actually take that and move it down as well. Right, you can move lines around this way, which is super nice. It really is helpful. Especially in a class, you've got, maybe you're like me and you like your property names to be alphabetical, and you like your methods to be alphabetical. Right, you're just trying to move things around. So you can grab multiple lines. So you could grab lines 14 through 18 and move those together. If you highlighted all those, and then you go up or down, and it looks kind of funny. Yeah, well it's indenting as I'm going, moving it through the file. Visual Studio Code's like ah, what do you want me to do with this? Little more dangerous, obviously, but it's super helpful when you're reorganizing and refactoring your code. One of my other favorites, that's a great one, but my other favorite is the multi-cursor. Now that's an interesting one. I understand what multiple cursors do, but I've not always understood where to use them. I have a hard time knowing when do I use multiple cursors? Yeah, it's funny because I'll use this a couple times a day in code, and sometimes it's not obvious where I use it. So I want to show you one place I've done it where I look at somebody else's package.json, and I want to install just a few things that are in there. So here I've got my package.json open, and I want to, let's say I wanted to go install all of the Angular dependencies here manually, like do an npm install. My endgame is I want to write npm install in all these things. I'm creating a README file, and I want to tell people what to install. So what I can do is I can highlight those like this, right, and I could copy and paste them and bring them to a new window, hit Command+N, there's a fresh window, paste them in, and I can then manually edit these. Or, because that would take a while, right, I'll get the npm install, blah, blah, blah. I do a lot of cutting, and pasting, and deleting. But if I use a multi-cursor, it's a little easier. So first, I start off looking for patterns. Everything begins with @angular in this case, so I'm going to start here, and I can hold Shift and go to the right arrow or I can hold Shift+Option and go over by a word like this. So I've now selected the quote all the way through the letter R in angular. Now I can hit Command+D, and it's looking for and selecting the next match. And I'm repeatedly hitting Command+D to get all those. So now if I go to the left arrow, you can see I have a blinking cursor --- On each one of those lines. --- on each line. And I can use the right arrow, and you can see them kind of dancing around on the screen. So now I don't want the quote, right? Because I want it to npm install and then the name of the thing. So I just hit the backspace, gets rid of that. Then I'm going to hit Esc and get out of that mode for a minute, and I have one cursor. The next thing I notice is I want everything from angular-devkit/core all the way over --- But you don't want that last quote either. Now I just can't search for quote because the rest of it's kind of, it's not a pattern, but I could do ": " because they all have that. So now I do a Command+D, and I'm going to repeatedly go through there. I found every one of them. I hit the Delete. I then do Command+Shift, I have to look what I'm doing, right arrow. Right, so now you selected the rest of the line. Rest of the line, Delete. Now here's the interesting part. Now I'm going to hit the right arrow and go to the next line. Notice the cursor is on lines 2 through 12. I don't have line 1. Yeah, so what happened to that line 1 cursor? So when I hit, I'm going to hit back-arrow now. That's where it was. So I still have, I have 11 cursors, but I'm going down, and now I'm going through lines 2 through 12 instead of 1 through 11. I hit the Delete or the Backspace. Oh, and it moves everything, it runs a backspace on every line. Everything went up. Then I hit space. And it runs a space on every single one of those cursors. Like that. Hit Esc, I hit Command and then the left-arrow, and I type in npm install. And I go over here, and I could type in --save-dev or whatever I want, and boom. Now I've got the line of code that I can put in a README file. Okay, so that's obviously way, way, way faster than manually doing that, right? Yes. That's a huge pain to have to have to do that. Hey, let's try it, right? Which this is what I do. Now you're coding like me. I'm messing up, and it's hard to do. Let's say I wanted everything 2, but I didn't want 1. Let's say I didn't want these platform, the ones that've got the word platform in it. So I can come over here again. I do the Command, sorry, it's the Option+Shift and then the right-arrow, found this, Command+D, Command+D, and I'm going down. When I'm highlighting the one that I don't want, now I can hit Command+K then D while holding the Command key. Oh, and skip right over it. Skipped over 8, skipped over 9, skipped over 10. I do want 11. So now I can take these and say you know what, maybe all I wanted was platform. Watch this. Command+X. Takes out all those lines. It deleted everything that I had highlighted and left the ones in there. Wow. So multi-cursor is super powerful. There's 100 more things you can do with it. But I've found this useful, especially when I'm doing massive editing. Somebody will give me a comma delimited file sometimes, and I want to change that over to a different format, or I'm just editing raw data, package.json to convert, and it's actually valuable inside of Code as well. So if I'm inside of a Code file, let's say this filter, well let's go down to a component real quick. We'll go into a session-list HTML. From inside of HTML, I can find everything that's got an li. Maybe I want to change everything that's an h4 in my project to an h3. I can highlight all the h4s like this. Is that with the Command+D? Command+D, and I've got to go to h1 or 2 like that. So you can use it inside of HTML. You can also do it inside of a TypeScript file. Let's go down to sessions.component. That's not a very big one. Let's go to a different one. A lot more code in here. Let's say you didn't really like the spaces after the imports, you could come through, highlight all the imports like this, Backspace right there. Now you go to the end of the files, do what you want to do. You can then look for everything that's space curly brace, highlight them all, get rid of them in all of your files if you want to like that. Multi-cursor, super powerful, really easy to use. There is, I should mention, in the Command Palette, if you look for match, Select All Occurrences of Find Match. It's not a keystroke, but you can map your own. What that'll do, if I Ctrl+Z out of here, let's say I wanted to find everything that said the word import. Instead of hitting Command+D each time, which I can do one at a time like this, I hit Esc, get out there. If I highlight the word import, go to my Command Palette, and I do Select All Occurrences of Find Match, it'll find everything in the file in one keystroke. Wow, okay, so that's really nice. I did not know about that. Yeah, and that's, obviously you're going to use it. I don't use it as often because I like to manually check. There's no option to skip one when you do that. Oh, okay, it's all or nothing. Yep. So just a couple of things, some of our favorites, move up and down, --- Moving lines up and down, copying lines up and down, multiple cursors. --- and the multi-cursor, which just sounds cool. Yeah, it does. Plus, you can tell all of your friends. I use the multi-cursor. Watch me multi-cursor.
Formatting Code with the Prettier Extension
So we've done a lot with like co-deficiencies, a lot of refactoring, and kind of keyboard intensive stuff. But it's kind of nice if things just automatically work for you sometimes, like formatting your code the way you just want it to work. Wouldn't it be nice if you didn't have to do it later on, like as you went along, it just worked. If I could just make my code pretty. You know what you need? What? You need the Prettier extension for Visual Studio Code. What's it prettier than? Well, it's prettier than the code that you had before. Oh, okay. Alright. Yeah, so the Prettier extension does exactly what we just talked about, but it does it as you go along, and so the best way to show this is to actually see it in action. Before we do that, of course, you have to install the extension. By this point, you should be very comfortable with installing extensions here. So we're just going to look for Prettier, and here it is at the top, the Code formatter, and you'll just install this extension here. You'll be good to go then. Quick tip too as you're looking through them, I see a lot of these, there's Prettier, Prettier Now, Prettier, etc. We like the one by Esben --- Esben Peterson, right. And that's the one that a lot of people like. If we go out here, you can see it's got over a million installs. Believe it or not, I actually look at that. If you've got a million installs, I'm feeling pretty good about it. Right, I feel like a lot of people would have ditched the extension if it wasn't going to be top notch, and this one is top notch. Esben, if you're watching this video, well done. Yes. So now that we've got this extension installed here, let's go ahead and take a look at how it works. And, in this case, what I'm going to do is just start writing some code, so I'm going to use the Fetch API, which is just a new API for doing AJAX calls, and then we would call maybe some-url. And then after that, we get a promise, and that promise returns a response, and we're going to take that response and pipe it into a method that we're then going to take and say we're going to take that response, and we're going to turn it into JSON. This is just how the Fetch API works. And then we have another promise on the end of that. And we're going to take that JSON, and we're going to send it back and do something with it. I'm going to say console.log the json. Good old console.log with kson. With KSON, not JSON, but KSON. That's his cousin. So the problem here is that a lot of times we write code like this, and then we're like I don't really know what to do with this line. Maybe I'm going to move this down. I'm going to indent this. I'm going to move this one down. Oh no, I don't like this. I want to move it back over here. Or maybe I'll put this one on this line above and then it. And the problem is if everyone is doing it differently all the code is going to look different. And what Prettier does is it allows you to format this code so that it all looks the same. So for instance, --- To your own custom rules. Correct. Which it comes with predefined settings. It comes with predefined sets, and we'll talk about how to tweak those in a second. But what you're going to do is you're going to open the Command Palette, and then you're going to select Format Document, or you can use Command+Shift+F to do that as well. When we hit this, you'll notice that it's automatically going to move this down and format this based on some predefined rules. What's also really interesting is that if you leave the semicolon out, it will put that in there for you. So if we go back and hit Format Document again, you'll see the semicolon comes back. Now you wouldn't want to do this every single time you want to format your document. You want it to just work, and so one of the ways that you can do that is to go into your User Settings, and let's look for, I've actually got it up here, but if we look for formatOnSave setting here, formatOnSave, and we'll just click on Edit, and we'll set it to True, and that will add this setting over here. And now when we go back, if we look, I can just click Save, and you can that it's automatically formatting my code on save instead of me having to say format document. You mentioned though that there's different user settings that Prettier has. So Prettier has a bunch of different settings, like do you want to use double quotes, do you want to use single quotes, how many, at what point do you want it to start breaking lines? All of that stuff is configurable inside of User Settings here. So you can see I've got my tabSize set to 2, I've got singleQuote turned on, I've got eslintIntegration in, which we'll talk about in a second, my tabWidth. But notice now, if I come back and I change this, so we'll say, let's say I use double quotes here. I'm just going to save this document, and you're going to notice it turns the double quotes back into single quotes. It's like none of our single quotes. We're in single quotes, right, exactly. So this is great for teams because it gives you a standard across your project. It's even great for a single person. Because how many times have you written a code document. Some of it's double, some of it's single, some of it's got different spacing. It makes it a lot easier to read through. Yes, yeah, absolutely.
Verifying Code Correctness with ESLint
Containers and Deployment
Debugging and Launch Configurations
What about debugging? I mean, I know you don't write bugs. No, I've never written a bug, but if I did, --- So this is a great example. Let me go ahead, and let's fix this code so it actually runs here. But Visual Studio Code has a debugger built in, and this is one of the more powerful, this is where we start to go from text editor to IDE, right, where we're sort of spanning the gap here, and that's here on this tab. Now we can run this file here with the debugger with actually no configuration at all. None at all. I don't believe you. Watch me. So let's go here, and I'm just going to hit the Play button. And it's going to ask me how I want to debug this, and it gives me some options based on debuggers that I have installed. Node comes out of the box free. You just get that for free. So I'm just going to select Node. It's going to run this, and then you can see I get down here the output that I logged out here. That's because your code had console logs. It has console logs. Now, because we're actually running a debugger, we could put in a breakpoint here like this. And if we run this again, select Node, now we hit the breakpoint. And we can step over the breakpoint for each time, and you can see it logging the answers out here at the bottom --- And you can change variables, down at the bottom you can inspect things, like look at what the value of i is --- Right, or we could look at the value of this and see what that is. Not that right here, but --- But the this keyword. Right, so it's undefined here, but, and then we can add watches. We can look at variables. We can look at anything that's in the call stack, the current call stack here down at the bottom and see where we are in the code. That great, and that's out of the box debugging. But what if you, like how did it know that, what if you have more than one file, for example? How do you customize this? So that's a great question. Let's go over to a sort of more complex example. So I'm going to go to an Express project here. Because some of us have more than one file in our project, right? Right, some projects have more than one file. So for this project here, what we can do is come to the debugger. This is an Express app, and Express runs with Node. And what we're going to do is just hit this gear icon and select Node, and then that's going to go ahead and give us a configuration here. So, in my case, it knows that my startup file is in bin/www because it's --- Let's go look at that just to see, show people where it is. So if we go to bin and then www, when you run this project you would say Node, and then you would point at this file. So it has intelligent defaults when you do these. Correct. And so if we were to go ahead and run this, it would actually launch our Express application, we can now visit this in a browser and check out our Express page, and the debugger is attached here. So that's how you can debug more complex projects, but --- And you can change those paths, like if those paths don't work for you inside that launch.json? Inside the launch, right, and you can have very sophisticated launch configurations, which is probably something that we should show. I want to show a relatively sophisticated launch configuration that deals with a scenario where we actually have a couple of different things going on in an application. So in this case, we have an application where we have a React front end, and that runs on webpack. And then we have an Express back end, and that runs on Node. And those two processes run separately --- In dev mode. --- in dev mode. Right, so the way that we would normally start something like this is we would open up a terminal here, and we would say npm run, and then I think I called mine start-browser. Okay, and this starts the React portion of the application, and it should launch a browser window on port 3000, which it does. Now you'll notice when this thing comes up, it should error out immediately because it's looking for a back end that isn't there. So it made an AJAX call and bombed out. You ran the React app, it's look for the Node app, and you get started. The Node app's not running. So what I want to do here is come back and say go to our debug, and we have inside of this particular project something called a compound launch configuration. So in here we have two different configurations, one to launch the browser, which we've already done, and then one to launch the server. So what we can actually do here is we can debug the browser portion and the server portion within the same debugging context. So let's come here and just hit this button, and you'll see we get, our browser window opens up, and now it's working here. And you can see we've got two different processes. So let's say we wanted to add a breakpoint when that AJAX call is made. Well, I happen to know that that happens right here, so I can drop a breakpoint here. That's on the browser side, and then I'm going to drop a breakpoint here. This is on the server side. And then when we come back and we refresh, we hit that first breakpoint, right. So we could debug here. And if we step through the next one, now we're in the server code, and we're hitting the server breakpoint. So we're debugging the client and the server, both processes inside of VS Code. Correct. Now a lot of people are used to debugging their front-end or browser apps inside of the developer tools. There's nothing wrong with that. In Chrome, yeah, which is what I do. Right, you can still totally do that. But being able to debug your code in the same place where you write it, there's something very powerful about that, and it provides a level of continuity. What's nice too is you have your choices. So like when I debug in Chrome and I'm running the debugger for Node locally here, when I launch in Chrome and I'm editing, if I've got a breakpoint in Node, as soon as that breakpoint is hit, VS Code takes the foreground and jumps over. So VS Code's trying to be intelligent on how do you want to debug? The entire thing in VS Code or part of it with a Chrome Browser Debugger extension, which is another extension, and some of it inside VS Code. Right, so it's just sort of up to you. What are you comfortable with? How do you like to debug? I do like this aspect of VS Code kind of jumps to the foreground, and it's like hey, you hit a breakpoint. You probably want to see this. Yeah, because otherwise your browser would be sitting there going you press the button to go get data, and it's just sitting there like --- And you wouldn't know, yeah. Anybody? Bueller? Bueller.
Database Extensions - Mongo DB and Azure CosmosDB
So we've done a lot with our Code editor so far, but we mentioned a little bit, teased a little bit about how not always are we writing code. Sometimes we have to interact with like cloud services, or databases, or something outside of our editor, and VS Code can do that. VS Code can do that. Alright. Yeah, so one of the things that makes VS Code really unique is that it's a text editor, but it also sort of spans the gap between text editor and IDE. And it can be as much of an IDE or as little of an IDE as you want. What do we mean by that? So a good example of that is an instance where we have a database. So, in this application here, this is a Heroes app, actually created by you, rebuilt by me. And this pulls data from a database that's sitting in Azure, so I'm not even on my machine. And a lot of times --- So it's cloud database. It's cloud database, yeah. And a lot of times when we're building apps against databases, the hardest part is that we can't see what we're doing. We're basically flying blind, and so we tend to install third-party administration tools and all sorts of stuff. But Visual Studio Code allows you to do a lot of this stuff right from inside the editor here. Through the extensibility model and the extensions you create, right? Correct. So, for instance, in this case, I'm using a Cosmos DB database in Azure, and that uses the MongoDB API. So I can install this Azure Cosmos DB extension if we just search the Marketplace for this, Cosmos DB. You can find that right there. And then once you install that, you get this little, what do they call these things, this pane. Is there an official word for this? Sidebar panel things. Whatever the official word for it is. There is a word for it. I know. I was like blade, or I don't know what it is. And so, in here you can see my actual Azure subscription. And then if I drill into that, you can see all of the different databases that are in my subscription. And then we can go into that even further, so this one right here's the one that we're actually connected to, and I can see the different databases. And if I go into that, I can see the different collections. Alright, so hold on. Top level, buhollan, that's you. That's my Azure subscription, right, and then this is my database instance, or my server --- It's a server. It's a server basically. And inside of that, I have a database that's just called admin. Probably not the best database name. That's what it's called. And then inside of that, we have collections, and the collections --- Collections because this is a MongoDB API. Right, collections of documents. And so if we were to click each one of these, we can actually see the value of the document over on the right-hand side. We can see all the documents by saying --- Which isn't entirely helpful, right, because you, open that up. I'm sorry. Sure. If you click that again to the heros and expand that, it's some kind of a weird GUID, right? Right, you don't know what that is. So we're going to have more than two. Which one is Batman? Which one's Darkwing Duck? So you can look at them individually, or you can just right-click and look at the collection, and then you can see everything that's inside of here, all of the data that's coming in. But wait, there's a better way, right? There is a better way. So you can also query your database directly. Because a lot of times the queries we're composing, we want to test them before we actually stick them into the code and then try to test them in the browser. That's not the best development loop. So to do that, we can use something called Mongo Scrapbooks, which comes with this extension. So I'm just going to open the Command Palette and search for MongoDB, and you can see this New Scrapbook here. We'll go ahead and hit that. And now we need to be connected to a specific database to use this, so I'm just going to right-click admin and say Connect. Now we're connected there. And now in my Scrapbook, I can hit, I can use the db keyword and then hit dot. This is using the Mongo API. This is the Mongo API, and it's going to give me IntelliSense on all of the different methods I can use against this instance, plus any collections that are inside. So we have heros here, misspelled, but that was the one we're working with. And then now here are all the different things that we can do on this collection. We can do something like execute a find, right, if we just wanted to look at the data. And then we can actually execute this command by doing Command+Shift+P and then just looking for Execute Command, or we can do Command+Shift --- Quote. --- quote. Single quote. Single quote, right, so let's do that. Command+Shift+single quote, and then that brings back the results of that query right here. So we can do all sorts of things here, right? We could insert records here, we can create, we can insert, we can delete records, and we can look at all of the data that's inside of our database without even having to actually have another tool installed. Even more interesting is that you actually can use any MongoDB database, so you could just do attach to a local instance because a lot of times it's local. Here it is right here. This is my local instance of that same database. And all the stuff that I could do in the remote instance, I can do on the local instance too, including spelling heroes correctly this time. So to do this, you also have to make sure you're connected to the database, right? Because you could have multiple databases in here like admin, and local, etc. Sure. So you could connect to those, and there's some icons up here in the, whatever you call that, the blade panel thing, right? I'm sure there's a word for this, and the VS Code friends we have will make fun of us. You can attach an account, which let's you go talk to Mongo in this case, or DynamoDB, etc. But if you go to the right of that, there's also one for the Scrapbook I think. Let's see here. Let me get out of here. Let's Escape out of this. This one right here? That should open up and create a new one. This creates a new database or collection, depending on where you are, right? Depending on the level you are in the tree. Yeah, so this one creates a new Scrapbook. And the scrapbook is relevant to whatever you are connected to. Right. And it says Connected right there. So, if you want to connect to this one instead, right-click, Connect. Now you're connected to that one. The Scrapbook always responds to whatever you're connected to. Awesome. So you can find. You can also delete, update. You can execute any, any command you can execute from your app, you can execute from the Scrapbooks, and it's just a great way to make sure your queries work before you put them in your code and test them that way. I agree, and I enjoy doing this quite a bit. And I've also used it to, like I'll have a local MongoDB instance because you can create a connection with that, and I'll have my one in Azure. And sometimes I'll be working locally because I'm offline, and I'll be editing it, and I've got a bunch of data. I've got Burke, and John, and Sally, and Mary. And then I want to copy that data from one to the other, I can actually run a find query on the local one, grab the JSON, go over to connect to the one in Azure, and then I can run an insert query, copy and paste the JSON, and a quick and easy way to get demo data up into the cloud. Right, anybody that's used something like Visual Studio and SQL Server before has that same sort of integration, right, where you can insert your data. You don't have to be somewhere else. You just do it inside of your editor. Another cool thing that you can do is you can actually get the, so let's connect here, you can get the connection string to the database, which I think is --- Super helpful. --- super helpful, right, so Copy Connection string; otherwise, you've got to guess at the connection string, which has a special protocol, it has a port, it's got a token key in it. Right, nobody likes to manually compose connection strings. One of my favorite features, if you right-click on that one, you'll find you can Open In Portal. So sometimes you're just like you know what, I want to see how this whole database server is connected and configured. This will actually go after the Azure portal in this case and find that Cosmos DB server, and bring it to the page so you can see all of settings that you had because obviously the extension is doing everything. It's doing a subset of the most popular features, but maybe you wanted to geo replicate your data or something that whatever service you're using is doing. That's up in the portal, right? Right, but instead of having to go search through all of your items in the portal and find the right dashboard and click on the right thing, just go directly there. It's a deep link directly after the browser. Right, which is really nice. And there's a lot of extensions like this, like we showed the one for Cosmos DB. Right, there's one for App Service in Azure, so you can look at your App Services, you can deploy apps, you can stop and start. Push your web apps, right? Right, web apps. You can look at logs. You can stream logs. There's one for Azure Functions, which is serverless. You can create new ones. You can debug them. Which we have another Play by Play with me and Simona Cotin, and I will be talking all about serverless functions. If it's got Simona in it, you know it'll be good. It will. Yeah, so yeah, Azure Functions is a great one. There's a Docker extension, and it allows you to work with Docker. That's fantastic, yes. That's fantastic. You should do a Play by Play on Docker. We should. We should. And there's also one for --- Storage? --- Storage, that's right. The Azure Storage extension. Yes, blob storage, yep. Yeah, so there's just a lot of these. If you're working with a cloud service like Azure, there's a lot of tie-ins, and VS Code just sort of just works with Azure, which is the way it should be. Yeah, and it doesn't just have to work with Azure. So these are extensions, and you can actually run ones for Amazon, or for Google, or for other cloud providers if you wanted to. Yes, absolutely, and those actually, those do exist in the store, so you don't have to just be using Azure. Right. You can do anything you want. For Azure, which we happen to like using, there's actually an extension called the Node Pack for Azure, which kind of combines all the ones that Burke just went through, right? App Service, Cosmos, Functions, Storage, Docker, Azure CLI, we forgot to mention that if you want to do CLI commands on there or create ARM, which is Resource Manager tools. So that's a good one. The Azure Node Pack. The Node Pack for Azure has all of the extensions that I just sort of rattled off just in a nice, one, single install. One install, you get them all, you're good to go. Lovely.
Resources for Learning More VS Code
We barely scratched the surface of what VS Code can do, but we've got a bunch of resources that people can look at. And one of the ones is, of course, I wrote right here on Pluralsight, it's very in depth, quite a bit you can cut through, talks about a lot of the different features. Great for the fundamentals, excellent course for the fundamentals, yeah. Maybe you want a quick hit though, right? Sure, yeah, so you can go to the docs. You should always start at the docs. Code.visualstudio.com. There's also some good tutorials that are in the docs. There's one for Docker with some more coming soon. These are interesting because they sort of walk you through small things, so do this, and then there's two buttons at the bottom like I did it or I ran into an issue, and if you just sort of move through that way, great way to learn --- If you click I ran into an issue, Burke will come to your house. Yeah, it actually calls me, and then we walk, no that is not --- So if you want Burke to your door, that's the button. Right, it should say Burke comes to my house. There's also an awesome list, so we talked about some of the awesome things. This awesome list has tons, and tons, and tons of links to things in Visual Studio Code that are awesome. I've been through everything in this list, and there's some great stuff in here. There's a site called VS Code Can Do That? I think you had something to do with this. I did. I did, created by yours truly. And this has some quick videos in here that sort of show you a lot of the things that we talked about in this video plus some other things that we did not get a chance to go over, so this is a great resource. And then you definitely want to follow Brian Clark on Twitter, he's _clarkio, because he does all of the release announcements --- Oh, snap. It's another Visual Studio Code. --- for Visual Studio Code. I love that intro. So if you want to know what's going to come out every month with VS Code, Brian puts out a great little 2-minute video. Right, every month, and they're only 2 minutes, right? So basically, you get to find out what's in the release inside of 2 minutes, and that's it. It only takes 2 minutes of your time, so you definitely, definitely, definitely want to do that. So we'll provide links to all these resources that we have, and if you want to find me on the web it's @John_Papa --- And I'm just @burkeholland. --- on Twitter. And we look forward to hearing feedback from you all and hope you enjoyed learning that VS Code can, indeed, do that.
Released15 May 2018