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. Now, there's this legend that a long time ago, there was a power 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 to see, what can you do to help us out of this? Thomas Edison walks in, he looks at the situation and says, I think I know what to do. He goes ahead and he looks at the wall and he 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. 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. They're like, we're grateful and all, but all you do is press a button. He goes, I got you, you're right. Let me revise that. They're like, thank you so much. What he does, he revises bill to be a dollar for pressing the button, and then 9,999 for knowing which button to press. 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. In 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. That brings up the command palette inside of VS Code, because VS Code can do that. 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. Let's start right there off with the Insiders Build. Now, there's a Stable Build, which sounds like, hey, it's stable, got to use it. That comes out once a month, but there's an Insiders Build, which gives you practically daily drops of different code. 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 use the Insiders, and it is actually quite stable. 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 or 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. 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. That'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. If you go to Command Shift P and you 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. I've got two files open at the same time. It puts them both in a Zen mode. If I want to, I can still get the things like the Site Explorer to look up other files or do other things if I need to. There's a great way to get to all that. Then if you want to get out of Zen mode, you do Command Shift P, you can toggle off the Zen mode. Another thing I really like is external terminals. 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. 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. 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. 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. You can open that with this keystroke, and you can choose your shell like Bash or Zush or PowerShell. 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 node debugging. I can start the debugger with the F5 key, or I can go over and press the button, the green button. I can set breakpoints throughout as you're seeing me here, run right to another breakpoint. I can then step over, and then I'm going to right-click and set a column breakpoint, or inline breakpoint over on the JSON. Right there, I can then stop on it and spec the value. This is great for async await or other commands that are asynchronous. Now, front-end JavaScript debugging, I love the front-end, Svelte, and React, and Vue, and Angular, all these. Now, what's great is you can actually debug those right inside of VS Code. 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 unload those extensions up, you can configure them, launch your debugger, and then set breakpoints. 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. 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 is 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. Notice here what I did is I selected three lines of code out of the package JSON. Then I have three cursors going on. I searched for something similar across all three. Then I'm putting those together and sticking NPM install in front of them. Let's watch this again. 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 look for everything that's had quote, colon, space, quote, and that cursor then found those. Then I can delete backspace and then I can also add a new space in there so I can run them. It's really great for editing files. We need to find a lot of different things all across the file. That multi-cursor is super powerful. Snippets are another great feature. There's different libraries out there like Angular and React and Svelte. We also have things like Docker. We can use snippets so we don't have to remember all the syntax of all these different things. Here we're seeing that I don't remember the Dockerfile syntax. I've got a Docker snippet that I set up for myself, which will automatically create a Docker container setup and the Dockerfile for my Node and Angular application. 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. What that Command dot will do is it'll give you a hint at what would you like to change about this. For example, down here, the catch error function, it didn't know what it was. We can click on it or hit Command dot and it's going to automatically import catch error from the RxJS library. Because it happened to see, yeah, you're using RxJS but you didn't import that thing over here. 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. It'll give you other suggestions as well. Basic refactoring is built in. We can do find references. Here I'm finding all the references to this shared module class in my application. I can also rename the symbol. Maybe I want to rename it to my shared module. I don't want to go just do a search and replace. I can change it here, then it automatically opened up all the places that changed. Now when I do find references again, you can see all those places did indeed change. 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. 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 VS Code, 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. 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 VS Code. 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. VS Code is a really cool feature because you can open up multiple VS Codes. Here you can see I've got six instances of VS Code open. Well, have you ever had that many open before? 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 back-end or front-end, maybe just a test scenario too or a harness. All those could be open. Then very tiny at the top in the title bar, it tells you what the name of that is. Well, that's not quick enough for me to recognize which one is which. 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. 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 DevContainers and VS Code supports it. 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 and 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. 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, 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 the 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 the idea behind DevContainers. 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. That's what we really want. We don't have to worry about, and I've got to spend the next two hours installing everything I need and making sure the versions match up. We're going to grab this extension called RemoteContainers, and we're going to use that in VS Code to walk through a couple of scenarios. 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. Let's go ahead and dive into some code. 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. 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. 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. 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 John Papa slash, and this one's called MS Learn Python products. 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. I'd like to do that, please. 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. The next thing I want to do is figure out there's probably dependencies and things I need to load. 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. I'm going to change this to a favorite color. I'll just use called something different, it's like a shade of pink maybe right here. That's me running in my app and I can see that it's now using pink. Now I don't have Python installed. What I can do is I can use a dev container. I'm going to 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 going to 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 going to choose Python 3. I'm going to choose Python 3.9. Then it's asking, do you want to install Node to that as well? Sure, why not? I like Node. 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 change, you might need to build the container to apply things. First, before we do that, let's go look at this dev container folder. It added it to our project. 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. 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. We do indeed have requirements in our requirements text file here. I'm going to uncomment that out. Now I'm going to go ahead and choose to rebuild my container. I go back to my command palette, I choose rebuild container, just like that. 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 requirements script for me. 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 AppPy right here. 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. Yours should look like that too. But we want to see something a little more visible to notice we're in this container. I'm going to open up Peacock again. I'm going to change the color for this to be just yellow. Why not? 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. Peacock's nice like that where 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. We got Peacock setup. Now, I set a breakpoint here. Now, notice I don't have any 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 AppPy. Now, we can click on the debug. We can choose Run and Debug, or 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. Now, it's running that file and it says, hey, it's running on port 5,000 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. Notice it's not loading yet because it hit our breakpoint. 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's sitting right there. There's all of our tools just like we wanted it to work. 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, and I say, reopen folder locally. This is going to close the container down and go back to running the Python project locally in my machine. Just to really point this out, two things should change dramatically here. One, the color change because I'm using Peacock and tells, okay, we're local to different color. 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. 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. 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. I'm back inside of VS Code. We're going to 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 going to be at John Papa, and it's got gh static end-to-end. Now, it's going to 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. 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. The next step I want to 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. 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. It gives me all the dependencies that I need. The next thing I want to do is go into my terminal, and let's type in npm start. That's going to 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 going to be loading well. That's because there's no data. Well, it's got a functions app. I come down here, hit Command slash, open a second terminal. Now, what I want to do is I want to 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 want to browse to those. Instead, I want to go back to my React app, and I hit refresh, and now there's all my data. Now, notice the port is 3,000 here. We're doing port forwarding. If I want to, I can click on this little icon at the bottom screen, show me all the ports, or I can just click on ports right there. Now, we can see 3,000 is being forwarded. Well, let's say I had a conflict that I didn't want it to be 3,000. I can come over here and right-click it, change local address port, and instead, I could change that to, let's make it 5555, just like that. Now, if I go back to my React app on port 3,000, nothing's there. But if I change it to 5555, there we go. 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. We saw how to open an app with DevContainer, but how do you create and configure your own DevContainer for other people to use? Let's go take a look at that ourselves. 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. This project happens to already be local. It's called Shop at Home. Now, this is just a normal project, no DevContainer that I have. It happens to be using Svelte as the main application, and it's got Azure Functions at the back end. I want to use Azure Static Web Apps as a dependency that connects them all together and makes them run. 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. What I want to do is add that DevContainer. I'm going to choose Add Development Container. Now, I could choose Node, but I actually want to find something with functions in it. I typed in func and nothing's there. I'm going to do Show all definitions. Look, there's Azure Functions and Node.js. I'm going to choose that. Now, you can see here I've got my DevContainer 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. What should I do? Well, I can add some more extensions right now by going to 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 DevContainer. Now, all of these are getting added to that DevContainer.json. It's pre-configuring the dependencies for me. Another thing I want is this PostCreate 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. I want to go with cd into Svelte app and then run npm install. This is going to set me up to have the most success. 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. 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. I can go into the API folder because that's where my functions are, and I can run func start, try it a different way. It's running my Azure Function Core tools. Things are working here. Then the second thing I want to do is open another terminal, I hit Command slash, I'll make that go away. 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. 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. Then I'm going to run npm run local. Once it's done, you notice it's pointing to 7071 for the API, so it'll automatically set up course for me. A lot of dependencies going on here. This is like real-world dev. The container is handling all this for us. Once all this is up and running, the nice thing about this is you just have to browse to it. Check and see right here, there's my Svelte application. We can see I've got my list of strawberries and apples and sliced bread. 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. If you're doing team-based development or maybe open-source, where you want other people to use your app without long sets of set of 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. Notice we use Peacock to color the local versus the remote situation to make it easier to tell when you're inside or not, and that's containers. We covered quite a bit today. You can see that VS Code can indeed do that, and make sure you know which button to press, which is that command palette, F1 or Command-Shift-P. I'm John Papa, and you can learn more about VS Code up on the docs from this link here. Thank you. You