 Hey, everyone. Thank you for joining me today here at OpenJS. I hope all of you and your loved ones are staying safe and healthy during these difficult times that we're in. My name is Sana Ajani, and I'm a Program Manager at Microsoft on the Visual Studio Code team. I'm really excited to be here today. I'm coming to you from New Jersey, from my high school bedroom. So today I'm going to be showing you some really awesome tips and tricks on how to be productive inside VS Code. No matter what kind of developer you are, I hope you enjoy the session. Please give us feedback. Tell us what you want to hear from VS Code, and let's get started. All right. Let's get started. Today we're going to spend most of the time inside the tool itself. This is going to be jam-packed with lots of VS Code goodness. I'll start with showing some small quality of life tips and tricks, and then I'll go into showing a demo of some of the latest GitHub integration that we've added. Then finally, I'll do an overview of what remote development is, and I'll show a demo of one of the extensions. So the very first tip is VS Code insiders. You'll notice I have two versions of VS Code on my desktop here, and I'm using the one with the green icon or the VS Code insiders build. This is the one our team uses to actually work on VS Code. So it's straight from master, you're going to be using the hottest bits. If you use insiders, you get a lot of the latest features that are still in preview or things that we're experimenting with that we would like feedback on. And if you find a bug or an issue and you report it, we can typically get that fixed within a day or two. So it's a really fast turnaround. You can have both installed side by side, the stable version and insiders. They are isolated from each other, and you can go to code.visualstudio.com slash insiders to install it. Now let's go on to the next part of customizing the editor. I think the best part of VS Code is that it is extensible and flexible to however you like to code or whatever your productivity workflow or style is with extensions and settings, even the layout. There is just so much ways to customize VS Code. So my VS Code will look different from your VS Code, and that's totally fine, right? We want VS Code to work the way that all developers work. So some of the most important shortcuts and things to remember, the first one is the command palette. So every action that you do in VS Code can basically be mapped to a command. If you are on Windows, it's control shift P, or if you're on a Mac, it's command shift P, or you can use F1. So if I do this, this opens up the command palette. So if you're ever wondering, hey, I wonder how to open this part or I wonder if VS Code can do this. You can search for something that you want to do and it'll typically show up in here. Extensions can also contribute command to this. So for instance, you see I have a bunch that are from this GitHub issues extension, or I can just type things in. So if I want to see all the Git related things I can do, there's a whole bunch of commands that you can access from the command palette. The next pro tip is the settings. So this is going to be control comma or command comma. So if I do this, this will open up my settings editor. There are two settings editors in VS Code, both a UI, which you're seeing right now, and a JSON. So if you prefer one or the other, you can change the shortcut. So if I search for settings, you can see here the setting for settings editor. So I have it set to the UI, but if you prefer JSON, you can do this. Go click that command, command comma, and it'll open up your settings editor in JSON. Also, while we're in settings, if you don't already have this turned on, you definitely must do this right now. Search for autosave. Autosave has literally saved lives. No joke. This is going to save your workflow. If you don't already have this turned on, there's different options that you can turn on. I have it on focus change. So if I switch editors or switch my window, this is what I prefer. But also if you're a JavaScript editor developer, sorry, another thing that might be useful for you instead of autosave is format on save. So you can have one or the other typically set. And this is if you're, you know, using something like prettier or some kind of formatter and you prefer to use this every time you save, it will just format everything with your prettier config. So this is really convenient for a lot of JavaScript developers. Let's go into some other quick keyboard shortcuts that are really going to help you when you're coding inside the editor. So I'm open up the markdown file of this copying line up and down. So this is a really good tip that I really like. So if you are using a Mac, it's going to be shift option up or down. So if I do this, I can actually take each line and just really easily move it to the right place. So this is a really easy and important tip that saved me a lot of time instead of copying and pasting. Another one is multiple cursors. This is awesome. This is going to save you so much time. So there's different ways to do this. The one that's easy to do, if you prefer using a mouse is option click. So I can actually place where I want the cursors to be in this one or you can use shift command L and this will actually highlight the same word every time it's found. So for instance, I can click on this and go shift command L and it'll highlight every instance of the word command or customize and then I can start working on it here. So there's different ways to use multiple cursors, but definitely use them in your workflow. It's very, very helpful. And now let's go into showing you how to customize your VS code layout. So first thing you can do is actually move around things in the activity bar and sidebar. A lot of people don't know you can do this. You can move icons around that you get from different extensions. You can right click and also hide different, you know, extensions icon so you can make your activity bar a little bit cleaner if you want. Same with the status bar. You can choose to hide the things or show things however you want. But one of the latest things that we've done inside VS code is actually help you customize your layout a little bit more. So if you do control or command tilde or sorry, back tick, this is going to open up a terminal. So we want to give you more freedom to be able to move things between the terminal and this sidebar over here. So when you have all this open, it can be a little bit much and maybe you want to move different views to different places based on your preferred workflow. So for instance, if I wanted to maybe take the search panel over here and move it into my bottom view, I can do that now. And now I get the same search functionality. Still works, still does the same thing it would if it was in the other place. And I can also do the vice versa. So if I want to maybe take the debug console here and maybe move it inside my debug view, I can do that too. It's really sweet. It's really easy, helps you really totally customize and take control of your editor and say maybe you are moving things around experimenting and maybe you maybe set something to a different location. You can just right click on the view and reset the location or you can search for the command reset view and it does the same thing. So now everything's back to where it was. Another pro tip is I've heard from a lot of users that they actually prefer this sidebar to be on the right side and not on the left side. So you can go to view appearance and you can move the sidebar to the right. And some people prefer this because when they actually toggle this, it will not actually move their code or their editor, but if it's on the right, if it's on the left side, it will. So I can move it back to the left and this actually moves your code, which it can be a little bit jarring. So these are some really quick and easy pro tips on customizing your editor, customizing your keyboard shortcuts, making use of them to really be productive inside VS Code. And next I'll go into showing some GitHub related features. All right, let's talk GitHub. So on the VS Code team, we want to make you as productive as possible. When we talk to developers, we often hear things like there's so much context switching. So for instance, when I move from all my tabs I have open on GitHub and back to my code, I lose track of a lot of things. I lose time, I lose focus. So we want to make the stuff that you do on GitHub closer to you inside your editor. We want to bring the outer loop, a lot of the collaboration, you know, documentation stuff that you do on GitHub closer to where you're actually writing your code so that there is less context switching. You're not jumping around as much and you can be more focused. And productive. So one of the extensions that you definitely need to have installed if you're working with GitHub in any capacity is the GitHub pull requests and issues extension. So I can search for it inside the extension marketplace. It's the one that's published by GitHub. So this lets you create and manage, comment on and merge pull requests from inside VS Code. And most recently we also added support to let you work with issues as well. So once you have this installed, it's going to contribute this icon to the activity bar and it's going to ask you to sign in. So you have to do that once. So now I'm going to open up a new window. So we wanted to make it really easy for anyone to get started with GitHub as well. So this is a totally empty project. It's an empty window. I'm going to clone a repository. So because I've signed in with the GitHub pull request extension, it's going to leverage that and let me clone from GitHub. So you can see here this populated a list of all the repos that are actually associated with me on my GitHub profile. This is really neat, really convenient for me to be able to just clone a repository. But I can also search for any, anything on GitHub. So for instance, if I wanted to maybe work on a React project, I could do that. I could just search for create react app. All right, let's clone that to my local machine. And you can see here VS code is doing that real quick. Let's open in a new window and I have it installed. Right. That was really easy. Normally with cloning something you have to go to GitHub, no, get the link. Bring it in your terminal. Do all that. So we want to make it super, super easy for you to get started. So if I open up my terminal, let's just check if everything worked out. All right. So VS code cloned it and set up my remotes for me over HTTPS. This is really easy. Great to get started with. Great to just do it from inside your editor if you want to. All right, I want to show some more really cool things. The GitHub extension lets you do inside VS code. So I've opened up a folder with a project I have called task runner. And this is a VS code extension that lets you view NPM, you know, whatever tasks you have inside your project. So let's work on this and show off how to use the pull request and issues view. So I can go to this GitHub view over here and you can see I have two sections for my pull requests and issues. So I can click on this and it'll actually just show me all of the open PRs I have. And I can also have them in these specific categories with these specific filters. So we have one and I can open it up and view the description of this. And this view should look really similar to what it is on GitHub. You can check out the branch. We heard that this was something that a lot of developers didn't do as often as they wanted to because there's just so many commands with git fetch and git add. This just lets you check out the PR branch and test it out yourself. You can go into and view the actual diff. So this is really neat. Let's you view the diff. If I want to change how I view the diff, I can toggle the view from this split one to an inline, whatever you prefer. If I want to, I can add a comment. Looks good to me and just leave that and start a review or just add a single comment. And then I can also use different ways to merge the PR. So you can create a merge commit or you can use squash or rebase, whatever you prefer to do. So this is a really easy way to make collaboration and bring it back into the editor. If I wanted to, I can also assign reviewers that have worked in this repository with me or assign labels to this PR as well. I can also get really good integration with issues. So if you're working in a repository where you maybe track feature requests or bug fixes on issues, you can do that from inside the editor. So by default, there'll be two categories here listed. My issues that have been assigned to me and then issues that I've created. So if you want to customize this a bit further and actually keep track of more specific, maybe labels or more specific things that you've been like assigned with keywords, you can you can do that. So I'm going to click on this pencil here and it's going to open up the settings for this extension. And you can see here all the queries I'm using to populate this list. So for instance, if you prefer to keep track of issues with a certain keyword or the certain label, we can do that. So let's add one and maybe let's call it feature requests. And we can add the query. The query syntax is the same as the one as you would use on GitHub. And we've also added in a couple of these variables because we can do that now in VS code. So let's do the current repository that I own. This is my repository and I'm going to do the label feature request because that's what I use for incoming issues like that. And now I get that as well. So this is really all about making it really easy for you to see and keep track of and not lose all the different issues or things that have been assigned to you. So we can also just create issues and not just manage them from this extension. So if I go back to my read me, this is where I sort of keep track of all the upcoming to do is I have for my project. So let's add one here. Let's add a to do to get user tests running because I've been wanting to do that for a while. So the cool thing you see here is there was a light bulb that popped up when I did the to do comment. So this will give me a suggestion to create an issue based on this to do comment trigger, but better yet, I can actually create the issue and also assign it to someone. So if I click on at, I get a list of all the people that have worked on my project with me and that are on this repo and I can assign it to someone. So let's assign it to me. This is something I've been wanting to do. And then let's create the issue. Get user tests running. Perfect. All right. And that's what I did. It created an issue over here. So if I hover over this, it gave me the issue number. I can click on it, go back to it on GitHub. And I can also view it now from the same view I saw earlier. So my issues, this is the new one assigned to me. It's ready for me to work on really convenient, really easy. I can click on this arrow and start working on it. So now you see, I have switched over to a new branch for me to work on this issue. And you can change these settings again from your settings on JSON. If you don't want to open up a new branch, you can do that. You can choose whatever you want. Say I made a quick change. Let's make the fix. I can go over to my source control view and it'll actually auto fill the commit message for me. And it'll close the issue when I check it in. So this is again, really sort of closing the loop. You can open up an issue, search through issues and then start working on them and just close them from inside VS code. No need for context switching. We're making it really easier to bring that outer developer loop closer to where you are writing your code. So install this extension today. It's really awesome, really convenient. And now I'm going to go into a demo of the remote containers extension. Let's talk remote development. So we started working on remote development extensions inside VS code about a year and a half ago. So well before the impacts of coronavirus and the work from home situation that many of us are in right now. Back then we were talking to lots of developers and seeing more and more of them developing remotely. We talked to companies that had like huge mono repos that maybe didn't even fit on a laptop. And so developers would just connect to a really huge dev VM and nothing was really on their local box. And they were able to just deploy changes and fixes with the VM in a couple of minutes. We've also seen more and more that data scientists are leveraging really specialized VMs that have lots of GPU so that they can run sessions on all their huge data sets and train all their data. So we see that remote development is now like the norm for many developers and especially given our remote work environments we're doing a lot of that now. So we saw that existing remote experiences for development weren't that great. Maybe you were using remote desktop which can be a bit laggy or you were SSHing into a VM and using the terminal and VIM. So we wanted to bring a better development experience to the remote environment that you were working in. So we created four key remote extensions to be able to work for different scenarios remote development inside a virtual machine inside a container inside WSL and most recently inside the browser. We wanted you to be able to develop in the context of the remote host but still have the richness of your VS code experience. So what we did was split the VS code into two components into a UI component which would run on your local machine and a server component which would let you edit and run and debug your code on the remote machine. Basically the VS code server can be run anywhere else and the remote extensions would let you communicate between VS code and the server. So I'm going to show you the remote containers extension and this lets you develop in Docker containers which if you really just think about is kind of like another VM. The power really comes from this ability to create an isolated reusable dev sandbox that you can reuse and share with others. All the remote extensions work in a similar way. So they will install this VS code server component in any one of these remote contexts. So we can search for this remote development extensions. So if you search for this you can see this extension pack which comes with all three the remote WSL containers and SSH and then you can separately search for the extension that lets you work inside the browser. So this is called Visual Studio Codespaces. I'm going to show off containers so when you have installed the extension pack it's going to contribute an icon to the very bottom of your window here and we're going to try a sample. So before I do this let's talk a little bit more about what is going to happen. If you like to dabble in projects you know that sometimes you have dependency conflicts different package versions different versions of node or for instance if you want to clone an open source project and contribute but you realize that to be able to build a project you need something like Rust or C++. I have no idea how to install any of that and to be honest I don't know if I want to because I feel like I'm going to mess up my machine or maybe install the wrong compiler or install the wrong package manager. This happens to a lot of us so we wanted to make that easier to work with the remote containers extension you need to have Docker installed and you see I already have it running. So let's open up my local terminal to see what I have on my machine right now open up my terminal let's type in to see what version of node we have I have an older version of node so let's use the remote containers extension to help us basically create a sandbox where I can use a specific version of my tools and not actually have to worry about messing anything up on my local machine. So I'm going to try a sample remote containers and I'm going to try the node sample. So this is going this is a set of repositories that we've already built for you just to try out what it's like to use this it's going to build an image but I already built it once so it's just going to connect to the container now. All right. So you see here that VS code pretty quickly connected to this container. You see on the bottom left here that I'm inside this dev container. So let's see what that really means. This terminal looks a little different. All right. It looks like I'm on a Linux terminal. I'm inside of a new environment. This is different from my local environment. I'm on a Mac right now. Let's see what version of node I have. All right. I have a updated version of node for me to use. So what happened? Instead of running on my local machine, I am now running inside this container. I'm running VS code inside this Docker container. If you're not familiar with Docker, it's a way for you to encapsulate environments from the OS down and it lets you build more specific things and layers on top of it. So the magic here is really inside this dev container. So I have this Docker file. This is not really standard Docker file. I'm not really doing anything fancy here. VS code also doesn't really interfere and get involved here. It's just telling Docker, hey, go build this and run the container. So once the container is building, then we're going to inject a version of the VS code server in the container, not the UI, just the VS code server, just the things that give you language support, debugging support, things like that. And now there's a connection between my local client that's running my UI. So you see here, I still have the same VS code theme I had on my local machine. So I'm running my UI locally, but I've connected to this container. So now the magic is in this dev container.json. This tells VS code how to set up my container for me to be able to develop like I do locally. So it's going to point it to the Docker file I want. And it's going to set settings. So I can choose that I want a bash terminal inside this environment, that I want these specific extensions. I have the ES lint extension installed. So you can see here, there's a difference between the extensions I have inside my container and inside my local computer. And I can also list ports to forward so that I can connect to them locally. So let's try running this. Let's just see what happens. This is a standard Express app. I'm going to open up the main file. This is just an Express app. You see, I still get a lot of the colorization. If I wanted to, I get, you know, the auto complete things like this that I'm used to. I can get linting, I can get errors. This is all things that I can do. I can set breakpoints. So let's just run it at five, see what happens. Or it's running on this local address and I'm able to connect to it. Like how can I actually connect to this address from my, you know, local edge browser? Like this is the magic of remote development. You saw in the dev container that I set up the ports I wanted to forward. You know, containers are isolated. So if I wanted to access anything from inside the container, I needed to forward it so I can access it for my local host. So I didn't have to set up anything for this to work. Right, we are now in a specific environment for me with a specific version of my tools. I didn't have to set anything up besides installing the containers extension and having Docker installed. So this is really, really cool, right? Like think about all the cases of this could be used for. It's really great for onboarding people that are new to your team. So, you know, we all know adding a new engineer to our team is expensive. They spend two weeks trying to figure out how to set up their computer. You have to teach them how to run the build tools, show them really specific things to your team's environment. But instead, you can encode this all in a Docker file. You don't have to spend weeks reading through all the giant steps in your readme. You don't have to pollute your machine or install the wrong version of something. You just pull any project that has a dev container. So VS Code knows how to connect to it and you can just build and connect the container. You can also specify the VS Code setup inside a dev container. This is also really awesome for maybe the education scenario. Think about students learning to code in their first computer science class. So many of them get discouraged because they don't know how to, you know, install Java and the JDK and their IDE at home. But if you encapsulate all the dependencies and set up inside just a Docker container, that's all they need to know. So I really wanna thank everyone for joining us. This was an awesome, awesome event. I'm glad you were all here at OpenJS. So install the containers extension, install the GitHub extension, give us feedback on what else you wanna see from VS Code. And I hope you have a great rest of your day. Thank you.