VS Code Can Do That!

Thank you all for coming. I'd like to start you out with a little bit of a story before we get into VS Code specifically. There is this legend that a long time ago, there was a power of failure in New York City. With this came tens of thousands of homes without power. What did they do? They called Thomas Edison to come down and see what you could do to help us out with this. Thomas Edison walks in and looks at the situation and says, You know, I think I know what to do. He goes ahead and looks at the wall and presses a button, and all the power is turned on everywhere inside the entire city. It's great. We get the power back. They say thank you so much for doing this. He says no problem. And he writes up a bill on his invoice there and hands it to them. And it's for $10,000. Which is a lot of money at the time. So they're like, we're grateful and all, but all you do is press a button. And he goes, I got you, you're right. Let me revise that. They're like, thank you so much. So what he does, he revises the bill to be a dollar for pressing the button. And then $9,999 for knowing which button to press. And that's really the moral of the story here. It's not about pressing a button in VS Code. It's about knowing which button to press to be efficient.

And VS Code my favorite button is F1, which works across all the products on Mac, and Windows, and Linux. Or Command-Shift-P on a Mac today is what I'll be using. And that brings up the command palette inside of VS Code because VS Code can do that.

And my name is John Papa and today we're going to show you a whole series of tips that you can use today with VS Code and some things that maybe you didn't know that you could do working tomorrow. So let's start right there off with the Insiders Build. Now there's a stable build which sounds like, hey, it's stable, right? Got to use it. And that comes out once a month. But there's an Insiders Build which gives you practically daily drops of different code. So in that Insiders Build, you can just click here to download the Stableware Insiders for your platform. You get updated features all the time. I've been using this from day one. I never used the stable build. I only used the Insiders and it is actually quite stable. So I'd call it a stable insiders build and I recommend you give it a shot.

Now everybody needs to find files. One of the nice things in VS Code is that you can find files through the tree where you can look in the Explorer using your mouse and trackpad. Or you can use the command palette. Remember that keystroke I said you need to remember, if you go to command shift P, you'll find all these commands. Well, there's also a command P. That's a menu option to find a file quickly. So let's say you wanted to find a router file. You can see I typed in router up there and it does partial file name matching. You can use the arrow keys to go up and down as well. So it's a great way for you to find files quickly by name. It also pass in the pathway to that name. For example, if you have a lot of files in your project called index.html or index.js, you can type that in. You might find a lot of them. But if you put in the pathway to it for the folders, it'll actually narrow it down for you.

Another thing I really like about this is layout customization. Here, you're noticing in this video that I got rid of all the distractions.

I got rid of the title bar, the status bar, everything. I'm just looking at my code. This is called Zen mode. So if you go to Command-Shift-P and type in Zen mode, it'll automatically get rid of all that, center the code for you.

Then I also put in multiple panes here. So I've got two files open at the same time. It puts them both into Zen mode. And if I want to, I can still get to things like the site explorer to look up other files or do other things if I need to. So there's a great way to get to all that.

And then if you want to get out of Zen mode, you do Command-Shift-P. Then you can toggle off the Zen mode. Another thing I really like is external terminals. So sometimes you want to use ITerm or the baked-in terminal in your operating system. If you're inside of your VS Code application, what you can do is automatically open a terminal in the current folder. So you do that with Command-Shift-C, and that'll automatically open a terminal, whatever your default is, in the folder that you happen to be working in. And don't worry if you forget these commands and these keystrokes. Just remember, Command-Shift-P or F1, that is the one keystroke that can find you all the menu options. So you just type in Command-Shift-P, type in terminal, and you'll see all the commands for this.

Now VS Code comes with its own integrated terminal as well. And you can open that with this keystroke, you can choose your shell like Bash or Zush or PowerShell. So you can do what you want there. And then you can also stack your terminals where you can have multiple terminals open at the same time. Which is incredibly useful. We'll see that a little later in some of the demos. Debugging works out of the box for multiple platforms. Here you can see I'm doing no debugging. So I can start the debugger with the F5 key. Or I can go over and press the button, the green button. I can set break points throughout as you're seeing me here. Run right to another breakpoint.

I can then step over. And then I'm gonna right-click and set a column breakpoint or an inline breakpoint over on the JSON. So right there, I can then stop on it and spec the value. This is great for async await or other kinds of commands that are asynchronous.

Now front-end JavaScript debugging. I love the front end, CELT, and React, and Vue, and Angular, all these. Now, what's great is you can actually debug those right inside of VS Code. So we can debug them in a browser or do it right in the same tool we're in. Now there's an Edge and there's a Chrome debugger extension, two of them. One for each browser. If you load those extensions up, you can configure them, launch your debugger, and then set breakpoints. And we can see that we're setting on the breakpoint over there.

Now we're setting our environment up. We're going to say, go to Chrome for the Chrome debugger. I'm automatically filling in the Chrome setup for debugging Vue. And then I'm going to go set a breakpoint inside my Vue component. I'll start my application up. And then here you can see that my application's running. I press delete, and then the breakpoint is hit. Pretty cool.

Now, one of my favorite features is the multi-cursor. Command-D will do this for you. So notice here, what I did is I selected three lines of code out of the package.json And then I have three cursors going on. I searched for something similar across all three. And then I'm putting those together and sticking npm install in front of them. Let's watch this again. So what I did is I wanted to get out an npm install command using these three lines of code. I copied them to a blank file. I then looked for everything that's had quote, colon, space, quote. And that cursor then found those.

And then I can delete, backspace. And then I can also add a new space in there. So I can run them. And it's really great for editing files, when you need to find a lot of different things all across the file. So that multi-cursor is super powerful.

Snippets are another great feature. There's different libraries out there, like Angular, and React, and Svelte. And you also have things like Docker. We can use snippets, so we don't have to remember all the syntax of all these different things. So here we're seeing that I don't remember the Dockerfile syntax. So I've got a Docker snippet that I set up for myself, which will automatically create a Docker container setup and a Dockerfile for my node in Angular application.

And there's a whole bunch of quick fixes, too. Anywhere in VS Code that you see a light bulb, you can automatically click on it with your mouse or trackpad. Or you can hit command dot. And what that command dot will do is it'll give you a hint at what would you like to change about this. So for example, down here, the CatchError function, it didn't know what it was. So we can click on it or hit command dot, and it's going to automatically import CatchError from the RxJS library. Because it happened to see, yeah, you're using RxJS, but you didn't import that thing over here. So let me help you out. There's a lot of cool stuff that the command dot will do. It'll correct syntax. It'll also do ESLint fixes, like maybe changing a let to a const if you want to do that, like a few other kinds of suggestions as well.

Basic refactoring is built in. So we can do find references. Here I'm finding all the references to this shared module class in my application, and I can also rename the symbol. Maybe I want to rename that to my shared module, and I want to go just do a search and replace. So I can change it here. Then it automatically opened up all the places that changed. Now I want to do find references again. You can see all those places did indeed change.

You can also check my Git changes log for it. You're also getting a look at the peek feature, which allows you to peek into other files that are using that different functionality. And if I double-clicked in there, it would actually go to that file.

Speaking of Git, we talked about the Git changes. Git integration is baked right into vscode, and there's a couple of really good extensions I definitely recommend you getting, and I'll show you some of those in a demo in a moment. Here we're seeing the pull request extension, and what you can do is we can clone out of the box, no extension needed, check out, commit, and push. All that's baked into vscode, but you can also pull a pull request down and do reviews of code and then merge them or add comments, etc.

One extension I mentioned earlier is called Peacock. It's one that I've written. So vscode is a really cool feature because you can open up like multiple vscodes. Here you can see I've got six instances of vscode open. Have you ever had that many open before and you're trying to figure out which one is which? Whenever you have multiple windows of a tool open, it's great, but then sometimes you get confused. For example, I might be working on multiple projects. They could all be interrelated, maybe a backend or frontend, maybe just a test scenario too or a harness. So all those could be open and then very tiny at the top in the title bar, it tells you what the name of that is. That's not quick enough for me to recognize which one is which. So instead, you can use Peacock and then color each individual instance in whatever color you want. You can color different aspects of the window as well. So it makes it easy at a glance to tell which one you're working in. I happen to like to color these based upon what I'm working in for. Svelte, I use orange, for Angular I use red, for React I use blue.

Now, we just saw a lot of great ways that we can make our lives easier with VS Code, but one of the biggest problems most of us have is when we go to a project and we need all the dependencies for that project. Different frameworks and different setups like Node or Python or .NET and all sorts of dependencies. This is where it can become difficult and where container-based solutions can really help us. We can call these dev containers and VS Code supports it. So what does this mean? Well, first there's three things that you need to get going. One is VS Code itself. You can get VS Code right from this link right here. Second, you're going to want Docker for desktops. You can get that from this link so you can run the containers.

VS Code will just integrate with that for you. Now, we also need this extension which will work in VS Code. It's called the remote containers extension and we're going to see that a lot in some demos coming up. So let's set some scenarios up here.

You're starting a new project and what are the first things that you think about, especially when you're getting into a project that maybe you didn't craft? What if you could start any new project and you want your development environment to just work for you? You want to give it to somebody and say, all right, everything you need is already ready to go. Don't have to worry about the version of Node or Go or Python or whatever you're using. You can instantly get the tools that you need and not just a platform but the extensions that you need in VS Code and any other setup that you have to do. What if you could share all this so other people can just clone your repo from GitHub and it just works instantly? That's kind of the idea behind Dev Containers. You get a full VS Code environment including your extensions, debugging, completions, all your dependencies ready to go out of the box. Full VS Code, right? That's what we really want. We don't have to worry about, oh, now I've got to spend the next two hours installing everything I need and making sure the versions match up. So we're going to grab this extension called Remote Containers and we're going to use that in VS Code to walk through a couple scenarios.

So the first demo, we'll do three of these, is we want to clone and run a Python app. You've been given this Python app and now you need to make it work. So let's go ahead and dive into some code. So here I am inside of VS Code and you can see I have nothing open at this point. What we're going to do is make sure we've got Docker on our machines and I can click up here first to see that I do indeed have Docker installed. It's right there. If you don't you can go click on that link to load it. I've got VS Code because we're looking at it and if I go to the extensions I can come over here and type in remote. You can see there's a remote container extension already installed right up top. If it wasn't, I would just click on the install button. So my dependencies are there. Now I've got this repo that I've already created up in GitHub and I want to go clone it. So I'm going to use git clone just to go get my repo. I can tell it to clone from GitHub and it's going to go ahead and search for JohnPapa slash and this one's called mslearnpythonproducts So now it's going to ask me where to put it. We'll put it in my git folder. Now it's cloning it and it wants to know if I want to open it in this window. Well I'd like to do that, please. So here we go.

I've got my Python app. And here we can see my app.py file. And maybe I don't know a lot about Python so the next thing I want to do is figure out there's probably dependencies and things I need to load and I've got to get this set up.

Well, before I get there, first I want to make sure that I set this using Peacock so I can identify my window. I mentioned the Peacock extension which I installed through the extensions and I could change this to a favorite color and I'll just use called something different. It's like a shade of pink, maybe right here. So that's me running in my app and I can see that it's now using pink.

Now I don't have Python installed so what I can do is I can use a dev container. So I'm gonna hit my favorite command. Remember that button? F1 or Command Shift P. Right here to bring up my command palette. In the command palette, what I want to do is add a dev container just like this. Now when I add this it's gonna add a file to set up my dev container. Now to tell it what I want to use. Notice it sees that I'm using Python so it's giving me some hints. I'm gonna choose Python 3. And I'm gonna choose Python 3.9 and then it's asking do you want to install node with that as well? Sure, why not? I like node. So now down below it's telling us in a window that it's already creating a container for us. Now we've gone to we can open up this project in that dev container. Now let's do that right now. Do reopen in container. Now notice it's flashing and then it's telling us it's starting the container. And boom! Now there's also a message saying that the container changed. You might need to build the container to apply things. So first before we do that let's go look at this dev container folder. It added it to our project. And then here we have a docker file. Now we don't have to worry about the docker file too much. It's basically setting up everything for us to have python to work out of the box. Now we can modify this if we want to.

We also see this dev container json file. Now this is where we set up the dev container. This automatically says go use the docker file. Install node. It's got all these settings. These are VS Code settings. It's going to automatically set up for us to use python. And it's installing these two python extensions which is super helpful.

Now notice that we have this command down here called a post create. It's commented out. This is what python uses to automatically install any requirements. And we do indeed have requirements in our requirements text file here. So I'm going to uncomment that out.

Now, I'm going to go ahead and choose to rebuild my container. So I go back to my command palette. I can choose rebuild container, just like that. And now it's going to reopen the container up. It's going to run through that, set up the container. It's also going to run that python requirement script for me, and we can see the output at the bottom of the screen. Once it's done, we can close the terminal.

It says, now, if we want to try this out, we can go into app pi right here. And let's go ahead and set a breakpoint on line 12. Now notice for a moment, we'll take a quick break here that I had set up my environment to be pink. Well, it's not pink anymore. That's because I'm in the remote container. If we look in the bottom left of the screen, right over there, we can see that it says that we've got this dev container called Python 3. So yours should look like that too. But we want to see something a little more visible to notice we're in this container. So I'm going to open up peacock again. I'm going to change the color for this to be just yellow.

Why not? So I'm in the container. It's going to be yellow. When I'm running locally on my computer, it's going to be pink. So peacock's nice like that. We not only have different VS code instances, we can have the same instance when it's inside a container, be a different color than when it's not when it's running locally.

Okay, so we got Peacock set up. Now I set a breakpoint here. Now notice that how many underscore problems of flask. That's because Python installed the requirements in this file for me. Using the dev container. We'll go back to our app pi. And now we can click on the debug. We can choose run and debug. If we wanted to we can just hit f5 like this. It'll kick into it and say, hey, would you like to use the current file that's open? Yes. And now it's running that file. And it says, hey, it's running on port 5000 inside the container. It's going to then forward that port so we can open it in our browser, which I will pull up into a window here. And we'll make it into the upper left-hand corner. And notice it's not loading yet because it hit our breakpoint. So now I can hover over data right there. And we should see all the data that's coming back. I'll let it continue. If I go back to the browser, we can see it sitting right there. And there's all of our tools just like we wanted it to work.

So now we've got the whole thing running inside the container itself. Now if I disconnect right there from the debugger. Now what I can do is go back to the command palette. I'm going to say reopen folder locally. This is going to close the container down and go back to running the Python project locally in my machine.

And just to really point this out. Two things should change dramatically here. One, the color changed because I'm using Peacock and tell us okay we're local it's a different color. And two, it's now telling me in the bottom right hand corner that this contains a dev container. And if I want to I can reopen it now. And if that message goes away, no worries. I can click in the bottom left on the icon or I can go back to the command palette. And just tell it go ahead and we can say reopen in a container. Or reopen and rebuild if we want to.

So we just saw how to use a Python application and it set all the dev dependencies up for us in the container. Now let's go and open up another application directly from GitHub with a dev container. So I'm back inside of VS Code. We're gonna run the command palette and choose to clone a repository right into a dev container. Now I happen to have a repository, which I'll search for. And this one up here is gonna be at John Papa and it's got gh static end to end. Now it's gonna tell me which branch I want to use. I want to use this update container branch. It's good to have choices. Now it loads this dev container up. It's actually pulling this code into a dev container locally on my machine. So notice I skipped the whole, let's create a folder on my local machine to do all this because it's inside of a dev container.

So the next step I wanna do is go ahead and check inside the terminal for. This thing happens to use react and Azure functions. I didn't have functions installed locally. So if I run func right here inside its terminal, we can see it already has Azure functions already. So that's because the dev container itself has set all these things up, including the Azure functions extension and the core tools from the Docker file that it had. That's pretty cool. So it gives me all the dependencies that I need. So the next thing I wanna do is go into my terminal and let's type in npm start. That's gonna run my react application.

We also had a yarn install for it. Now, if I open this in the browser, the react app isn't actually gonna be loading well. That's because there's no data. Well, it's got a functions app. So I come down here, hit Command slash, open a second terminal. And now what I wanna do is I wanna run func start or I can just press F5, it'll automatically run my functions. And now we can see the core tools are loaded and they're running here. I don't wanna browse to those. Instead, I wanna go back to my react app and I wanna hit refresh. And now there's all my data. Now, notice the port is 3000 here. We're doing port forwarding. So if I want to, I can click on this little icon at the bottom of the screen, show me all the ports or I can just click on ports right there. Now we can see 3000 is being forwarded. Well, let's say I had a conflict that I didn't want it to be 3000. I can come over here and right-click it. Change local address port. And instead I could change that to, let's make it 55 55, just like that. And if I go back to my react app on port 3000, nothing's there. But if I change it to 55 55, there we go. So it's a great way you can do your own port forwarding as you need. It detects the ones that you need out of the box, but you can always change those as well.

So we saw how to open an app with dev container, but how do you create and configure your own dev container for other people to use? Let's go take a look at that ourselves. So we'll come over here and how do you get out? First, I'm going to choose remote containers, close the connection. It's going to close it out for me. Now I'm back in VS Code and I want to open up a project.

So this project happens to already be local. It's called Shop At Home. Now this is just a normal project, no dev container that I have, and it happens to be using Svelte as the main application. And it's got Azure Functions at the back end, and I want to use Azure Static Web Apps as a dependency that connects them all together and makes them run. So I got a lot of things in this application and I want people to be able to just use it out of the box.

First thing you'll notice, I have peacock running up again, it's all pink for my local, and what I want to do is add that dev container. So I'm going to choose add development container. Now I could choose node, but I actually want to find something with functions in it. And I typed in funk and nothing's there. So I'm going to do show all definitions. And look, there's Azure Functions and node.js. So I'm going to choose that. Now you can see here, I've got my dev container already opened up, that's going to install functions and node and pretty much get me where I want to be. Now it's got a couple extensions out of the box, but I want to add some more as well. So what should I do? Well, I can add some more extensions right now by going into the extensions. Now I know I want Svelte to be having its extension for me. So I can right click on it and choose add to the dev container. Now all of these are getting added to that dev container, Jason. So it's pre-configuring the dependencies for me. Another thing I want is this post create command. Now I happen to be in a monorepo, which means that npm install is not going to work in the root. I need to cd into the Svelte folder first. So I want to go cds into Svelte app and then run npm install. This is going to set me up to have the most success. So the next thing I want to do is to open my container or say remote. And we're going to say open and rebuild.

Now I'm doing open and rebuild because I wanted to open the container, which you notice it did. And now it's also building the docker image. It's taking everything that was set up in that image for functions and for node. And it's also setting up the extensions that were in that pre-configured list, including the ones I added. And it's going to run that npm install in the right folder. So when we're done, we should see the Svelte app should have a node modules folder, which it just ran through down here, but does this work? That's a good question.

So I can go into the API folder. So that's where my functions are and I can run func start, try it a different way. So it's running my Azure Function Core tools. Things are working here. And then the second thing I want to do is open another terminal. I hit command slash. I'll make that go away. And then over here, I want to go back. I want to go into the Svelte folder. And I happen to have an npm command called run local. So I look at that. What local does, it's actually using npx to use the Static Web App CLI to start the public folder and then hit the API itself. Now, before I run local, I want to run a command called build. That's going to build my Svelte application and put the public assets into the slash public folder. And then I'm going to run npm run local. Once it's done, I notice it's pointing to 7071 for the API. So it'll automatically set up cores for me. A lot of dependencies going on here. This is like real world dev. So the container is handling all this for us. So once all this is up and running, the nice thing about this is you just have to browse to it, which I can see right here. There's my Svelte application. And we can see I've got my list of strawberries and apples and sliced bread. And I can do everything else I could do in the other containers as well with debugging and stepping through.

It's just really, really nice. We just saw three different demos on using dev containers for different scenarios. The great thing here is whether you're a student and you're learning new technology, and you don't have time to configure things, you can use a dev container to do this. If you don't have enough dependencies on your machine already, or maybe you're working in a different version of Python or Node or Rust, you can use a dev container. And if you're doing team-based development or maybe open source, where you want other people to use your app without long sets of setup instructions and scripts, you can set up a dev container so they can just pull directly from GitHub and just work with the exact same setup that you are. It's pretty cool to do. And notice we used Peacock to color the local versus the remote situation to make it easier to tell when you're inside or not.