Introduction

[00:00:00]
>> Burke Holland: All right, well, my name is Burke Holland and from Nashville. I work at Microsoft and I work on the Azure team at Microsoft. My job is to make sure that the JavaScript experience inside of Azure is as good as it can possibly be. So this is what I do.

[00:00:17]
I go out and I talk about JavaScript and I talk about VS code a lot because we make VS code, and I love the editor. And so today we are going to spend a substantial amount of time talking about nothing but VS code. Now, before we do this, everybody needs to have some things installed for this whole day to go as smoothly as it should.

[00:00:40]
And for you to leave with a smile on your face, one of those things you'll need is git, you wanna make sure that you have Git installed for our source control module. You're going to need to have Node.js, or Node, or whatever the proper way to say that is, installed.

[00:00:56]
We're running a lot of JavaScript today, and JavaScript doesn't run as well without Node, as it does with it. You're going to need Docker. Yes, we're gonna do Docker and containers today. We're gonna learn a little bit about containers, and then we're going to use them. And then there's an extension pack called VS Code Can Do That that has all of the extensions that we're going to be using in today's workshop.

[00:01:20]
So by installing this one extension pack, you get everything that you need for the whole day which is pretty cool. Also shameless plug, I have a show called Five Things on YouTube. Fun fact, it is the most popular show in the less than a dozen subscribers category. So thank you, mom, for creating 12 YouTube accounts.

[00:01:43]
All right, let's get right into it then. Today, what I want to do is I want us to push the limits of what VS code should sanely be able to do. I was at Build in 2015 when they announced the VS code, and I thought, at that time, another text editor?

[00:02:06]
Do we really need, is that what the world needs right now is another text editor? I feel like this is a solved problem. But what we found is that there is definitely a need for VS Code. It's become the most popular editor among web developers and JavaScript developers, and that's why we're gathered here today.

[00:02:25]
So what I would like for you to do today is picture in your mind a dial on a dashboard. And that dial, you can turn it from all the way from one, and then if you turn it all the way up, it goes to?
>> Speaker 2: 11.
>> Burke Holland: 11, that is correct.

[00:02:43]
Dials always go to 11. So what we're gonna do today is we're gonna start at 1, and 1 is text editor in VS code, and that's what it does out of the box. And then what we're gonna do is today's we're just gonna crank on this dial all day until we get it close to 11, and 11 it would be IDE or Integrated Development Environment.

[00:03:05]
And that's where you're doing everything inside of VS code. All parts of your development workflow are in VS code, and we're eventually gonna put your entire development environment inside of VS code, which is kind of a crazy thing. So, assuming that everybody has already cloned the repo here, you can follow along with this Gitbook.

[00:03:29]
What we're gonna do is I am going to do the exercises. I'm gonna run through and teach you a little bit. And then we're going on break, and you can go through the exercises yourself, and you can follow along. So what I would recommend is that you open the projects as I begin one of these segments here so that any dependencies that need to be installed can be installed while I'm talking.

[00:03:53]
Specifically npm install at the exercise tells you that you need to run it.
>> Burke Holland: The other thing here is, that you need to know, is that a lot of times the instructions are gonna have you open VS code from a command prompt, like this. So, if we come over here, if I wanted to open VS code on this folder, I can do code and then dot, and now we'll open VS code on this folder here.

[00:04:20]
If this doesn't work for you, it's because code, the code command, is not in your path. In order to get it there, you need to open the command palette which is Command or Control Shift P, and you're gonna say, you can just search for path I believe, and Shall Command, Install Code Command in path.

[00:04:39]
So you just wanna do that. So just know if you hit code, and then .enter command prompt and it tells you code is not about command. That's why if you're on Windows, you may need to reboot. I'm not entirely sure, but just try those things if none of that is working.

[00:04:54]
Another bit of a heads up here, as we go along, you're gonna see these prompts sometimes when you open an exercise where it says that there's a workspace file and do you wanna open the workspace? The answer to that question is always yes, you want to open the workspace.

[00:05:09]
If I didn't want you to, I would not have put a workspace file in there. What this does is, it opens a workspace that allows you to load multiple projects inside of VS code at once, but those projects are treated as separate projects, not one project into the same folder.

[00:05:23]
So they have their own configuration settings, their own debug settings. There's a Start folder, which is where you're gonna start, and there's a solution folder should you happen to just give up and want to see the running example. Also, when you run a project, most of these projects we're gonna run within npm start command inside of the terminal or the integrated terminal in VS code, your call.

[00:05:52]
If you do that, and it tells you that it can't run on port 3000, so it's gonna run on a different one, 3001 or 3002. Or just that it can't run it means that you have some other example that you've been doing so far running on port 3000.

[00:06:07]
And sometimes it's hard to tell where that is. And so I've included some commands down here that you need to be aware of. This top one is for my Mac/Linux people. This is how you find and processes that are running on 3000, and this is how you kill them here.

[00:06:23]
So you can just go ahead and kill any processes that you've got without having to go back to figure out what's running and what's the problem. And then for Windows, it's here. I'm just gonna be honest, I haven't actually tried this so I don't know if it works.

[00:06:38]
But it came from Stack Overflow, so it's gotta be right. Okay.
>> Burke Holland: And then one more thing before we get in here. There are some essential keyboard shortcuts that you're going to want to know. One of them is toggle the side bar in VS code. Another one is open the command pallet, another one's file switcher, another one's the terminal, and the other one's Settings.

[00:07:04]
So these are essential shortcuts that you need to be aware of before I hop into VS code, and then once I get in there you'll see me use them and you'll know which ones I'm doing. Our agenda today is as follows. We're gonna start by customizing the editors, you sort of follow along here.

[00:07:24]
What we're gonna do is we're gonna theme VS code. VS code is your house you live in your editor. You don't want to live in a house with no furniture and no artwork unless you're Steve Jobs, and you're not Steve Jobs. So put some furniture and put some artwork in your house, just makes it more enjoyable to be there.

[00:07:43]
Then we're going to cover some productivity tricks. I'm just gonna show you the things that I think will make you most productive in VS Code. Then we're gonna do navigation and refactoring, I wanna show you the best ways that I think there are to move around inside of VS Code and the best ways to refactor.

[00:08:00]
When we say refactor, what we're basically talking about is changing existing code. Code systems are complex, things are either tightly coupled, either intentionally or unintentionally, and we can't simply edit lines of code because then that breaks things further down in the system. So, we want to talk about how VS code helps us do that.

[00:08:19]
And then we're gonna go into debugging. And this is where we really start to turn the dial towards IDE, and away from text editor. This is probably the densest part of the workshop, just a heads up. Debugging configurations can be difficult, but by the time we get through this section you will understand very well what a debug configuration can do.

[00:08:40]
And you'll understand where to go to look to figure out how to create one, okay? And then we're gonna talk about Docker. For the uninitiated on Docker, don't worry, I'm gonna go through and give you a very quick intro to Docker. And then we're gonna use Docker, and then we're gonna use Docker behind the scenes to do some really cool stuff.

[00:09:00]
Then we're gonna look at something called remote development where I'm gonna show you how to take an entire development environment, put it in VS code and then put it in GitHub. So that anybody can run your project without having to install any dependencies. Then we're gonna talk about data.

[00:09:15]
Most applications have data. I talked to people sometimes and they say, I'm just a front end developer, I don't ever touch a database. And I think how can that be? How can that be? How do you have that luxury? Everybody should know at some level, how to deal with data, even if it's just casually, that's what we're gonna do in this module.

[00:09:32]
And then lastly, we're gonna talk about everybody's favorite subject, because there's nothing you're going to want to talk about more at the end of this day, that source control, so exciting. What is exciting though is that if you use Get and you're like me, and you only know a few commands after working with it for 10 years, it's okay, that's everybody.

[00:09:50]
And so what we're gonna do is just cover some of the most common workflows for get inside of VS Code, and see how much easier that can make your life. Okay, I think we've covered all of the housekeeping here. Now, when we're talking about VS code, VS Code comes in two flavors, you have two flavors to choose from.

[00:10:12]
There is stable VS Code which is this blue icon here, if I pull this up again, see the blue icon, that's stable. And then there is the Insiders' VS code, which looks like this. Insiders is kind of the canary. So if you're familiar with Chrome Canary, that's Insiders.

[00:10:33]
If you have Insiders, you're gonna get the latest version of VS code before it drops and stable. So you're basically testing. You see that little gear over there with a 1 on it? I have an update. I updated yesterday, okay? So if you have Insiders, you're gonna update a lot.

[00:10:49]
Most of the people that I work with at Microsoft run Insiders. I do not, I run stable. I was the kid who went down slides on his belly feet first, like holding on to the side slowly going down. So I am not, I'm very risk averse. I like things to be stable so I use stable but you can use Insiders.

[00:11:07]
I'm gonna start out in Insiders this morning though, because I want my VS Code to look like your VS Code if you've just installed it.