What do you want to learn? Leverged jhuang@tampa.cgsinc.com Skip to main content Pluralsight uses cookies.Learn more about your privacy 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 Description Transcript Exercise files Discussion Recommended Course Overview Course Overview 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 So once you get VS Code, the first thing people want to do is customize it and make it their own. Can you show a little bit of how to do that? Yeah, absolutely. So you're exactly right, people want their editor to be a certain way, and people have very strong opinions about, you know, light themes, dark themes. I'm a light theme person. I like light themes. And I'm a dark theme. There we go. So, and a lot of people disagree with me. There's a lot of dark theme people out there. So one of the first things you're going to want to do is look at the themes. So one of the ways to do that is to open the Command palette, which is Command+Shift+P, and then just type in themes, and you get Preferences: Color Theme. And if you click on that, you can see all of the different themes that are installed. And if you go between the themes, Visual Studio Code will actually update in the background, so you don't have to kind of commit until you see one that you like. It's nice to kind of have your own project up, your Angular, React, JavaScript developer, whatever, C#. Keep up your code in the background while you're doing this, and it'll actually flip through and show you what your code will look like, right? Right, that's an excellent point. So let's pull up some React code here, and then we can go back to our themes and you can see sort of how the code changes in the background. You can see it there. Now I use a theme called Hop Light. It's my favorite theme. I like the purple. I like the blue. I like light theme. There's another one that I've heard about that's very popular called Winter is Coming. Have you heard of this one? I may have. Well, I don't have it installed, so I can type it here. You can see it says Install Additional Color Themes. If I click on this, this'll take us out to the themes gallery, and then I can just look for Winter is Coming. There it is right there. Oh, John Papa. Oh, nice theme. And this comes with a dark and a light --- Oh, does it? --- because of people like you, yeah, who want one or the other. It's hard to make everyone happy. Yes. So there's a lot of really good ones out there. Another one is, if you're coming from an editor like Atom, Atom, there's an Atom light and an Atom dark themes, Atom One Dark and Atom One Light. These are really popular as well. So medically speaking if that's your thing, that's what you want to do. Now what's interesting is that that's actually a very garish color combination. Blue background with yellow text. With bright yellow text, right. It actually doesn't, it's not that pretty. But if you're looking for a good medium here, there's one called Cobalt2 from a guy named Wes Bos, Cobalt2 Official. Yep, that's another good one. Yep, and this will give you that dark blue background with a bright yellow text, and he does a really good job of making it as pretty as he can under the constraints. It's got to be good. It comes with an emoji. I know, it does. There's an emoji in the title. That's how you know it's good, anything with an emoji. I need to add an emoji to mine. Exactly. Now that takes care of your fonts, the color of the text, Customizing Your Icon Theme but there's other kinds of themes that you can install as well. There's icon themes. Yeah, you can install icon themes, which is nice. Because out of the box, you've got these folders on the left, right? And if you open that up, you can see like for your JavaScript files and stuff, you've got some kind of an icon theme already. Right. But out of the box you don't get that, right? Correct. Out of the box, you don't get an icon theme. There are some icons, but you can install one. The one that's probably the most popular is one that's called Material Icon, so I'm going to switch over here to --- That's what I use too. --- right, another instance, and we can take a look at that. So what you would do is open your extensions and just look for Material Icons, and then you'll see it right up here at the top, Material Icon Theme, and then what that gets you is some really cool icons. So you can see here, here's just a couple of different examples. It's got a flask here for a test file. This is my personal favorite. You get a pug for jade and pug files, right? You like your pugs man. I do. I really like pugs, a well-known fact. And then you get, like if you have dockerfiles, you get docker icons and stuff. So just a really, really cool way to be able to very quickly differentiate between what file types you have instead of just having the same icon for all of your files. It is nice. Because when you turn those off, and I don't suggest you do, but if you turn them off, it's hard when you have a large project to identify. This gives you a little bit of an identifier of oh, that symbol's a node file or that symbol is gitignore. Exactly. And because we've come to associate these logos and stuff with these types of files, it's just really good for your brain to be able to quickly switch between files. Now to show a little contrast, looking over at my computer you can see I've got the Winter is Coming Dark Theme up. I like to keep up like an HTML file or a JavaScript file. I'm going to Command+2 real quick so I can open up a Command and the 2 key so I can open a second window, and I'll open up something with TypeScript in it. So now you can see those side by side, and then you can flip through your themes, as you mentioned, where you can say okay, but what does it look like in both? Red, wow, no thank you. Yeah, that one's really, that's something, isn't it? Sorry whoever likes that one, but that's kind of crazy. So you can flip through these and see all of these, which is nice, and hit Esc if you want to get out. I find that useful going through here to make sure that when I choose a theme, sometimes you're just looking at just HTML, and then you realize later you go over to the TypeScript or JavaScript, and you're like oh my gosh, --- Oh yeah, that's a good point. So you can see the different types of files. You know, I also notice a lot of people when they're looking at extensions, they click on this button over here on the left. You get the RECOMMENDED at the bottom. I personally don't want to see the RECOMMENDED, so I make that go away. But sometimes it's kind of hard for me to type in here and see everything. So if I type in Winter is Coming, right, and I search for it, it'll look for it, as you did, but maybe I want to go to the Marketplace. Well, that's kind of cool because I can click on the title up here, right, --- Yeah. Oh cool, and it launches in a browser window. And then you can go and click on the breadcrumbs at the top, like Themes, and say I don't like this theme. I want to go look at what else is there. And they sort them by default by number of downloads. And you can search through up here as well when looking for them, and you can find pretty much anything. Like there's Dracula theme, and --- Yeah, there's a couple new one, the Material Theme. That one's pretty cool. Yeah, and there's plenty of options. So there's two ways to search, right? There's inside of VS Code, or you can go right out to the website and do that, and I found both are pretty powerful. Yeah, that's really nice. Searching on the website is definitely, because you're sort of restricted inside of VS Code in what you can see, so sometimes it just helps you to be able to see more in one spot. It is good, and it's important we start with customizing, right, because people really get attached to the renderers. It becomes an extension of them. Right, it's personalized. It's very personal. Yeah, it's yours. And we're not suggesting that. We spend all day in the editor. You don't want to spend all day in an editor that isn't comfortable, right? No. These are our tools, this is what we do all day long, so it's important that it's someplace that you enjoy being for long periods of time. It is. Especially if you want to be efficient at it. And by no means are we saying that these are the themes you have to use or this is the way you have to do this. Right, no, just these are the options, and there's so many themes out there. I mean, there are tons. You could spend an entire day going through themes, which is fun. And you can also customize the themes like I did. That's true, or make your own. Make your own theme. For a while my theme was only a local theme that I used for me, and then I decided to share it. So plenty of ways you can do this. The docs site for VS Code tells you all how to do that if you want to get that deep. How to make your own theme. But to start out, I recommend you just pick one and kind of roll with it. Go from there. Customizing Font Ligatures So, we've talked about how you can customize it with themes and icons. But if you really want to take it to the next like uber level of customization, one of the really cool things you can do, and one of the things that the Code team actually uses themselves is something called font ligatures, which is a custom font for Visual Studio Code. So the first thing that you need to install that is you actually need to download this font called Fira Code, so I'm going to come out to the browser. And you can just Google for Fira Code, and that will bring you to a GitHub repo, and inside of that is the TTF file, or the font file, that you need. If you download that and double-click it, your operating system will come up and you can add it to your fonts. Now once you've done that, it's on your system, you just want to add it to Visual Studio Code. So you'll hop back over to Code, and you're going to open up the User Preferences. The shortcut for that is Command or Ctrl, and then comma. Yeah, Ctrl on Windows, right? Yeah, Ctrl+comma on Windows, Command+comma on Mac, and that brings you to your User Settings. I'm going to zoom out a little bit here. And then you can see I've got a bunch of settings in mine, but the one that we're concerned with, we'll go down to the bottom here, is a setting called editor.fontFamily. So we're going to set the fontFamily to Fira Code, which is the font that we've downloaded. And then we're going to turn on this thing called fontLigatures. We're just letting Visual Studio Code know that this is a font ligature. So, when I save this, the font's going to change, but it looks mostly the same. Where it gets really interesting is if we come back over to our App file, you're going to see that we're going to start to get different symbols for what we call compound characters. So, for instance, when you have a fat arrow in JavaScript it's an equal sign and an arrow and a caret on the end. Well that's actually a fat arrow. And so what the fontLigature does is it actually makes it into one fat arrow, right? Like this is one character. Another thing that it does is if you use like two equals signs, so let's find a place where we've got an equal, so if we say equals, we actually get a double equal, not two equals. Of if you not ==. Right, you can do, or you can do not equal, and you get an equal sign with a line through it. Or even ===, you actually get a triple equals sign. So it's really neat. For me, it's the little things that sort of delight me and make me really enjoy my code. And it's still a monospaced font, right? Correct. Because that's important for code. Right, and it's going to look the same, right, for someone else that doesn't have your fontLigature. They're going to get triple equals, while you get the special symbol. So if you don't mind, let's try this real quick. Can you open up the User Settings again real quick, and I like to do this sometimes when I'm playing with a font. Sure. Maybe I'm not sure I want Fira Code, but I watched this video and I liked this, I want to try it out. After Fira Code, you can do comma and then another font name. For example, you can do something like Inconsolata, or Menlo, or whatever your favorite happens to be. Okay. So you can actually put them actually both in the same line. So, right on the same line as line 46, type in Fira Code comma inside the quotes and do Menlo. Now that means it's going to try Fira Code first. If it's not installed, maybe somebody hasn't downloaded and installed it, then it'll go to the one that's second in line. Oh, okay. Very neat. I'll also go to like Ariel, or Menlo, or whatever. I always try to keep something I know is on my OS, like on every OS, as the fallback. Got ya. So kind of like on the web where you'd have a fallback font just in case they don't have that font on their system. And what's nice about this too is maybe you're not sure which one you want. So if you want to try out Fira Code do this, save it, and then maybe put Menlo first. So, as soon as Burke puts Menlo first and does comma, all of his settings will update there too. So it's a nice way to try out fonts because they're very personal as well. Yeah, absolutely. 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. Maximizing Productivity Enabling Autosave 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 I think it's important to note though that we're not always writing markup in HTML these days. We write markup in Angular templates. Yes. We write markup in Vue files. We write JSX, which is not HTML, kind of HTML, but not really HTML. HTML-ish. And so we want Emmet to work in those places too. We want it to work in the places where we need it. So let's jump over to this React file and take a look at this. How handy that you have a React file just right here. It just happened to be there. I'm going to bump the font size --- So it's a JavaScript file that you're going to be wanting to type HTML-like syntax. Correct. So if you don't work with React, what React does it has you type your markup just right here in this render block. I mean, you just type it right in the JavaScript. And React is smart enough to know oh, that's not JavaScript. That's your template that's marked up. And so, if we type div right here, you can see VS Code's also smart enough to recognize that that's markup. I'm going to color code it the right way. Because blue is a good color. Blue is an excellent color. And so I'm going to take this out though and show you that if you type div, you don't actually get what you think you're going to get. You actually get the JavaScript equivalent of what a div would be, which is HTMLDivElement, and that's not what we want. Right, and it starts doing the autocomplete because it's not sure if you want JavaScript or HTML at that point. Right, we're in a JavaScript file, so it doesn't know what I want to do here. So ideally what we want is for Emmet to work here, but not all over the JavaScript file, and Visual Studio Code can do that. So what we're going to do is open our user preferences, which is Command+comma on a Mac or Ctrl+comma on a PC, on Windows. And then we're going to come over here, and I'm just going to come down to the bottom. I've got so many settings. It's starting to look a little bit intimidating here. And what we're going to do is we're just going to add in a setting for Emmet, so let me see if I can squeeze this over. We can look at this a little better. But what I'm doing here is I'm going to map and tell Emmet in JavaScript files, I want you to use the javascriptreact language definition. And VS Code has this concept of language definitions. You can actually Google VS Code language definitions and see the whole list out on the docs. And then I'm going to do the same thing for markdown. So I'm going to say for markdown files, I want you to use HTML. And what this does is it enables Emmet inside of JavaScript files, and it enables Emmet inside of markdown files. So you're telling VS code, when I'm in JavaScript, use the React syntax JSX. Correct. And when I'm in markdown, keep using HTML. Right, that's exactly what we're doing. So now if we come back and we type div here, now Emmet's working again. Oops, I selected the top. There we go. Now at the top. So this is really, really nice because then all of the markup that we used before, like this long thing here, will now work inside of our JSX, and we don't have to sacrifice the productivity of Emmet just because we're not actually in HTML, which is really, really neat. And you can also notice that it expands to className. Because in JSX, class is not valid, VS Code is smart enough to change that from class to className, which is really nice. Right, because class is a keyword. Correct. Class is a keyword --- In JavaScript --- Correct. --- and in HTML with CSS. That's right. And so this also works in Angular templates and in Vue templates as well, so it's not just for React. If you're using any sort of these front-end frameworks where you're building template files and using a template language, then you can use Emmet there as well. 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 So other things we can do, which are cool, in React or Angular or just plain old JavaScript or TypeScript to C#, we could do find references. Right, so find references will show you all the different places where this reference is used in the file, and this is one of the things --- Or outside the file. Or outside the file. So this is one of the things that Visual Studio Code does really, really well is the tooling that it provides around coding that I think text editor users weren't necessarily accustomed to being able to have. We didn't know it existed, and then Visual Studio Code came along, we were like that's awesome. So, for instance, so for the find references, that's Shift+F12 here, and what that will do is show us any references. I don't have any. Yeah, let me go back to, let's highlight App here. Highlight what you want and then do it, right? There we go. And so we can see that it's here, and then it's down at the bottom as well. And then, of course, we can always edit while we're in this window. So this is Windows editor, so editable, so we can add in some value here, I guess. And if you wanted to go to that file, we could double-click inside of that window, the Preview window. Or if we wanted to get out now, we just hit the Esc key, and we get back out. Right. So if this was referenced in a different file, it would show up there, and then we could go directly to that file by clicking inside of that window. It's super helpful for refactoring too, like we're about to change the name of something from Burke to John, and you have no idea where it's used, but VS Code does because it can do that. Alright, so what about searching for symbols? Sometimes I'm in a class like this, and I think it's Command+Shift+O, yeah, or Ctrl+Shift+O, either one. So now it's finding all the symbols in your class like inserting file. So symbols are things like variables or classNames, etc. So in here, now it's finding all the different symbols. And as you toggle through them with your arrow keys, you're getting highlights. Now if you wanted to organize those by properties or methods, if you put a colon after that symbol, it'll actually show you, if you scroll back to the top I think, --- Yeah, now it groups them all together, look at that, classes, methods, and variables. And you get little icons, which I never remember what the icons mean, but. And this is really nice, especially when you have really long code files and you're trying to navigate inside. This is one of the more powerful features of Visual Studio. Yeah, have you ever had a 2000-line class file? I've had some huge, ugly files. I've written some bad code, yeah. It was like, otherwise, what are you doing? You're doing Command+F, right, search, find, finding the file. Where did I type this word? But the symbols sometimes are really, really helpful. And I think that's a good point that I use find all the time when I should be using symbol, and the find, find works, but it's just a way worse experience than actually using the --- Because it's just doing string matching. Exactly, yes. And here it's saying only find the thing called App that is actually a symbol in the code. Right, this is intelligent code matching instead of just string matching. 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 So Prettier is really, really powerful, but it's not the only thing that you would want to use. There's another extension that you should use with this called ESLint if you're doing JavaScript. ESLint for JavaScript or TSLint for TypeScript. For TypeScript, correct. And again, there's an extension for this, so you're just going to go look for ESLint. Here it is right here. I'd go ahead and install that. And what ESLint does is it is a set of rules for your code, and it tells you whether or not your JavaScript passes those rules so that you know when you run it you can catch errors ahead of time. So, in other words, maybe you have an unused variable or you've declared things incorrectly, ESLint will tell you about that. ESLint's more about rules that will warn you when you're not doing it the way you said you wanted to do it, --- Correct. --- and Prettier's more about, not a rule, but actually changing your code. Right, the visual formatting of your code. So once you have the ESLint extension installed, you can open the Command Palette and look for ESLint. And see it says Create this eslintrc.json File? That's the rules file. You just hit Enter, and now you've got one. If we come back over here, we should see an eslintrc right there. And it goes ahead and gives you some defaults here, and you can see it's things like it's going to warn you if you try to assign to a variable that's declared as a constant, just things like that. Things you would want to know before your application blows up in the browser. What's interesting is that Prettier and ESLint kind of overlap, so a lot of times people will lint for things like single quotes versus double quotes. Yeah, you can in some cases have and run both. So at some point they start to converge, and what you don't want to do is be defining rules for Prettier and defining rules for ESLint. What you'd like --- That collide, yeah. Right. You want to define them all here, and then have Prettier just abide by the rules that you specified in ESLint, and you can do that. If we come back to our User Settings file here, I'm just going to go, let's go back up to where I've got Prettier, my Prettier settings, and you can see that I have eslintIntegration set to true. And what Prettier's going to do is it's just going to defer to the ESLint configuration file for anything that might be overwritten in my settings here. So if you had singleQuote listed in the ESLint file and singleQuote listed here. Then it's going to take whatever's in the ESLint file. Even though you overwrote it over here? That's correct. Right, so that takes precedence once you have, and I would highly recommend using both of these tools, ESLint to define your rules, Prettier to define the formatting, and then defer to ESLint on --- Now I think it's important, you mentioned this, but to really, really stress that Prettier's for formatting, ESLint's more for code rules. So while there is some overlap like the single quoting, most of the stuff is going to be different in those files because Prettier really doesn't try to focus on did you code it the right way? It's focusing on how does it look? Right, what's the visual format in? It's very superficial. It's prettier. Correct, yes, hence the name Prettier. I'd like to show on Prettier, which I find fascinating as well, is in this file here I've got an array, which has got a bunch of things in the array. And when I saved it in here, it's all listed like this. So let me just DDent. Is DDent a word? It is now. Yeah, it is now. So I just made some weird formatting, and when I save that, it's automatically formatted --- Yeah, it bumps everything back. --- because I've got the format on save, but watch what happens when I get rid of like two of those items there. I hit that out of there, and I hit save, --- Now it moves it to one line. Yeah, I mean it's a really smart formatter, not just a simple formatter, like a really intelligent formatter. And I got rid of the trailing comma. So that trailing comma I left in a module, it's now gone, which is nice. Right, and that's an example of a trailing comma you can define in ESLint that's an ESLint configuration, and then Prettier will pick that up. Correct. You can also define things like the spaces, like if you want spaces inside of your curly braces like I do. When I save, it automatically does that. Should we get into a debate about whether or not we should have spaces inside of our curly brace? Spaces, or tabs, or --- Tabs versus spaces. But if you look inside this file, right, you're like I have printWidth set, singleQuote, brackets, pretty much the same things you had. I didn't, I'm not using ESLint in this one, so I didn't have that. But if you type in prettier, you'll also get a bunch of other things in here that you can set up. Yeah, the IntelliSense is really nice because, otherwise, you'd have to go to the Prettier docs and try to figure out what all of these settings are. And the integrations right now are eslint and styleintintegration, so you can integrate with either one of those at this point, which is nice. I don't usually define a lot here. I'll use like a prettierrc file if I want to do too many other file settings, or I'll use ESLint and integrate it like you were talking about. Yeah, and it's really better to use, like you said, the configuration file instead of the user settings so that it's, really the point of Prettier is that it's the same across all of the developers. Yes, especially in large projects with lots of different people --- Right, so you want to be using the same Prettier file. And we use this file at work. We do this. We use Prettier and ESLint and share those files so that all of our code looks the same. Absolutely. Prettier is great. There's competitor products out there, products, they're all free, Clang, or some people call it Clang or something. Yep, I've heard of that one. It's sort of a formatting file format. There's lot of them. Prettier really for JavaScript is the one that I enjoy. Yeah, I think that's the one that sort of the community sort of rallied around. It's a great one. Good job Esben, right? That's right. Good job, Esben. Containers and Deployment Checking JavaScript with the TypeScript Compiler So sometimes when we're typing in JavaScript and we don't have TypeScript, like in React, but we want to take advantage of the cool things that TypeScript gives you like type checking and making sure you don't have any errors in your code in JavaScript. Right, because the TypeScript compiler is really smart, I mean really smart, and it's great for catching errors. So you can actually type check your JavaScript with the TypeScript compiler. Because, to be honest, the TypeScript compiler doesn't really care whether or not you're using a TypeScript file or a JavaScript file. And you don't even have to install TypeScript because VS Code's built with it, so it comes with a version of it. Right, it just works. TypeScript just works, which is one very compelling reason to use VS Code. So regular JavaScript user typing in VS Code, put it together, and then you're going to show us how to find any bugs that might be hidden. Right, so and here's an example here of a bit of code that looks fine. There's no errors, looks good. There's actually several errors in this piece of code. This code is not going to run if we run it. So you've Rick-rolled your own code. I have Rick-rolled my own code, exactly. So we can use the TypeScript compiler by using this special @ symbol here, or excuse me, two slashes here, the @ symbol, and then ts-check. You can see the IntelliSense comes up, and it even tells us Enables semantic checking in JavaScript. Right, the JSDoc syntax, yeah. There we go. We'll hit that, and then you'll notice we start to get squiggly lines here down at the bottom. That's bad man. I know. It's not going to work. So what we can do is we can go down and click on this, or we can just hit F8, and F8 will toggle us through all of the different error messages. One at a time. One at a time, right. So you can say here it can't find name i. Well, because I didn't declare i. I just started using it as if it existed. And in plain old JavaScript that's okay, right? That's fine, right. But it's not the right thing to do, so we want to add this, and then you can see the error messages start to go away. You can see I've got another one down below. I said console.blog, which is not actually a method. Now, ESLint would catch something like this. Well, it would catch this error up here, but it wouldn't catch this right here because it doesn't know. Because in JavaScript you can have any property or method, you can define it on the fly. Correct. But TypeScript checks this, and check this out. If I hit F8 and go down, it says Property blog does not exist on Console. Did you mean log? So it actually knows about the different methods on the console object --- Which makes me want to try to spell it wrong lots of ways --- Right, to see what would happen. Did you mean this, that, or the other? Right, so we can take this out. Now all our squigglies are gone, and we're good to go. So put those back for a moment if you could. Ctrl+Z twice. Let's say we had that. Something I found fascinating too is if you hit the bottom left-hand corner where it shows the 5, it'll show you all the different places you've got bugs in your code. And you only had two, right. So what's happening here is because it's just plain old JavaScript, it's like I don't know what i is. All of those are different places i was used, four of them. Right, it's just repeating that. Yep. So as you fix them, if we get rid of this pane and you go back and fix what you did. Sure. So now fix the i, put in a let, you'll notice the 5 turns to 1 immediately. Right, the errors go away, so it's a good way to sort of watch your progress there. One of the things that's important to note is that this is cool, but if you're watching this you're probably like I don't really want to put //@ts-check on the top of every file. That doesn't scale. I don't really want to do that, which is fine. You shouldn't have to. So there's another option here. I'm going to take this out. That's 11 characters, man. I know. That's a lot. Well, over, and over, and over again until you get really sick of it. Especially in like 1000 files. So let's put this back the way it was. So what we want to do here is still use the TypeScript checking, but not have to declare that in every file. And we can do that by adding a setting to our User Settings file, so let's open that with Command+comma or Ctrl+comma on Windows. So User Settings you're trying to tell me is very important. User Settings is very, you'll find yourself in User Settings quite a lot. You will. And then there's a setting called implicitProjectConfig, checkJs right here. So maybe not the setting you would have guessed would do this, but this is the one, and it turns it on for all of the files in your project. And I bet you it'll find if you type checkJs, you just want to remember. Yep. CheckJs. Yeah, it's probably a better --- A little easier to remember. So let's add this, and then we'll save that. And then let's come back to our index file, and you can see our squigglies are back because it's now using the TypeScript compiler to check our JavaScript. Now I'm curious, the lightbulb, it has an idea. It does have an idea. Let's click on it. I It should automatically fix certain errors in some cases. In some cases, it can. In this one it is just saying Ignore this error message or Disable checking for the file. Right, so in this case, you can't do it, but sometimes it'll automatically fix things for you. Yeah, and definitely in the case of TypeScript. It's very good for TypeScript and figuring out what it can actually fix for you. Yeah, and that happens with like auto imports. You're using a module from another file, and sometimes you'll see the lightbulb because you haven't imported it yet. And if you open up the lightbulb, which is also I think Command+dot, it'll automatically --- Import it for you. --- import it for you. Correct. One of the advantages, one of the many advantages of using TypeScript. Yeah, it's just nice, the editor really does a lot for you. Some people say why do you use VS Code? Because it just, it can do a lot of things for you right out of the box. Right, it's all about productivity and tooling. 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. Next Steps 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. Course authors John Papa Burke Holland Course info LevelBeginner Rating (42) My rating Duration1h 29m Released15 May 2018 Share course