VS Code for JavaScript with Burke Holland

Joel: [00:00] what does VS code have going for it that makes it such an awesome tool for JavaScript [inaudible] ?

John: [00:04] If you could share your screen?

Burke Holland: [00:06] Let me share my screen.

John: [00:07] You're a champ, Burke. Thanks for jumping on.

Burke: [00:10] Let's start with the theming and the appearance. I think that's a great place to start. I use a light theme in my editor. Actually, interestingly enough, I don't know if you know this, but it's really bad for your eyes, apparently according to science, to use a light editor theme. [inaudible] says it's like staring at a lamp.

[00:28] It's 2018, and I don't need facts or science. I use a light editor theme, but if you do happen to care about [laughs] those two things. There are a couple of things that...

[00:39] [crosstalk]

John: [00:39] [laughs] I'm not touching that. I'm sorry.

Burke: [00:41] [laughs] There are a couple of things I'd like to recommend for the dark, for the Mr. Robots out there. One of them is a theme called Cobalt2 from a guy named Wes Bos. You probably have never heard of him. Not very well-known at all. That's a joke. [laughs]

John: [01:03] We're familiar with Wes and his wonderful work.

Burke: [01:06] Yes, we all are. In fact, we should plug Wes. He does really good work, especially with React and JavaScript. You should check him out. He created an interesting theme called Cobalt2. This one's interesting, because actually, the best color combination for your eyes is a very dark blue background, with some bright yellow text.

[01:23] It's just easier for your eyes to take that in. His theme gets closest to that. The problem with that general combination [inaudible] gaudy. It doesn't look good. His looks pretty, pretty good. That's a cool one. That's called Cobalt2. Another one that I like, a lot of people like, is Sarah Drasner's Night Owl. This is a phenomenal theme.

John: [01:44] That's my go-to.

Burke: [01:45] This is one is just beautiful. There are some really striking color themes. If you get the really good ones, as you can see, this one really pops the code. It's just right out there. I don't use a dark theme. If I did, it would definitely be this one. Of course, I got to stick with my light theme. I got to be contrarian.

Joel: [02:06] We won't get a Night Owl with the light theme, because she specifically built that to be an accessible coding theme, and not blast your retinas.

Burke: [02:13] Exactly. She doesn't want to hurt people, so she's not going to make a light theme.

Joel: [02:16] Sarah doesn't hurt people.

John: [02:17] We have to switch to Night Owl, then invert your monitor colors?

Burke: [02:21] Right. [laughs] She wants to respect your eyeballs, so she's probably going to stick with dark there, but that's a great one. Another one is, you can modify the little icons in the sidebar. Those are controlled by a different set of themes.

John: [02:35] I'm going to write Pug now, Pug files now, just for that icon.

Burke: [02:38] Yeah, just so you can get the Pug? Does it work when I zoom? Do you see that?

John: [02:42] No, I'm not seeing zooming.

Burke: [02:44] Zoom doesn't respect the zoom. That's super ironic.

John: [02:47] That is ironic. We're a deep now. I think if you just CTRL+space, command+space, whatever that'll be, make it bigger.

Burke: [02:54] It liked this, I guess. Let's see, how big can I make VS Code? There we go. It makes you want to use Pug or Jade so you can get the Pug. This one is called material icons. You know you have the right one because it's got, I don't know, so many hundreds of millions of downloads right here by Phillip, and four million. That's a cool one.

[03:19] Another one that people like a lot, or not theme-wise, but another visual tweak is font ligatures. Can we talk about font ligatures, or is that a hackneyed subject?

John: [03:29] I don't know. What are they?

Joel: [03:31] I don't know.

Burke: [03:32] We're good. This is good. Font ligatures, the default font in Visual Studio Code, I don't know what it is. You can supplant it with a different font and replace it. There's a couple of different ones, but there are some that support something called font ligatures.

[03:48] There's one called Fira Code. If we were to go out to the web and you look for Fira Code, it's right here. You can download this, there's a TTF file, you just double-click it, pray to God there's no virus there, let it install on your machine, and then you have it installed. Then, you can use it inside of VS Code.

[04:09] You can then set your font family to Fira Code, and then you turn this font ligatures option on. When you do that, the font changed slightly. I don't know if you can see that, but that's not where it shows up. Where it shows up is in your code, if you have something like, let's go here.

[04:25] You'll see it in places like this, where you normally would have a fat arrow which is the equal sign and an arrow. You get an actual fat arrow. If you were to do something like an if statement or if you were checking for equality and you have an equals, equals, then you get a double equals. If you have three equals, then you get an actual triple equals or a not equals.

[04:48] Font ligatures are characters that replace the compound characters that we have in programming. There's a lot of them where we use multiple characters together to represent what's could be one character. That's what font ligatures are, very cool. A small thing, but it's the little things, John, that bring me joy.

Joel: [05:07] A lot of people talk about them in a negative way in terms of one, accessibility, and then, confusing for newcomers where if it's what you're used to and it's yours to customize. That's why, generally speaking, you won't see them in an Egghead video, because people get bewildered.

Burke: [05:23] For the font ligatures?

Joel: [05:24] Yeah.

Burke: [05:25] One of the things I love about coding is that there's never any controversy.

John: [05:30] Everybody agrees.

Burke: [05:32] Exactly.

John: [05:33] There's no new framework.

Burke: [05:34] [laughs] You can safely do something and know that everybody will be on your side. Use font ligatures or don't, if you don't.

John: [05:43] Tell me what one you use for snippets in your pop-up snippet.

Burke: [05:45] I'm using an application called Snippets which doesn't work, so I can't recommend it. [laughs]

Joel: [05:51] Good kit.

Burke: [05:52] It's not working. It's not often you get a testimonial of what not to get.

Joel: [05:59] That's a different one, but all right. [laughs]

Burke: [06:00] I know. Let's talk about this sidebar on the right for a second, because you did ask about that, because by default, it's on the left. Toggle sidebar position. My default's over here, but if you Command or Control B collapses the sidebar. If you watch the screen, you'll notice that it's pretty jarring.

Joel: [06:20] They toss it out.

Burke: [06:21] Actually, moving the whole screen over and back, but if we move it to the other side, now watch. See that?

[06:29] [crosstalk]

Joel: [06:29] Yeah, no jumping.

Burke: [06:31] Does it make a difference? I don't know. Someone once told me that it's better for your eyeballs. I think it does. I've gotten used to it on the right now, but everybody usually points out and says, "What the heck are you doing?"

Joel: [06:42] That's cool, though. I like that. I've never even thought about it that way, but that jumping is annoying.

Burke: [06:46] Let's talk about [inaudible] for just a second.

John: [06:48] In development, I've always put the bar on the right, but in presentations and what not, I've put it on the left because that's where people expect it. That's where they expect it to be. It's nice not having to bump it over, because your eyes remember where they were looking. At least, that's my thoughts on it.

Burke: [07:08] There's some scientific, probably the same person who studied editor theme and system study on sidebar positions. Maybe I should do this, get a government-funded scientific study for editor.

John: [07:18] Can you detach the sidebar now?

Burke: [07:20] Can I what?

John: [07:21] Detach, as in you can drag new tabs out into new windows. Can you detach the sidebar then?

Burke: [07:27] No, you can't. The sidebar is where it is, cannot be removed.

Joel: [07:30] Just randomly floating sidebars.

Burke: [07:33] You can toggle this thing right here. I don't know if you knew that. You can turn this off all together. There's shortcuts to switch between the different parts of it, so once you get those down, you don't really need it. Then, you lose your cool icons over here.

[07:46] Let's talk about Emmet for a second because there's always a few folks who don't know what Emmet is. That's totally fine. It's a faster way to write HTML even up to and including creating whole pages like that. You can do div with a class of main with an idea of main, because why not? Then, you get that, and then you can do complex HTML expansions this way.

[08:08] There's a whole Emmet cheat sheet you can look at. You don't need to memorize all that, just know that it does that. It also does some other cool stuff inside of HTML that you should probably be aware of.

[08:18] One of them is if you have an image, so VS Code gives you this nice IntelliSense. Usually when you have an image in an image tag, you want to give it a width and a height, because if you don't, then the page is going to jump around when the image is actually loaded because the browser doesn't know how much room to reserve on the page for the image.

[08:38] A lot of times, we don't do that because we're lazy. What is the width and height of this image? I don't know. One way to know is to go to the image and then look down here at the bottom. Emmet has this cool feature where you can do update image size, and it automatically brings it in for you. That is nifty.

[08:56] Another place where this works is in...

[08:59] [crosstalk]

Joel: [08:59] Does it do image analysis to put in the alt tag? Come on...

[09:03] [crosstalk]

Burke: [09:03] No, but Sarah and I actually talked about that because Sarah's written something that does that that actually analyzes the image. She's got a code pin project for that. We talked about making a Visual Studio Code extension to do that, too. We haven't yet.

Joel: [09:17] Sorry, I'm throwing in distractions.

Burke: [09:19] That was good. Emmet also works in Sass. Again, I don't know, say if you have a background or margin, you type willy-nilly and [inaudible] background BKG, and it knows enough to try to help you out there.

Joel: [09:40] I think my favorites on that are like W100 or P10 where you can expand, padding 10, and even skipping. You don't even have to type the colon.

Burke: [09:51] Like that right there. That's pretty cool. I didn't know you could do that.

Joel: [09:56] We're all learning today.

Burke: [09:58] Here's a cool thing. Check this out. There's two things happening here that are interesting. One of them is if you mouse over this main, it will actually start to expand even in Sass and show you what your CSS actually looks like. It's trying to help you out, like this is what you're actually targeting.

[10:15] Another cool thing is that it's highlighted this, and it's telling you, "Property is ignored because you set display:inline." This margin bottom is going to have no effect whatsoever. That's a very interesting feature that VS Code provides, is that it's looking at the spec and telling you ahead of time, "Hey, you're going to have a really hard time making this margin work, because that is not going to work in this layout."

[10:40] I make this mistake all the time, and then I sit around, tweaking that margin, trying to figure out what the heck's going on.

John: [10:46] Is that VS Code, or is that an extension?

Burke: [10:49] That's VS Code doing that.

John: [10:51] Oh, cool.

Burke: [10:53] You get that for free. Another cool thing that Emmet does that people always ask about is, it has this, sometimes you want to get a whole tag of text. Like, I just want to select this entire div. People will do this right here. It doesn't make sense.

John: [11:09] Boring.

Burke: [11:10] You can do this thing called balance. It won't select the inward tag, but you can do balance inward, balance outward, which are Emmet things. That will select the whole tag.

John: [11:22] Oh.

Burke: [11:22] You can just map that to keyboard shortcuts. I think I do control. It's like CTRL+shift+down. Yeah, CTRL+shift+down, CTRL+shift+up. Then it's just a nice way to select your tags that's cool.

John: [11:34] I'd always used the expand selection and collapse selection, or whatever that's called.

Burke: [11:39] Does that work? What do you mean?

[11:42] [crosstalk]

John: [11:42] I believe so. I don't think it's a plugin. If you search for the command, AI expand selection, that's the one. I'll have to try Emmet and see how it behaves.

Burke: [11:53] That's interesting. I don't know if the Emmet is the preferred way to do that. It's just the only way that I've found to select big chunks of HTML that's been embedded.

John: [12:03] Cool.

Burke: [12:04] Cool, that's Emmet. There's a lot of other cool stuff it does. It does math. It can do image sizes on even remote images, even images that aren't even in your project. That's all built in. Let's talk about Prettier. Prettier is great, because it's solving semantic, pedantic developer debates for you.

John: [12:25] We haven't had a style debate. I haven't had one in years, because of just automatically formatting. Who cares?

Burke: [12:31] Exactly, exactly. A good example of this, there's an extension you have to install for VS Code called Prettier. Everybody knows over here on the side, you just find a VS Code extension, and you install it. Then here's just an example.

[12:47] You have a long line like this, and you're like, "Well, I'll break this here. Maybe I'll put that there. No, wait, I'll put this here. No, that there. OK, that there," and then everybody does it differently. Then it gets super annoying. What Prettier does is it just solves this debate. What you can do is just do format document, and it will automatically format that for you.

[13:07] Now, you can tweak this. I've got mine tweaked for single quotes, for instance. I don't know if this'll come through. If I have double quotes here, first of all, it's going to get linted, because of ESLint. When I go to the format the document, it's going to change those to single quotes. It's just a nice thing to have, especially if you're like me, and you copy-paste from Stack Overflow a lot.

Joel: [13:28] Oh, yeah, 24/7.

Burke: [13:29] Right. I need that code formatted, so it looks like I wrote it. Prettier does that for me.

Joel: [13:34] Tricks of the trade.

Burke: [13:37] Also, with Prettier, you don't want to do format document all the time. You can toggle on format on save, format on save. Now, I've already got this setting in here, but there's another extension that you should check out called format toggle.

[13:52] [inaudible] turned me onto this extension. Toggle format on save, and all this does is, exactly what you would think it would do. If you toggle format on save, it turns on format on save. If I go back, put this back, and then save, it goes ahead and formats it every time I save.

[14:11] Sometimes, you check out a project, or you work on a project that doesn't use Prettier. If you have your format turned on, and you do that, it just ta-da, jacks up the whole document. It's just a quick toggle format on save, turns it off. Then when you save, it won't do that anymore.

Joel: [14:27] Jacks it up, or makes it correct? [laughs]

Burke: [14:30] That's right, thank you, Joel. It fixes it.

John: [14:34] Fun fact, it says Rick Astley there. On Egghead, if you get banned for being a jerk -- which happens occasionally -- every video turns into Rick Astley's "Never Gonna Give You Up."

Burke: [14:44] Wait a minute, how does that work?

John: [14:46] If we ban you, usually because it's jerks.

Burke: [14:49] That's what you get? I actually wouldn't be too sad about that.

John: [14:53] There'll be tweets. We get tweets like, "I don't understand why every video on Egghead is Rick Astley's Never Gonna Give You Up," which makes us laugh internally, and then block the individual.

Burke: [15:02] Can you guys do that to me? I actually want that experience.

Joel: [15:05] Yes, it's done.

John: [15:05] You want that experience?

Joel: [15:06] It was done last week.

Burke: [15:08] VS Code also does some cool stuff with telling you...Of course, this is ESLint, but this brings up a good point, because VS Code also does this. I'm going to go to type checking for a second, because VS Code actually does some stuff above and beyond what ESLint's going to do for you.

[15:25] In this case, there's a lot of problems with this code, not the least of which is, I wrote it. It's telling us here, we have unused variables, and things like that. That's good, but there's other problems here that ESLint cannot help with, because they're type errors.

[15:42] Even though we're not writing TypeScript, we can use the TypeScript compiler to check the code. The TypeScript compiler will lint your code, and it will type check it. Because it has type checking, it knows about methods and method properties.

[15:57] If it doesn't know, it won't say anything. If it does know, it will tell you. In this case, we can add a @tscheck at the top. I don't know if you saw that, but these things are still highlighted. If we hit F8 now, we can just move through our errors here. We'll just do that. Then you can see, it's picking up this one, "Property blog does not exist on type console."

John: [16:21] It should, it should.

Burke: [16:23] Exactly. My job would be a whole lot easier. This is the TypeScript compiler in action. It has more information on these things, and so it can fix that stuff for you. Then you can hit command-. or control-. and change spelling to log. It will automatically fix it for you, too.

John: [16:41] Nice.

Joel: [16:41] Can you have that run automatically, without the comments, like globally with your project, or do you have to do it individually?

Burke: [16:46] That's a great question, Joel. Nice tee-up there. You can do over here in your user settings, implicit project config. Come on. JavaScript, implicit project config, check, check. It's somewhere in here. Hold on, I think I already have it. Right here, check JS. You set this to true, and it will do it on all your files, all your JavaScript automatically. If we change this back to blog.

Joel: [17:13] That's cool. TIO.

Burke: [17:15] There you go. As a JavaScript developer, you can exploit the benefits of the TypeScript compiler without actually having to use TypeScript.

Joel: [17:24] Do messages, bracket-zero-dot-something, then dot-name or something. It's going to know that's a string because TypeScript would know.

Burke: [17:40] These are all the different things you can do with it. You can do concat, and then it gives us hints. IntelliSense. IntelliSense is cool.

John: [17:50] That's where people get bit so much. TypeScript is inferring the types in that array right there.

Joel: [17:56] I wonder how aggravating that would be, if turned on. That's like in practice, right? If you just had that turned on all the time, what that would be like.

Burke: [18:06] I don't know. I tend to turn it on and off. Sometimes, it's helpful. Then other times, I'm like, "Just go away. It's JavaScript. I want it to not..."

John: [18:14] [laughs] "It's messy, deal with it."

Burke: [18:16] Right. [laughs] "It's supposed to be garbage. Just leave me alone."

Joel: [18:20] It's wrong, whatever."

Burke: [18:21] Talking about IntelliSense, some people don't know that IntelliSense works in weird places in VS Code. Let's go to a file that has a project with a package.json. Not that one.

John: [18:32] Just npm init right where you are.

Burke: [18:34] This'll work. Can you still see my screen?

John: [18:36] Yes.

Burke: [18:37] Got my package.json?

John: [18:38] Yes.

Burke: [18:39] Let me turn this off. One of the places that IntelliSense works is in package files. You can see, it knows these are the different things that you can add in, but it also works on your dependencies. I don't know, maybe you want to use something like CoffeeScript.

[18:56] You can see that it automatically pulls in all of these things from npm. This is actually pulling from the npm API. Then your next problem, of course, is that you don't know...

John: [19:06] The version number. What's it going to be?

Burke: [19:08] CTRL+space, and it will automatically go out and get that for you as well. Not that you ever hand-edit your package.json file -- it doesn't happen a lot -- but it does happen on occasion.

John: [19:18] Hey, don't tell me how to live my life.

Burke: [19:20] Exactly. I'll hand-edit the whole thing, if I want to.

[19:23] [laughter]

Burke: [19:26] While we're talking about npm, let's just keep going here. There's a plugin called Version Lims? Yeah, Version Lims. That's the right one. Version Lims, this is another Elijah Manner tip. I've got to give credit where credit's due.

[19:42] You can install that, and that gives you some extra niceness. I'm going to click up here to enable it. It's running, and you see here, it's annotating. It's basically telling me, "You got a new version," so I can update that, update body parser. It's pretty cool.

John: [20:02] That is fascinating, yeah.

Burke: [20:04] You can also do a...

John: [20:08] I love this trend of having hints and information inline in the file. Traditionally in tools, this has always been done in a separate window or some sort of GUI. Bringing things right to where the information is, I'm loving this trend. I think VS Code has pioneered a lot of that stuff.

Burke: [20:27] It's very nifty. Microsoft is really good at building developer tools.

John: [20:32] They are.

Burke: [20:33] It's one of the things they do really well. It's fun to work with VS Code. There's another cool thing you can do with npm. If you go to your user settings...Where did I just go? Oh, I went to my user settings.

[20:48] There's an npm enable script explorer. If you set that to true, you get this little explorer right here. It shows you all of your commands. Then you can just run the start command right from there. That's just a cool way to visualize all your npm scripts in your package.json.

John: [21:10] I think those show up in the command window, too, right, or the command pop-up?

Burke: [21:14] Here, let's npm...

John: [21:17] Like the actual, when you enable that npm script or something?

Burke: [21:20] I don't know. What are you talking about, John?

John: [21:24] Isn't there an npm scripts, like you can pop it up through the drop down?

Burke: [21:29] There may, npm scripts? No, there's just these. Run script, which one? Oh, OK. It's right here.

John: [21:36] Oh, there it is.

Burke: [21:37] I don't know if that's the npm. There's an npm package that Erich Gamma wrote that I also have installed. I don't know if that's doing that, or VS Code's doing that. Either way. You can install both of those, Version Lims, and the npm package from Erich Gamma.

[21:55] Let's go back over here for a second. Oh, let's talk about snippets. Snippets are fun. There's a lot of snippet packages for VS Code. Any editor probably has a lot of these. The best one is one called Simple React Snippets, probably. I think that's the fan favorite, mostly because I wrote it. You can see how quickly and gracefully I can...

John: [22:16] It's got my vote.

Burke: [22:17] Right? Exactly. Everybody should download it now. I only know how to make one component, apparently. Also, Emmet works inside of JSX and via React, or Angular, rather, which is nice.

John: [22:30] It respects the class name stuff and the differences between.

Burke: [22:35] It does, that's right. Actually, you can do componentDidMount, componentWillUpdate. We put a nice warning in there, telling you, "Don't do that."

John: [22:44] Nice.

Burke: [22:45] Also, check this out. Speaking of controversy, let's say you're going to build an app, and you need a Bootstrap nav bar. Scientifically speaking, you cannot build a web app without Bootstrap. I don't know if you knew that.

John: [22:57] I'm learning a lot about science.

Burke: [23:00] Yeah, exactly. Let's bring in, I don't know. This one looks good. Let's just grab this. You could pull this in. Cool, here's my nav bar. Copy it in, boom.

John: [23:10] It's not going to reformat the JSX?

Burke: [23:12] Bam. Oh, it doesn't like that at all. Sometimes, you pull in stuff over here, and it's like the HTML is malformed. Let's try that again. Anyway, it doesn't like my...It's linting for me. Oh, that class does not exist, because it's React, so you have to use class name.

[23:34] You have a simple React snippet, so you can just do class, a class to class name. Boom. All your classes get changed to ES, right? Solving developer problems, John, that's what I do.

John: [23:47] I love that you're enabling the copy and paste rituals.

Burke: [23:51] Right, exactly, yeah. I'm looking out for the people that are copying and pasting in Bootstrap. Look at, that's you, [inaudible] . That's me, too.

John: [24:00] That's the use case, right?

Burke: [24:02] Exactly, I'm not going to write that.

John: [24:04] I've done it. I've done it.

Burke: [24:05] I'm not going to hand-code all that nav bar. Are you kidding me? No way, I've got better things to do. Let's talk about Vue. Sarah's got some. I keep mentioning Sarah. I guess I'm the biggest Sarah Drasner fan.

[24:17] She did some stuff for Vue. She has a Vue extensions snippets that you should install. You can do stuff like this, where you can just type vbase, and get a nice Vue component. John, you probably use the Vue snippets a lot.

John: [24:29] I know my Vue. I still hand-roll a lot of my own snippets. I use the create snippet -- I'm not sure if that's it -- extension.

Burke: [24:38] Yeah, create your own snippets, yeah.

John: [24:40] I'll start from nothing, and then as I'm going through, I'll create snippets. After I've created something twice or something, I'll create...

[24:48] [crosstalk]

Burke: [24:49] You configure your own user snippets, which you can do.

John: [24:51] I think it's an extension where you can select text, run a createSnippet command from that.

Burke: [24:57] Yes. There is an extension for that. What's it called? Snippet, create snippet?

John: [25:02] Yeah, something like that.

Burke: [25:04] X snippet, create snippet? Create snippet from paste, something. Anyway, snippet creator, something like that. I don't know. You brought it up, John. You'll have to put it in the show notes.

John: [25:17] Sorry.

Burke: [25:18] I can't find it.

[25:19] [crosstalk]

John: [25:19] You just select something you've already written. You can say create snippet, it pops it up, and you can fill in the different values you'd want to change in the future. Then you can invoke it just like you're doing with these other snippets.

Burke: [25:33] That's nifty.

John: [25:33] That's my go-to.

Burke: [25:34] You have handcrafted, artisanal snippets?

John: [25:37] Yes.

Burke: [25:37] Do you also drink a lot of craft beer, John? Are you that person at the bar that...? What kind of [inaudible] do you have?

John: [25:45] What's that?

Burke: [25:47] Turn up the Arcade Fire, [inaudible] snippets over here. [laughs] This is in Angular, so it works in Angular. John Papa did the Angular snippets, again, just making your life easier. That's pretty cool.

John: [26:01] That is nice.

Burke: [26:02] Let's talk about debugging. We had the vscodecandothat.com, and the number one most-watched video on that site by far is the one where we showed debugging. People are very interested in debugging.

[26:19] Let's go to, here's a site that is kind of complicated. It's an Express application, but it's written in TypeScript. It doesn't look like stock Express. The folders are not the same. You can see here, there's source maps. There's a lot going on.

[26:41] When you debug it, you have to start it from VS Code's launch configuration here. You can see, when you debug, you have launch configurations. I'm pointing it at my startup point. I'm providing an environment variables file for Node environment variables, and then enabling source maps.

[27:00] Then when I do this -- Joel, your face is in there -- Oh, there it is. I can run, and oh, it's not going to work, because I'm already started over here. Let's try that again. It's going to fail. There we go. We're running. Go to our debug console, grab that, and pull this over to our browser window. Also, did you see what just happened? I tweeted about this a minute ago. Did you see what that just did?

John: [27:32] I missed something.

Burke: [27:33] I pasted a URL into Chrome, and I never hit enter. I never touched the enter key, and it requested...

John: [27:41] Oh, the pre-fetch?

Burke: [27:42] Yeah, the pre-fetch. At first, I was like, "That's so cool." Then about 10 seconds later, I thought, "That's terrifying," because it's requesting a page that you never requested. You never asked for that page, and you got it, anyway.

John: [27:57] Yeah.

Joel: [27:57] It knows what you need.

Burke: [27:59] I guess so. I should stop worrying. I was going to enter. I don't know why I'm complaining. Anyway, [laughs] once you get into the debugger, we get the source maps working inside of VS Code, which is cool. Of course, you get your inline debugging and your watches. You're going to get the call stack. You can look at the context right inside of your debug console, execute your commands here.

John: [28:23] You can just hover over the variables, the parameters, and everything, right?

Burke: [28:27] Yeah.

John: [28:28] They just pop up.

Burke: [28:28] Yeah, information there, too.

John: [28:30] Again, the inline stuff, to me, just I love it.

Burke: [28:33] It's awesome. That's not really that impressive. What would be really impressive is if you could debug browser applications inside of VS Code.

John: [28:43] That would be. I doubt that's possible, though.

Burke: [28:45] Would you believe it, John, it is possible?

John: [28:48] What?

Joel: [28:48] Another thing.

Burke: [28:49] Yeah, [laughs] it's crazy. Here's an Angular application. I'm going to launch this. The way that this works is, this is already running in the terminal. I ran NG serve, or whatever you run in Angular to make things work. I don't know.

John: [29:02] That's correct.

Burke: [29:03] Then I have a launch configuration that launches a Chrome window and attaches a debugger. You can see, I have dropped a...That's a log point. Let's get that out of here. Yeah, remove that. We'll talk about log points. Let's just drop a break point in there, and then what's your favorite song, John?

John: [29:18] Wow, "Row, Row, Row Your Boat."

Burke: [29:22] Row, Row, Row Your Boat? Like actual music. What's your favorite band?

Joel: [29:28] We keep this wholesome, Burke.

Burke: [29:31] Oh, OK.

John: [29:32] Massive Attack.

Burke: [29:34] Massive Attack? I should have guessed that, with your...

John: [29:36] There we go.

Burke: [29:39] Then if we click on one of these, then we're actually breaking into the client-side JavaScript, or the Angular code, inside of VS Code. Now, we can do that here. In fact, if we open the Chrome dev tools, it's actually broken inside of the Chrome dev tools as well.

[29:56] You can see, it's broken in the same place. Then when we step through, it'll go through over here as well.

[30:02] [background music]

John: [30:03] Nice.

Burke: [30:05] Really? I actually can get on board with that music.

[30:09] [laughter]

John: [30:09] I'm not familiar with that.

Burke: [30:14] People always ask me, they're like, "Why would I want to debug inside of Visual Studio Code when I can use the Chrome dev tools?" My answer to that is, maybe you would, maybe you wouldn't. One of the reasons why you would is that, I'd just like to propose, that it's easier to debug your code in the same place that you write your code, than it is to constantly switch contexts.

[30:36] This is all powered by launch configurations. They can get a little bit verbose. We have great docs that show you how to set up launch configs for React, for Angular, for Vue, so that you can do those.

John: [30:50] Is the call stack showing up right now?

Burke: [30:52] The what?

John: [30:53] The call stack. Like when it breaks, you're able to navigate back through, and it's navigating through your code? It looked like it just gets into the framework code straight from...I'm just saying, in the call stack, a reason to do it in the editor is, you can navigate around your own code and find where it is, versus trying to...

Burke: [31:13] I see what you're saying, yeah.

John: [31:16] It looks like it goes straight into framework code.

Burke: [31:18] It does. While we're in here talking about...

[31:21] [music]

Burke: [31:24] Yeah, still not a fan. While we're in here talking...

John: [31:27] That's my jam, man.

Burke: [31:28] I know. A lot of times, we do stuff like this, where we're debugging, then we stop, and we'll come here and say, "What the heck is this new URL?" You go back out, and because you need to get the value, there's something that you can do called log points in VS Code.

[31:48] You can right-click, and instead of adding a break point, add a log point. Then you can look for the preview URL, like this. We'll open up the debug console here. Let's go to debug, and we should be able to see...Let's go to just do Joel's favorite band, the Goo Goo Dolls, right, Joel?

Joel: [32:08] I do enjoy the Goo Goo Dolls.

[32:15] [music]

Burke: [32:16] I can't stop it now. OK, jeez. My log point actually isn't being here hit, and I'm not so sure why. Let's try one more time. Preview URL. Maybe my syntax is wrong.

[32:30] [music]

Burke: [32:34] Ah, so there it is. Now, it's logging out the plain text. We need the value. Let's edit the log point. Let's remember, this is the syntax. Now, it's actually giving us the URL of that track that's coming back. It's just a cool way to log out values from your app without having to stop-start, add in a console statement that you really don't want in there.

[33:00] Then you're going to leave it, it's going to go to production. Then people are going to open the dev tools on your app, and wonder why it's logging out...

[33:07] [crosstalk]

John: [33:08] Then they mock you.

Burke: [33:09] Yeah. Cool, a couple other things. Who wants to talk about Docker, anybody?

John: [33:16] Me.

Burke: [33:16] Docker, anybody? Bueller? Let's talk about Docker for a second. I don't know a lot about Docker. When people talk about Docker, my ends to kind of roll back in my head.

John: [33:27] I can pick Docker out of the icons on the right.

Burke: [33:30] Exactly, I know that it looks like a whale carrying some boxes. What I do know about Docker is that it magically encapsulates your whole project, and all its dependencies, including Node. Then you can just throw it up into the cloud, and it runs.

[33:44] I don't know how it works. I just know that it does, and I'm thankful for that. In order to Dockerize an application, you need a lot of different things. You need a Docker file. If you're going to compose, you need a compose file.

[33:56] You don't know anything about any of that stuff, so that's why it's hard to get started. VS Code makes this easier by adding in a Docker extension here, which I've got over on the right-hand side. Then I can say add Docker files to work space, select Node.

John: [34:12] Oh, nice. I haven't used that yet.

Burke: [34:14] It automatically detects my port. Then I get a Docker file, a Docker ignore, a Docker compose, a Docker compose debug. We can actually come in here, and I'm going to copy in some of my environment files. If you're watching this, don't look at these. Don't look at these values. Close your eyes.

John: [34:32] CQI0, and dang it. Bring it back.

Burke: [34:35] Let me just move these over here, because this won't work without my environment variables. We'll pull these in here, this one here, and this one here. What we can do now is go to our launch file. We can actually add in a configuration for Docker, docker attach to Node.

[34:52] Look at all these configurations that I otherwise would just not know to do. Then we can say Docker compose up, and select the debug file. This will build us a Docker container in debug mode. It's running npm-install, step five of eight. It's a long npm-install for Express.

John: [35:12] That's my favorite step.

Burke: [35:14] Npm-install?

John: [35:15] No, step five of eight. Step six is...

Burke: [35:16] Oh, yeah. It is undoubtedly the best.

John: [35:19] If I had to rank my steps one through eight, five would be number one.

Burke: [35:22] [laughs] That's really weird. Arrays start at one.

John: [35:26] Just killing time during, yeah, go ahead.

Burke: [35:31] [laughs] This container's running, and if we went to it on port 3,000 -- I think, let's see here, I think -- come one, Chrome. Come back to me. If we go to localhost:3000, this is our container is now running.

[35:47] You know that, because you can see it running here. This is the container. Let's put a break point in here. Now, let's see here. Let's go back and debug, start our debugger, attach to Node, and refresh. Now, we're debugging our Docker container. We're actually debugging with VS Code inside of a Docker container, we know virtually nothing about Docker, and we made virtually no changes.

John: [36:16] That's actually amazing.

Burke: [36:18] That is pretty cool. Then the other stuff that it does that's really nice is, sometimes you want to look inside your container, but you can't remember what the goofy Docker command is. You can just do attach shell, and then just look inside your container.

John: [36:31] Oh, nice.

Burke: [36:33] It takes all the flags, having to remember all the command line...All it's doing is executing the commands for you under the covers, but it's giving you a visual interface on top of that. Then you could take this, and you can push it, or take your image and push it.

[36:46] Then you could run it. You could run it anywhere, John. You could run it places like Azure, Azure. You can also run it on Azure. All three of those places will work.

John: [36:58] What about Azure?

Burke: [36:59] Actually, Azure works, too.

John: [37:01] OK. I heard that was supported.

Burke: [37:03] You can put your container in any of those places, so it's pretty cool. I'm not logged into Docker Hub, so I'm getting the access denied.

John: [37:10] That's awesome. I use Docker just rarely enough to forget every command each time I try and use it.

Burke: [37:18] Exactly. That's one of the best extensions people can get. Do you have an Egghead course on Docker?

John: [37:24] Yes, we do.

Burke: [37:25] People should check that out. Docker is really cool stuff. Man, it's powerful.

Joel: [37:29] What I enjoy with VS Code is that it makes a pretty decent Git client, a GUI for Git. I think most people us Git, and they might have another client. I think you can actually ditch them, for the most part, and just use VS Code.

Burke: [37:44] Yeah, you can. The built-in Git configuration or features are good. There is the standard, where you basically have all of your files. You can open the file and look at the changes. You can do diffs. Of course, you can check into commits, push, pull.

[38:02] There is an extension called Git Lens, by Eric Amodio, I think is his last name. It really amps up your Git. If you're missing features, this is probably the crème de la crème of extensions. This thing is the real deal. He's a brilliant guy. Another thing that they just added was this pull requests.

John: [38:24] This is really awesome, yeah.

Burke: [38:27] Yeah, nobody's made any pull requests, because nobody cares about me.

[38:32] [laughter]

Joel: [38:33] It gives you a full, interactive GUI to GitHub PRs. I spend a lot of time in PRs, and it's really been nice to just be able to come and do my reviews here.

Burke: [38:43] Yeah, it's very cool. That's why when Microsoft acquired GitHub, and people were like, "Oh, I don't know if that's good." I'm like, "Yeah, but now, we have a pull request extension for VS Code. That's pretty cool."

John: [38:52] That's pretty cool.

Burke: [38:55] That's good.

John: [38:56] GitHub is notably better since the acquisition.

Joel: [39:01] Two weeks later.

Burke: [39:02] It's faster.

[39:03] [crosstalk]

John: [39:05] No, like the diff files, and the numbers, where you couldn't select code in there without selecting the numbers. A bunch of little tweaks they've made, based on developer complaints, that they didn't get around to until...

Burke: [39:19] Really?

John: [39:20] Yeah.

Burke: [39:20] Now, they have Microsoft's army of engineers to come in and help out.

John: [39:25] Yeah, probably people who use it every day, who complain.

Burke: [39:28] [laughs] Like, "I'm just doing this. I'm fixing it right now."

John: [39:30] Exactly.

Burke: [39:31] Merge to master."

John: [39:33] That's the best, yeah, the best way.

Burke: [39:35] That's true. That's a good point, I hadn't thought of that. Can we do one last one, and then I think I'm done?

Joel: [39:42] Sounds good.

Burke: [39:44] There is one called Cosmos DB, an extension. Cosmos DB is a no-SQL database in Azure, but you don't have to be using Cosmos DB to get some use out of this. Cosmos DB has a Mongo support for those. Cosmos DB is weird in and of itself, because it's a global-scale database, but it's multi-API. You can choose to use different APIs against it.

[40:08] You can choose to the use the Mongo API, or the Gremlin API, which is Graph, for Cassandra, or the SQL one, which is the one we provide. What's interesting about the extension is that it also provides access to any Mongo DB that is accessible via mongodb://. Then it turns that into a database admin tool for Mongo. You can see your collection here. These are my different documents I put in.

[40:39] Then it comes with these things called scrapbooks, Mongo scrapbooks. Once you connect, I think we're connected. Let's connect.

John: [40:48] This is going to be cool, huh?

Burke: [40:50] You can do DB, and then it has IntelliSense for all your stuffs.

John: [40:55] That's cool.

Burke: [40:55] You can do find, then you can execute, and get your data back. It's just, if you're working with Mongo DB, particularly, obviously Cosmos DB. Beyond that, if you're working with a Mongo DB, this is just a really great way to put your data in your editor, so it's right there, where you need it. Very cool feature.

John: [41:14] Very, very cool.

Burke: [41:16] I think that's all I had.

Joel: [41:20] I'm sold.

Burke: [41:22] You going to move? Making the move?

Joel: [41:24] I really like it a lot.

Burke: [41:26] There's also live share, but that's a whole other thing that we did not get into.

John: [41:30] Oh, yeah?

Burke: [41:31] Yeah, I did an article on live share for "Smashing" magazine. It came out last week. People should probably check out if they want to learn more about that, but that's a whole other level of developer collaboration, kind of like Google Docs for your code.

[41:43] You can also share your local host. You can share your local database. You can share your terminal. You can share all sorts of stuff with anybody else using VS Code, or Visual Studio, if you're a Visual Studio user.

John: [41:55] I didn't know any of that.

Burke: [41:57] Pretty nifty.

John: [41:58] Let's see, there's a comment in chat. "Anything else Vue-related you suggest?"

Burke: [42:03] Vue? I would suggest Sarah's Vue extensions. What's it called, Vue?

Joel: [42:10] Sarah also releases her entire Vue setup that you can go, and it's a Vue developer package.

John: [42:17] That one.

Joel: [42:18] There you go. You can just basically get everything that she uses for Vue.

Burke: [42:22] Yeah, this one has V Tour, Vue Snippets, Prettier, formatting toggle, bracket pair colorizer. That's another cool one we didn't talk about, bookmarks, Jumpy, npm, Intellus. Golly, there's a lot of cool stuff, and Night Owl, of course. She snuck Night Owl in here. I like that. That's a cool one, yeah. I would check that out for Vue.

Joel: [42:41] There's an extensions marketplace, which is just fun to explore, ruin your editor with bad ones, find good ones, and do all that kind of stuff.

[42:49] [crosstalk]

Joel: [42:49] People are very aggressively adding new content to support.

Burke: [42:55] It's endless. Endless, endless, endless. There's even some that are, [laughs] there's one called -- I think I have it installed, hold on -- it's called Power Mode. Have you seen this?

John: [43:09] Oh, yeah, where it gets shaky?

Burke: [43:12] Yeah, Power Mode enabled.

Joel: [43:14] Oh, as you type?

Burke: [43:15] Every time you type.

Joel: [43:16] [laughs] That's cool for five or six seconds.

Burke: [43:22] I know. It's cool for a demo. That's about it.

Joel: [43:23] It's when you're doing hate-driven development that you need to break that one. I would love to continue talking to you all afternoon about developing extensions, because that would be an interesting thing to get into.

[43:35] There's all sorts of fun stuff. Maybe we'll get together again in the future, so we can deep dive into some of these.

Burke: [43:41] Yeah, like building your own extensions. That would be another good one.

Joel: [43:44] Yeah, cool stuff. Thanks, Burke. This was pretty great.

Burke: [43:47] Yeah, thanks for having me on. I appreciate it.

Joel: [43:49] It was good talking to you.

John: [43:51] You're welcome.

Burke: [43:53] Thank you, John. Thank you, Joel.

Joel: [43:55] Cheers.

John: [43:56] You're the best, Burke. See you.

Burke: [43:57] Bye, guys.

Joel: [43:57] Bye-bye.