Get the latest and greatest VS Code pro tips in the 2021 video 👉 https://youtu.be/ifTF3ags0XI

Learn how to use Visual Studio Code like a pro with my top-ten strategies for developer productivity and happiness. https://angularfirebase.com/lessons/top-10-vscode-pro-tips/

- Get VS Code https://code.visualstudio.com/
2024-02-04T07:32:28.970Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
47518834-1234-48a6-97ed-2053d8c4a5c1
62da991c4fc5891bd16388fc2f03040a7dd73faec7ef58aaa216b6d89dd57875
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In just 3 years, Visual Studio Code has gone from being non existent to the single most popular code editor among all developers, according to the Stack flow 2018 survey.
I personally like it because it's minimal yet super powerful and free and open source.
In this episode, I'll show you exactly what I mean by taking you through my top ten pro tips for using Versus Code effectively.
If you're new here, hit subscribe and you'll find a full write up on angular fire .com.
The first thing you should know is how to get around the file system quickly.
You can open up Versus Code by running code from the command line with the directory that you want to open.
The quickest way to move around is to memorize a few hot keys or key bindings.
If you hit control k, It'll bring up a full list of key bindings that you can search through and customize as needed, but the single most important one is control p which brings up the command palette.
We'll be using the command palette lot in this video, so don't forget this one.
To navigate between files, you can simply start typing the file name, and it will automatically search through your tree to find the corresponding file.
That's way quicker than trying to navigate through a directory tree by clicking, but sometimes you might wanna bookmark specific lines of code and navigate to them later.
For that, I recommend using a bookmark plugin, which will allow us to highlight a block of code, set a bookmark number for it, and then Easily navigate to it later on using the command palette in Versus Code.
As you probably noticed, I'm here in an Angular project, so I'm going to install some snippets to generate a lot of the boilerplate code for me.
In Angular, we have 2 really good snippet libraries, one from Mike Moreland and one from John Papa, and you can use them both together.
When you install snippets, they're automatically added to the Versus Code IntelliSense.
So say I need to code up something really tedious like an NG switch statement, I can simply start typing the prefix in the snippet library, and it will automatically generate this code for me.
There's even snippets available for libraries like Angular Material, NGXS, and many others.
Number 8 is Versus Code's integrated command line terminal.
You can pull it up by simply dragging from the bottom of the screen Or you can use the control back tick key binding.
You can also pull up the command palette with control p and open it there.
What's really cool is that Versus Code will Automatically recognize scripts that you have set up in your project.
In JavaScript, you probably have something set up with NPM or maybe with Grunt or Gulp.
You can simply type in NPM, And it will show all of your scripts right there automatically so you can run them without ever having to type anything.
With that, we can segue into the next major feature which is IntelliSense.
IntelliSense is just a fancy word for code auto completion.
And if you use a language that's strong typed like TypeScript, you'll get incredible developer tooling in Versus Code.
You'll see this automatically as you're coding, but you can pull it up manually with control space as well.
Code completion is pretty self explanatory, but there's some pretty cool things you can do with it.
Let's say we're going into a large TypeScript file for the first time and we wanna see all the methods and classes that are defined in this file.
We can go into the command palette, type in the at symbol, And that will give us all of the interfaces, methods, and properties defined in this file.
In a strong type language, another thing you might wanna do is peak the type definitions for a given interface.
It can be really disruptive to have multiple files open at once looking for different type definitions, but you can simply click on an interface and say peak definition And it will find that in your project even if it's buried in your node modules and show you the properties on that interface.
On the flip side of this, you be looking at an interface and want to know how many references you have to it in a project.
If you right click and go to find references, it will show you exactly which files are referencing this interface in your project.
But let's say I'm working with an interface and I decide I don't like the name of it.
I can highlight it, Then right click and say rename symbol or just hit f 2 and give it a new name.
That not only updates the current file but also every other file in the project with that reference.
And that's a lot safer than using just a regular find and replace because it's looking at the actual code reference and not the text itself, yet another good reason to strong type your code.
Now while we're on the topic of types, I want to show you this really cool extension called paste JSON as code.
Almost all apps make calls to APIs that return JSON, But you might not have an easy way to actually strong type this response in your project.
I'm in the Twitter API right now, and I'm just going to copy and paste this example response in JSON format.
I'll go ahead and paste the JSON into a tweet dot JSON file and then create a new file called tweet dotts.
Then I can open up the command palette And just enter that paste as JSON command, and we'll set the top level interface name as tweet.
And then magically, we get this whole set of interfaces that model this API response.
So that means you can get incredible developer tooling for any API that you work with whether it has types or not.
Okay.
I think I've heard just about enough of types.
Let's just chill out for a second.
Hit control k z to go into Zen mode.
This will give us a viewport with all of the distractions removed.
If you don't care what your Docker container is doing or what the Git status is, you can just go into Zen mode and focus on writing code.
While we're at it, let's install the Spotify extension for Versus Code and throw on some carbon based life forms and just chill out.
But unfortunately, we relaxed a little too hard And now our application is broken.
Let's go into the debugger panel and see how that might be able to help us out.
You get to the debugger by clicking on the bug icon, And I have a simple node script set up here.
Node works out of the box, but you can also install extensions to support different runtimes.
In the script, I have 2 separate functions that are each updating a global variable and we'll just run these one after the other.
I can set up break points in my code by simply adding a red dot in between the line numbers.
This will stop the execution of the script once it hits this breakpoint, and then you can inspect the local state and the call stack and things like that.
All I have to do is click the play button, and it will automatically attach the debugger to this process.
You can see here it shows all of the local variables as well as all of our global variables in node.
You can also go down to the debugger console and start executing commands within the context of the script, and we'll have access to its current state.
So if we want to inspect the name of a variable, we just type it down here in the command line and it will print that out in the console.
Debugging Node is great, but generally, my front end apps are a lot more complex than my back end apps.
I'd like to debug my Angular applications in the context of the Chrome browser.
After installing the Chrome extension, we can go back to the debugger and click the play button, but this time use Chrome.
Then we can set up a launch configuration for this specific app, which in Angular's case, it'll be served on local host 42100.
Then we can go into one of our component files and set up some break points It's where we want to have the debugger run-in the browser.
I'll set up one breakpoint before the components actually initialized and then another one that will run on a button click.
Then you can see if we click play, it will launch Chrome and have our debugger running here which we can control from Versus Code.
When we click play again, it will define the title And we can actually highlight over properties in the code and it will tell us the state of the data.
Managing state in a web application is one of the biggest Challenges, and this debugger can really help you do that more effectively.
Another huge way that Versus Code helps you out is with your git version control.
Dealing with git in a large project gets pretty hard to do from the command line.
You might have already noticed that Versus Code automatically highlights all of your files.
Untracked or new files are green, modified files are yellow, and files with wintein errors are red.
If we want to commit some changes, we can just go into the git add our commit message, and we're done.
We don't have to do any git add or git flag message from the command line.
But what if we actually didn't mean to commit that code?
Well, we can come here to the options menu and just roll back that commit.
And you can run pretty much every other Git command from this menu as well.
If we want to revert some changes on a specific file, we can simply do that by clicking this revert button, and that will discard all of the changes that we made.
Or if we just want to commit a couple files individually, we can click the plus button and that will only stage those files for your next commit.
So that's super powerful on its own, but I wanna know about the git status pretty much everywhere in my code.
I wanna know who changed what and when it was changed Because I'm working with a team of junior developers and they keep screwing things up, we can install GitLens from the extensions page.
And then if we go back to the Git tab, you'll see that we have an additional panel Here with all of the GitLens data.
It makes it a lot easier to traverse the Git tree and also deal with things like stashes and tags and also your remote repositories.
But it doesn't just stop at the Git panel.
It actually annotates all of your code with information about Git.
If we go into a file and just hover over a piece of code, it will tell us exactly who wrote that code, when they wrote it, and its commit ID.
This brings us to Versus Code Live Share, which is a brand new feature in the editor.
It allows you to connect your GitHub or Azure account to Versus Code and then collaborate with multiple team members on a single document in real time.
It's kind of like the Google Docs of writing code.
I've been able to use this with some Angular Firebase Pro members to collaborate on issues, and it's been super useful.
You can install the extension, and you'll need to connect a GitHub account or a Microsoft account.
After that, it's just a matter of clicking share, and Versus Code will return a link that you can pass along to other team members.
I probably could have covered about 90 other topics in this video, but I'm gonna go ahead and wrap things up there.
If it helped you, please like and subscribe.
And if you're serious about building apps, consider becoming a pro member at angularfirebase.com.
We can write code together using Versus Code Live Share and work on strategies to get your app built and shipped as soon as possible.
Thanks for watching, and I'll talk to you soon.

Speaker 0: In just 3 years, Visual Studio Code has gone from being non existent to the single most popular code editor among all developers, according to the Stack flow 2018 survey. I personally like it because it's minimal yet super powerful and free and open source. In this episode, I'll show you exactly what I mean by taking you through my top ten pro tips for using Versus Code effectively. If you're new here, hit subscribe and you'll find a full write up on angular fire .com. The first thing you should know is how to get around the file system quickly.

You can open up Versus Code by running code from the command line with the directory that you want to open. The quickest way to move around is to memorize a few hot keys or key bindings. If you hit control k, It'll bring up a full list of key bindings that you can search through and customize as needed, but the single most important one is control p which brings up the command palette. We'll be using the command palette lot in this video, so don't forget this one. To navigate between files, you can simply start typing the file name, and it will automatically search through your tree to find the corresponding file.

That's way quicker than trying to navigate through a directory tree by clicking, but sometimes you might wanna bookmark specific lines of code and navigate to them later. For that, I recommend using a bookmark plugin, which will allow us to highlight a block of code, set a bookmark number for it, and then Easily navigate to it later on using the command palette in Versus Code. As you probably noticed, I'm here in an Angular project, so I'm going to install some snippets to generate a lot of the boilerplate code for me. In Angular, we have 2 really good snippet libraries, one from Mike Moreland and one from John Papa, and you can use them both together. When you install snippets, they're automatically added to the Versus Code IntelliSense.

So say I need to code up something really tedious like an NG switch statement, I can simply start typing the prefix in the snippet library, and it will automatically generate this code for me. There's even snippets available for libraries like Angular Material, NGXS, and many others. Number 8 is Versus Code's integrated command line terminal. You can pull it up by simply dragging from the bottom of the screen Or you can use the control back tick key binding. You can also pull up the command palette with control p and open it there.

What's really cool is that Versus Code will Automatically recognize scripts that you have set up in your project. In JavaScript, you probably have something set up with NPM or maybe with Grunt or Gulp. You can simply type in NPM, And it will show all of your scripts right there automatically so you can run them without ever having to type anything. With that, we can segue into the next major feature which is IntelliSense. IntelliSense is just a fancy word for code auto completion.

And if you use a language that's strong typed like TypeScript, you'll get incredible developer tooling in Versus Code. You'll see this automatically as you're coding, but you can pull it up manually with control space as well. Code completion is pretty self explanatory, but there's some pretty cool things you can do with it. Let's say we're going into a large TypeScript file for the first time and we wanna see all the methods and classes that are defined in this file. We can go into the command palette, type in the at symbol, And that will give us all of the interfaces, methods, and properties defined in this file.

In a strong type language, another thing you might wanna do is peak the type definitions for a given interface. It can be really disruptive to have multiple files open at once looking for different type definitions, but you can simply click on an interface and say peak definition And it will find that in your project even if it's buried in your node modules and show you the properties on that interface. On the flip side of this, you be looking at an interface and want to know how many references you have to it in a project. If you right click and go to find references, it will show you exactly which files are referencing this interface in your project. But let's say I'm working with an interface and I decide I don't like the name of it.

I can highlight it, Then right click and say rename symbol or just hit f 2 and give it a new name. That not only updates the current file but also every other file in the project with that reference. And that's a lot safer than using just a regular find and replace because it's looking at the actual code reference and not the text itself, yet another good reason to strong type your code. Now while we're on the topic of types, I want to show you this really cool extension called paste JSON as code. Almost all apps make calls to APIs that return JSON, But you might not have an easy way to actually strong type this response in your project.

I'm in the Twitter API right now, and I'm just going to copy and paste this example response in JSON format. I'll go ahead and paste the JSON into a tweet dot JSON file and then create a new file called tweet dotts. Then I can open up the command palette And just enter that paste as JSON command, and we'll set the top level interface name as tweet. And then magically, we get this whole set of interfaces that model this API response. So that means you can get incredible developer tooling for any API that you work with whether it has types or not.

Okay. I think I've heard just about enough of types. Let's just chill out for a second. Hit control k z to go into Zen mode. This will give us a viewport with all of the distractions removed.

If you don't care what your Docker container is doing or what the Git status is, you can just go into Zen mode and focus on writing code. While we're at it, let's install the Spotify extension for Versus Code and throw on some carbon based life forms and just chill out. But unfortunately, we relaxed a little too hard And now our application is broken. Let's go into the debugger panel and see how that might be able to help us out. You get to the debugger by clicking on the bug icon, And I have a simple node script set up here.

Node works out of the box, but you can also install extensions to support different runtimes. In the script, I have 2 separate functions that are each updating a global variable and we'll just run these one after the other. I can set up break points in my code by simply adding a red dot in between the line numbers. This will stop the execution of the script once it hits this breakpoint, and then you can inspect the local state and the call stack and things like that. All I have to do is click the play button, and it will automatically attach the debugger to this process.

You can see here it shows all of the local variables as well as all of our global variables in node. You can also go down to the debugger console and start executing commands within the context of the script, and we'll have access to its current state. So if we want to inspect the name of a variable, we just type it down here in the command line and it will print that out in the console. Debugging Node is great, but generally, my front end apps are a lot more complex than my back end apps. I'd like to debug my Angular applications in the context of the Chrome browser.

After installing the Chrome extension, we can go back to the debugger and click the play button, but this time use Chrome. Then we can set up a launch configuration for this specific app, which in Angular's case, it'll be served on local host 42100. Then we can go into one of our component files and set up some break points It's where we want to have the debugger run-in the browser. I'll set up one breakpoint before the components actually initialized and then another one that will run on a button click. Then you can see if we click play, it will launch Chrome and have our debugger running here which we can control from Versus Code.

When we click play again, it will define the title And we can actually highlight over properties in the code and it will tell us the state of the data. Managing state in a web application is one of the biggest Challenges, and this debugger can really help you do that more effectively. Another huge way that Versus Code helps you out is with your git version control. Dealing with git in a large project gets pretty hard to do from the command line. You might have already noticed that Versus Code automatically highlights all of your files.

Untracked or new files are green, modified files are yellow, and files with wintein errors are red. If we want to commit some changes, we can just go into the git add our commit message, and we're done. We don't have to do any git add or git flag message from the command line. But what if we actually didn't mean to commit that code? Well, we can come here to the options menu and just roll back that commit.

And you can run pretty much every other Git command from this menu as well. If we want to revert some changes on a specific file, we can simply do that by clicking this revert button, and that will discard all of the changes that we made. Or if we just want to commit a couple files individually, we can click the plus button and that will only stage those files for your next commit. So that's super powerful on its own, but I wanna know about the git status pretty much everywhere in my code. I wanna know who changed what and when it was changed Because I'm working with a team of junior developers and they keep screwing things up, we can install GitLens from the extensions page.

And then if we go back to the Git tab, you'll see that we have an additional panel Here with all of the GitLens data. It makes it a lot easier to traverse the Git tree and also deal with things like stashes and tags and also your remote repositories. But it doesn't just stop at the Git panel. It actually annotates all of your code with information about Git. If we go into a file and just hover over a piece of code, it will tell us exactly who wrote that code, when they wrote it, and its commit ID.

This brings us to Versus Code Live Share, which is a brand new feature in the editor. It allows you to connect your GitHub or Azure account to Versus Code and then collaborate with multiple team members on a single document in real time. It's kind of like the Google Docs of writing code. I've been able to use this with some Angular Firebase Pro members to collaborate on issues, and it's been super useful. You can install the extension, and you'll need to connect a GitHub account or a Microsoft account.

After that, it's just a matter of clicking share, and Versus Code will return a link that you can pass along to other team members. I probably could have covered about 90 other topics in this video, but I'm gonna go ahead and wrap things up there. If it helped you, please like and subscribe. And if you're serious about building apps, consider becoming a pro member at angularfirebase.com. We can write code together using Versus Code Live Share and work on strategies to get your app built and shipped as soon as possible.

Thanks for watching, and I'll talk to you soon.
In just 3 years, Visual Studio Code has gone from being non existent to the single most popular code editor among all developers, according to the Stack flow 2018 survey. I personally like it because it's minimal yet super powerful and free and open source. In this episode, I'll show you exactly what I mean by taking you through my top ten pro tips for using Versus Code effectively.
software development
software
programming
If you're new here, hit subscribe and you'll find a full write up on angular fire .com. The first thing you should know is how to get around the file system quickly. You can open up Versus Code by running code from the command line with the directory that you want to open. The quickest way to move around is to memorize a few hot keys or key bindings. If you hit control k, It'll bring up a full list of key bindings that you can search through and customize as needed, but the single most important one is control p which brings up the command palette. We'll be using the command palette lot in this video, so don't forget this one. To navigate between files, you can simply start typing the file name, and it will automatically search through your tree to find the corresponding file. That's way quicker than trying to navigate through a directory tree by clicking, but sometimes you might wanna bookmark specific lines of code and navigate to them later. For that, I recommend using a bookmark plugin, which will allow us to highlight a block of code, set a bookmark number for it, and then Easily navigate to it later on using the command palette in Versus Code. As you probably noticed, I'm here in an Angular project, so I'm going to install some snippets to generate a lot of the boilerplate code for me.
In Angular, we have 2 really good snippet libraries, one from Mike Moreland and one from John Papa, and you can use them both together. When you install snippets, they're automatically added to the Versus Code IntelliSense. So say I need to code up something really tedious like an NG switch statement, I can simply start typing the prefix in the snippet library, and it will automatically generate this code for me. There's even snippets available for libraries like Angular Material, NGXS, and many others.
programming
software
Number 8 is Versus Code's integrated command line terminal. You can pull it up by simply dragging from the bottom of the screen Or you can use the control back tick key binding. You can also pull up the command palette with control p and open it there. What's really cool is that Versus Code will Automatically recognize scripts that you have set up in your project. In JavaScript, you probably have something set up with NPM or maybe with Grunt or Gulp. You can simply type in NPM, And it will show all of your scripts right there automatically so you can run them without ever having to type anything.
With that, we can segue into the next major feature which is IntelliSense. IntelliSense is just a fancy word for code auto completion. And if you use a language that's strong typed like TypeScript, you'll get incredible developer tooling in Versus Code. You'll see this automatically as you're coding, but you can pull it up manually with control space as well. Code completion is pretty self explanatory, but there's some pretty cool things you can do with it. Let's say we're going into a large TypeScript file for the first time and we wanna see all the methods and classes that are defined in this file.
programming
artificial intelligence
machine learning
We can go into the command palette, type in the at symbol, And that will give us all of the interfaces, methods, and properties defined in this file. In a strong type language, another thing you might wanna do is peak the type definitions for a given interface. It can
languages
be really disruptive to have multiple files open at once looking for different type definitions, but you can simply click on an interface and say peak definition And it will find that in your project even if it's buried in your node modules and show you the properties on that interface. On the flip side of this, you be looking at an interface and want to know how many references you have to it in a project. If you right click and go to find references, it will show you exactly which files are referencing this interface in your project. But let's say I'm working with an interface and I decide I don't like the name of it. I can highlight it, Then right click and say rename symbol or just hit f 2 and give it a new name. That not only updates the current file but also every other file in the project with that reference. And that's a lot safer than using just a regular find and replace because it's looking at the actual code reference and not the text itself, yet another good reason to strong type your code. Now while we're on the topic of types, I want to show you this really cool extension called paste JSON as code. Almost all apps make calls to APIs that return JSON, But you might not have an easy way to actually strong type this response in your project.
I'm in the Twitter API right now, and I'm just going to copy and paste this example response in JSON format. I'll go ahead and paste the JSON into a tweet dot JSON file and then create a new file called tweet dotts. Then I can open up the command palette And just enter that paste as JSON command, and we'll set the top level interface name as tweet.
twitter
And then magically, we get this whole set of interfaces that model this API response. So that means you can get incredible developer tooling for any API that you work with whether it has types or not. Okay. I think I've heard just about enough of types. Let's just chill out for a second.
software development
software
Hit control k z to go into Zen mode. This will give us a viewport with all of the distractions removed. If you don't care what your Docker container is doing or what the Git status is, you can just go into Zen mode and focus on writing code. While we're at it, let's install the Spotify extension for Versus Code and throw on some carbon based life forms and just chill out. But unfortunately, we relaxed a little too hard And now our application is broken. Let's go into the debugger panel and see how that might be able to help us out. You get to the debugger by clicking on the bug icon, And I have a simple node script set up here. Node works out of the box, but you can also install extensions to support different runtimes. In the script, I have 2 separate functions that are each updating a global variable and we'll just run these one after the other. I can set up break points in my code by simply adding a red dot in between the line numbers. This will stop the execution of the script once it hits this breakpoint, and then you can inspect the local state and the call stack and things like that. All I have to do is click the play button, and it will automatically attach the debugger to this process. You can see here it shows all of the local variables as well as all of our global variables in node. You can also go down to the debugger console and start executing commands within the context of the script, and we'll have access to its current state. So if we want to inspect the name of a variable, we just type it down here in the command line and it will print that out in the console. Debugging Node is great, but generally, my front end apps are a lot more complex than my back end apps. I'd like to debug my Angular applications in the context of the Chrome browser. After installing the Chrome extension, we can go back to the debugger and click the play button, but this time use Chrome. Then we can set up a launch configuration for this specific app, which in Angular's case, it'll be served on local host 42100. Then we can go into one of our component files and set up some break points It's where we want to have the debugger run-in the browser.
I'll set up one breakpoint before the components actually initialized and then another one that will run on a button click. Then you can see if we click play, it will launch Chrome and have our debugger running here which we can control from Versus Code. When we click play again, it will define the title And we can actually highlight over properties in the code and it will tell us the state of the data. Managing state in a web application is one of the biggest Challenges, and this debugger can really help you do that more effectively.
video gaming
software development
Another huge way that Versus Code helps you out is with your git version control. Dealing with git in a large project gets pretty hard to do from the command line. You might have already noticed that Versus Code automatically highlights all of your files. Untracked or new files are green, modified files are yellow, and files with wintein errors are red. If we want to commit some changes, we can just go into the git add our commit message, and we're done. We don't have to do any git add or git flag message from the command line. But what if we actually didn't mean to commit that code? Well, we can come here to the options menu and just roll back that commit. And you can run pretty much every other Git command from this menu as well. If we want to revert some changes on a specific file, we can simply do that by clicking this revert button, and that will discard all of the changes that we made. Or if we just want to commit a couple files individually, we can click the plus button and that will only stage those files for your next commit.
So that's super powerful on its own, but I wanna know about the git status pretty much everywhere in my code. I wanna know who changed what and when it was changed Because I'm working with a team of junior developers and they keep screwing things up, we can install GitLens from the extensions page.
software development
software
And then if we go back to the Git tab, you'll see that we have an additional panel Here with all of the GitLens data. It makes it a lot easier to traverse the Git tree and also deal with things like stashes and tags and also your remote repositories. But it doesn't just stop at the Git panel. It actually annotates all of your code with information about Git. If we go into a file and just hover over a piece of code, it will tell us exactly who wrote that code, when they wrote it, and its commit ID.
This brings us to Versus Code Live Share, which is a brand new feature in the editor. It allows you to connect your GitHub or Azure account to Versus Code and then collaborate with multiple team members on a single document in real time. It's kind of like the Google Docs of writing code.
software
software development
I've been able to use this with some Angular Firebase Pro members to collaborate on issues, and it's been super useful. You can install the extension, and you'll need to connect a GitHub account or a Microsoft account. After that, it's just a matter of clicking share, and Versus Code will return a link that you can pass along to other team members.
I probably could have covered about 90 other topics in this video, but I'm gonna go ahead and wrap things up there. If it helped you, please like and subscribe. And if you're serious about building apps, consider becoming a pro member at angularfirebase.com. We can write code together using Versus Code Live Share and work on strategies to get your app built and shipped as soon as possible. Thanks for watching, and I'll talk to you soon.
software development
software
In just 3 years, Visual Studio Code has gone from being non existent to the single most popular code editor among all developers, according to the Stack flow 2018 survey. I personally like it because it's minimal yet super powerful and free and open source. In this episode, I'll show you exactly what I mean by taking you through my top ten pro tips for using Versus Code effectively. If you're new here, hit subscribe and you'll find a full write up on angular fire .com. The first thing you should know is how to get around the file system quickly. You can open up Versus Code by running code from the command line with the directory that you want to open. The quickest way to move around is to memorize a few hot keys or key bindings. If you hit control k, It'll bring up a full list of key bindings that you can search through and customize as needed, but the single most important one is control p which brings up the command palette. We'll be using the command palette lot in this video, so don't forget this one. To navigate between files, you can simply start typing the file name, and it will automatically search through your tree to find the corresponding file. That's way quicker than trying to navigate through a directory tree by clicking, but sometimes you might wanna bookmark specific lines of code and navigate to them later. For that, I recommend using a bookmark plugin, which will allow us to highlight a block of code, set a bookmark number for it, and then Easily navigate to it later on using the command palette in Versus Code. As you probably noticed, I'm here in an Angular project, so I'm going to install some snippets to generate a lot of the boilerplate code for me. In Angular, we have 2 really good snippet libraries, one from Mike Moreland and one from John Papa, and you can use them both together. When you install snippets, they're automatically added to the Versus Code IntelliSense. So say I need to code up something really tedious like an NG switch statement, I can simply start typing the prefix in the snippet library, and it will automatically generate this code for me. There's even snippets available for libraries like Angular Material, NGXS, and many others. Number 8 is Versus Code's integrated command line terminal. You can pull it up by simply dragging from the bottom of the screen Or you can use the control back tick key binding. You can also pull up the command palette with control p and open it there. What's really cool is that Versus Code will Automatically recognize scripts that you have set up in your project. In JavaScript, you probably have something set up with NPM or maybe with Grunt or Gulp. You can simply type in NPM, And it will show all of your scripts right there automatically so you can run them without ever having to type anything. With that, we can segue into the next major feature which is IntelliSense. IntelliSense is just a fancy word for code auto completion. And if you use a language that's strong typed like TypeScript, you'll get incredible developer tooling in Versus Code. You'll see this automatically as you're coding, but you can pull it up manually with control space as well. Code completion is pretty self explanatory, but there's some pretty cool things you can do with it. Let's say we're going into a large TypeScript file for the first time and we wanna see all the methods and classes that are defined in this file. We can go into the command palette, type in the at symbol, And that will give us all of the interfaces, methods, and properties defined in this file. In a strong type language, another thing you might wanna do is peak the type definitions for a given interface. It can be really disruptive to have multiple files open at once looking for different type definitions, but you can simply click on an interface and say peak definition And it will find that in your project even if it's buried in your node modules and show you the properties on that interface. On the flip side of this, you be looking at an interface and want to know how many references you have to it in a project. If you right click and go to find references, it will show you exactly which files are referencing this interface in your project. But let's say I'm working with an interface and I decide I don't like the name of it. I can highlight it, Then right click and say rename symbol or just hit f 2 and give it a new name. That not only updates the current file but also every other file in the project with that reference. And that's a lot safer than using just a regular find and replace because it's looking at the actual code reference and not the text itself, yet another good reason to strong type your code. Now while we're on the topic of types, I want to show you this really cool extension called paste JSON as code. Almost all apps make calls to APIs that return JSON, But you might not have an easy way to actually strong type this response in your project. I'm in the Twitter API right now, and I'm just going to copy and paste this example response in JSON format. I'll go ahead and paste the JSON into a tweet dot JSON file and then create a new file called tweet dotts. Then I can open up the command palette And just enter that paste as JSON command, and we'll set the top level interface name as tweet. And then magically, we get this whole set of interfaces that model this API response. So that means you can get incredible developer tooling for any API that you work with whether it has types or not. Okay. I think I've heard just about enough of types. Let's just chill out for a second. Hit control k z to go into Zen mode. This will give us a viewport with all of the distractions removed. If you don't care what your Docker container is doing or what the Git status is, you can just go into Zen mode and focus on writing code. While we're at it, let's install the Spotify extension for Versus Code and throw on some carbon based life forms and just chill out. But unfortunately, we relaxed a little too hard And now our application is broken. Let's go into the debugger panel and see how that might be able to help us out. You get to the debugger by clicking on the bug icon, And I have a simple node script set up here. Node works out of the box, but you can also install extensions to support different runtimes. In the script, I have 2 separate functions that are each updating a global variable and we'll just run these one after the other. I can set up break points in my code by simply adding a red dot in between the line numbers. This will stop the execution of the script once it hits this breakpoint, and then you can inspect the local state and the call stack and things like that. All I have to do is click the play button, and it will automatically attach the debugger to this process. You can see here it shows all of the local variables as well as all of our global variables in node. You can also go down to the debugger console and start executing commands within the context of the script, and we'll have access to its current state. So if we want to inspect the name of a variable, we just type it down here in the command line and it will print that out in the console. Debugging Node is great, but generally, my front end apps are a lot more complex than my back end apps. I'd like to debug my Angular applications in the context of the Chrome browser. After installing the Chrome extension, we can go back to the debugger and click the play button, but this time use Chrome. Then we can set up a launch configuration for this specific app, which in Angular's case, it'll be served on local host 42100. Then we can go into one of our component files and set up some break points It's where we want to have the debugger run-in the browser. I'll set up one breakpoint before the components actually initialized and then another one that will run on a button click. Then you can see if we click play, it will launch Chrome and have our debugger running here which we can control from Versus Code. When we click play again, it will define the title And we can actually highlight over properties in the code and it will tell us the state of the data. Managing state in a web application is one of the biggest Challenges, and this debugger can really help you do that more effectively. Another huge way that Versus Code helps you out is with your git version control. Dealing with git in a large project gets pretty hard to do from the command line. You might have already noticed that Versus Code automatically highlights all of your files. Untracked or new files are green, modified files are yellow, and files with wintein errors are red. If we want to commit some changes, we can just go into the git add our commit message, and we're done. We don't have to do any git add or git flag message from the command line. But what if we actually didn't mean to commit that code? Well, we can come here to the options menu and just roll back that commit. And you can run pretty much every other Git command from this menu as well. If we want to revert some changes on a specific file, we can simply do that by clicking this revert button, and that will discard all of the changes that we made. Or if we just want to commit a couple files individually, we can click the plus button and that will only stage those files for your next commit. So that's super powerful on its own, but I wanna know about the git status pretty much everywhere in my code. I wanna know who changed what and when it was changed Because I'm working with a team of junior developers and they keep screwing things up, we can install GitLens from the extensions page. And then if we go back to the Git tab, you'll see that we have an additional panel Here with all of the GitLens data. It makes it a lot easier to traverse the Git tree and also deal with things like stashes and tags and also your remote repositories. But it doesn't just stop at the Git panel. It actually annotates all of your code with information about Git. If we go into a file and just hover over a piece of code, it will tell us exactly who wrote that code, when they wrote it, and its commit ID. This brings us to Versus Code Live Share, which is a brand new feature in the editor. It allows you to connect your GitHub or Azure account to Versus Code and then collaborate with multiple team members on a single document in real time. It's kind of like the Google Docs of writing code. I've been able to use this with some Angular Firebase Pro members to collaborate on issues, and it's been super useful. You can install the extension, and you'll need to connect a GitHub account or a Microsoft account. After that, it's just a matter of clicking share, and Versus Code will return a link that you can pass along to other team members. I probably could have covered about 90 other topics in this video, but I'm gonna go ahead and wrap things up there. If it helped you, please like and subscribe. And if you're serious about building apps, consider becoming a pro member at angularfirebase.com. We can write code together using Versus Code Live Share and work on strategies to get your app built and shipped as soon as possible. Thanks for watching, and I'll talk to you soon.
In
in
just
just
3
3
years,
years
Visual
visual
Studio
studio
Code
code
has
has
gone
gone
from
from
being
being
non
non
existent
existent
to
to
the
the
single
single
most
most
popular
popular
code
code
editor
editor
among
among
all
all
developers,
developers
according
according
to
to
the
the
Stack
stack
flow
flow
2018
2018
survey.
survey
I
i
personally
personally
like
like
it
it
because
because
it's
it's
minimal
minimal
yet
yet
super
super
powerful
powerful
and
and
free
free
and
and
open
open
source.
source
In
in
this
this
episode,
episode
I'll
i'll
show
show
you
you
exactly
exactly
what
what
I
i
mean
mean
by
by
taking
taking
you
you
through
through
my
my
top
top
ten
ten
pro
pro
tips
tips
for
for
using
using
Versus
versus
Code
code
effectively.
effectively
If
if
you're
you're
new
new
here,
here
hit
hit
subscribe
subscribe
and
and
you'll
you'll
find
find
a
a
full
full
write
write
up
up
on
on
angular
angular
fire
fire
.com.
com
The
the
first
first
thing
thing
you
you
should
should
know
know
is
is
how
how
to
to
get
get
around
around
the
the
file
file
system
system
quickly.
quickly
You
you
can
can
open
open
up
up
Versus
versus
Code
code
by
by
running
running
code
code
from
from
the
the
command
command
line
line
with
with
the
the
directory
directory
that
that
you
you
want
want
to
to
open.
open
The
the
quickest
quickest
way
way
to
to
move
move
around
around
is
is
to
to
memorize
memorize
a
a
few
few
hot
hot
keys
keys
or
or
key
key
bindings.
bindings
If
if
you
you
hit
hit
control
control
k,
k
It'll
it'll
bring
bring
up
up
a
a
full
full
list
list
of
of
key
key
bindings
bindings
that
that
you
you
can
can
search
search
through
through
and
and
customize
customize
as
as
needed,
needed
but
but
the
the
single
single
most
most
important
important
one
one
is
is
control
control
p
p
which
which
brings
brings
up
up
the
the
command
command
palette.
palette
We'll
we'll
be
be
using
using
the
the
command
command
palette
palette
lot
lot
in
in
this
this
video,
video
so
so
don't
don't
forget
forget
this
this
one.
one
To
to
navigate
navigate
between
between
files,
files
you
you
can
can
simply
simply
start
start
typing
typing
the
the
file
file
name,
name
and
and
it
it
will
will
automatically
automatically
search
search
through
through
your
your
tree
tree
to
to
find
find
the
the
corresponding
corresponding
file.
file
That's
that's
way
way
quicker
quicker
than
than
trying
trying
to
to
navigate
navigate
through
through
a
a
directory
directory
tree
tree
by
by
clicking,
clicking
but
but
sometimes
sometimes
you
you
might
might
wanna
wanna
bookmark
bookmark
specific
specific
lines
lines
of
of
code
code
and
and
navigate
navigate
to
to
them
them
later.
later
For
for
that,
that
I
i
recommend
recommend
using
using
a
a
bookmark
bookmark
plugin,
plugin
which
which
will
will
allow
allow
us
us
to
to
highlight
highlight
a
a
block
block
of
of
code,
code
set
set
a
a
bookmark
bookmark
number
number
for
for
it,
it
and
and
then
then
Easily
easily
navigate
navigate
to
to
it
it
later
later
on
on
using
using
the
the
command
command
palette
palette
in
in
Versus
versus
Code.
code
As
as
you
you
probably
probably
noticed,
noticed
I'm
i'm
here
here
in
in
an
an
Angular
angular
project,
project
so
so
I'm
i'm
going
going
to
to
install
install
some
some
snippets
snippets
to
to
generate
generate
a
a
lot
lot
of
of
the
the
boilerplate
boilerplate
code
code
for
for
me.
me
In
in
Angular,
angular
we
we
have
have
2
2
really
really
good
good
snippet
snippet
libraries,
libraries
one
one
from
from
Mike
mike
Moreland
moreland
and
and
one
one
from
from
John
john
Papa,
papa
and
and
you
you
can
can
use
use
them
them
both
both
together.
together
When
when
you
you
install
install
snippets,
snippets
they're
they're
automatically
automatically
added
added
to
to
the
the
Versus
versus
Code
code
IntelliSense.
intellisense
So
so
say
say
I
i
need
need
to
to
code
code
up
up
something
something
really
really
tedious
tedious
like
like
an
an
NG
ng
switch
switch
statement,
statement
I
i
can
can
simply
simply
start
start
typing
typing
the
the
prefix
prefix
in
in
the
the
snippet
snippet
library,
library
and
and
it
it
will
will
automatically
automatically
generate
generate
this
this
code
code
for
for
me.
me
There's
there's
even
even
snippets
snippets
available
available
for
for
libraries
libraries
like
like
Angular
angular
Material,
material
NGXS,
ngxs
and
and
many
many
others.
others
Number
number
8
8
is
is
Versus
versus
Code's
code's
integrated
integrated
command
command
line
line
terminal.
terminal
You
you
can
can
pull
pull
it
it
up
up
by
by
simply
simply
dragging
dragging
from
from
the
the
bottom
bottom
of
of
the
the
screen
screen
Or
or
you
you
can
can
use
use
the
the
control
control
back
back
tick
tick
key
key
binding.
binding
You
you
can
can
also
also
pull
pull
up
up
the
the
command
command
palette
palette
with
with
control
control
p
p
and
and
open
open
it
it
there.
there
What's
what's
really
really
cool
cool
is
is
that
that
Versus
versus
Code
code
will
will
Automatically
automatically
recognize
recognize
scripts
scripts
that
that
you
you
have
have
set
set
up
up
in
in
your
your
project.
project
In
in
JavaScript,
javascript
you
you
probably
probably
have
have
something
something
set
set
up
up
with
with
NPM
npm
or
or
maybe
maybe
with
with
Grunt
grunt
or
or
Gulp.
gulp
You
you
can
can
simply
simply
type
type
in
in
NPM,
npm
And
and
it
it
will
will
show
show
all
all
of
of
your
your
scripts
scripts
right
right
there
there
automatically
automatically
so
so
you
you
can
can
run
run
them
them
without
without
ever
ever
having
having
to
to
type
type
anything.
anything
With
with
that,
that
we
we
can
can
segue
segue
into
into
the
the
next
next
major
major
feature
feature
which
which
is
is
IntelliSense.
intellisense
IntelliSense
intellisense
is
is
just
just
a
a
fancy
fancy
word
word
for
for
code
code
auto
auto
completion.
completion
And
and
if
if
you
you
use
use
a
a
language
language
that's
that's
strong
strong
typed
typed
like
like
TypeScript,
typescript
you'll
you'll
get
get
incredible
incredible
developer
developer
tooling
tooling
in
in
Versus
versus
Code.
code
You'll
you'll
see
see
this
this
automatically
automatically
as
as
you're
you're
coding,
coding
but
but
you
you
can
can
pull
pull
it
it
up
up
manually
manually
with
with
control
control
space
space
as
as
well.
well
Code
code
completion
completion
is
is
pretty
pretty
self
self
explanatory,
explanatory
but
but
there's
there's
some
some
pretty
pretty
cool
cool
things
things
you
you
can
can
do
do
with
with
it.
it
Let's
let's
say
say
we're
we're
going
going
into
into
a
a
large
large
TypeScript
typescript
file
file
for
for
the
the
first
first
time
time
and
and
we
we
wanna
wanna
see
see
all
all
the
the
methods
methods
and
and
classes
classes
that
that
are
are
defined
defined
in
in
this
this
file.
file
We
we
can
can
go
go
into
into
the
the
command
command
palette,
palette
type
type
in
in
the
the
at
at
symbol,
symbol
And
and
that
that
will
will
give
give
us
us
all
all
of
of
the
the
interfaces,
interfaces
methods,
methods
and
and
properties
properties
defined
defined
in
in
this
this
file.
file
In
in
a
a
strong
strong
type
type
language,
language
another
another
thing
thing
you
you
might
might
wanna
wanna
do
do
is
is
peak
peak
the
the
type
type
definitions
definitions
for
for
a
a
given
given
interface.
interface
It
it
can
can
be
be
really
really
disruptive
disruptive
to
to
have
have
multiple
multiple
files
files
open
open
at
at
once
once
looking
looking
for
for
different
different
type
type
definitions,
definitions
but
but
you
you
can
can
simply
simply
click
click
on
on
an
an
interface
interface
and
and
say
say
peak
peak
definition
definition
And
and
it
it
will
will
find
find
that
that
in
in
your
your
project
project
even
even
if
if
it's
it's
buried
buried
in
in
your
your
node
node
modules
modules
and
and
show
show
you
you
the
the
properties
properties
on
on
that
that
interface.
interface
On
on
the
the
flip
flip
side
side
of
of
this,
this
you
you
be
be
looking
looking
at
at
an
an
interface
interface
and
and
want
want
to
to
know
know
how
how
many
many
references
references
you
you
have
have
to
to
it
it
in
in
a
a
project.
project
If
if
you
you
right
right
click
click
and
and
go
go
to
to
find
find
references,
references
it
it
will
will
show
show
you
you
exactly
exactly
which
which
files
files
are
are
referencing
referencing
this
this
interface
interface
in
in
your
your
project.
project
But
but
let's
let's
say
say
I'm
i'm
working
working
with
with
an
an
interface
interface
and
and
I
i
decide
decide
I
i
don't
don't
like
like
the
the
name
name
of
of
it.
it
I
i
can
can
highlight
highlight
it,
it
Then
then
right
right
click
click
and
and
say
say
rename
rename
symbol
symbol
or
or
just
just
hit
hit
f
f
2
2
and
and
give
give
it
it
a
a
new
new
name.
name
That
that
not
not
only
only
updates
updates
the
the
current
current
file
file
but
but
also
also
every
every
other
other
file
file
in
in
the
the
project
project
with
with
that
that
reference.
reference
And
and
that's
that's
a
a
lot
lot
safer
safer
than
than
using
using
just
just
a
a
regular
regular
find
find
and
and
replace
replace
because
because
it's
it's
looking
looking
at
at
the
the
actual
actual
code
code
reference
reference
and
and
not
not
the
the
text
text
itself,
itself
yet
yet
another
another
good
good
reason
reason
to
to
strong
strong
type
type
your
your
code.
code
Now
now
while
while
we're
we're
on
on
the
the
topic
topic
of
of
types,
types
I
i
want
want
to
to
show
show
you
you
this
this
really
really
cool
cool
extension
extension
called
called
paste
paste
JSON
json
as
as
code.
code
Almost
almost
all
all
apps
apps
make
make
calls
calls
to
to
APIs
apis
that
that
return
return
JSON,
json
But
but
you
you
might
might
not
not
have
have
an
an
easy
easy
way
way
to
to
actually
actually
strong
strong
type
type
this
this
response
response
in
in
your
your
project.
project
I'm
i'm
in
in
the
the
Twitter
twitter
API
api
right
right
now,
now
and
and
I'm
i'm
just
just
going
going
to
to
copy
copy
and
and
paste
paste
this
this
example
example
response
response
in
in
JSON
json
format.
format
I'll
i'll
go
go
ahead
ahead
and
and
paste
paste
the
the
JSON
json
into
into
a
a
tweet
tweet
dot
dot
JSON
json
file
file
and
and
then
then
create
create
a
a
new
new
file
file
called
called
tweet
tweet
dotts.
dotts
Then
then
I
i
can
can
open
open
up
up
the
the
command
command
palette
palette
And
and
just
just
enter
enter
that
that
paste
paste
as
as
JSON
json
command,
command
and
and
we'll
we'll
set
set
the
the
top
top
level
level
interface
interface
name
name
as
as
tweet.
tweet
And
and
then
then
magically,
magically
we
we
get
get
this
this
whole
whole
set
set
of
of
interfaces
interfaces
that
that
model
model
this
this
API
api
response.
response
So
so
that
that
means
means
you
you
can
can
get
get
incredible
incredible
developer
developer
tooling
tooling
for
for
any
any
API
api
that
that
you
you
work
work
with
with
whether
whether
it
it
has
has
types
types
or
or
not.
not
Okay.
okay
I
i
think
think
I've
i've
heard
heard
just
just
about
about
enough
enough
of
of
types.
types
Let's
let's
just
just
chill
chill
out
out
for
for
a
a
second.
second
Hit
hit
control
control
k
k
z
z
to
to
go
go
into
into
Zen
zen
mode.
mode
This
this
will
will
give
give
us
us
a
a
viewport
viewport
with
with
all
all
of
of
the
the
distractions
distractions
removed.
removed
If
if
you
you
don't
don't
care
care
what
what
your
your
Docker
docker
container
container
is
is
doing
doing
or
or
what
what
the
the
Git
git
status
status
is,
is
you
you
can
can
just
just
go
go
into
into
Zen
zen
mode
mode
and
and
focus
focus
on
on
writing
writing
code.
code
While
while
we're
we're
at
at
it,
it
let's
let's
install
install
the
the
Spotify
spotify
extension
extension
for
for
Versus
versus
Code
code
and
and
throw
throw
on
on
some
some
carbon
carbon
based
based
life
life
forms
forms
and
and
just
just
chill
chill
out.
out
But
but
unfortunately,
unfortunately
we
we
relaxed
relaxed
a
a
little
little
too
too
hard
hard
And
and
now
now
our
our
application
application
is
is
broken.
broken
Let's
let's
go
go
into
into
the
the
debugger
debugger
panel
panel
and
and
see
see
how
how
that
that
might
might
be
be
able
able
to
to
help
help
us
us
out.
out
You
you
get
get
to
to
the
the
debugger
debugger
by
by
clicking
clicking
on
on
the
the
bug
bug
icon,
icon
And
and
I
i
have
have
a
a
simple
simple
node
node
script
script
set
set
up
up
here.
here
Node
node
works
works
out
out
of
of
the
the
box,
box
but
but
you
you
can
can
also
also
install
install
extensions
extensions
to
to
support
support
different
different
runtimes.
runtimes
In
in
the
the
script,
script
I
i
have
have
2
2
separate
separate
functions
functions
that
that
are
are
each
each
updating
updating
a
a
global
global
variable
variable
and
and
we'll
we'll
just
just
run
run
these
these
one
one
after
after
the
the
other.
other
I
i
can
can
set
set
up
up
break
break
points
points
in
in
my
my
code
code
by
by
simply
simply
adding
adding
a
a
red
red
dot
dot
in
in
between
between
the
the
line
line
numbers.
numbers
This
this
will
will
stop
stop
the
the
execution
execution
of
of
the
the
script
script
once
once
it
it
hits
hits
this
this
breakpoint,
breakpoint
and
and
then
then
you
you
can
can
inspect
inspect
the
the
local
local
state
state
and
and
the
the
call
call
stack
stack
and
and
things
things
like
like
that.
that
All
all
I
i
have
have
to
to
do
do
is
is
click
click
the
the
play
play
button,
button
and
and
it
it
will
will
automatically
automatically
attach
attach
the
the
debugger
debugger
to
to
this
this
process.
process
You
you
can
can
see
see
here
here
it
it
shows
shows
all
all
of
of
the
the
local
local
variables
variables
as
as
well
well
as
as
all
all
of
of
our
our
global
global
variables
variables
in
in
node.
node
You
you
can
can
also
also
go
go
down
down
to
to
the
the
debugger
debugger
console
console
and
and
start
start
executing
executing
commands
commands
within
within
the
the
context
context
of
of
the
the
script,
script
and
and
we'll
we'll
have
have
access
access
to
to
its
its
current
current
state.
state
So
so
if
if
we
we
want
want
to
to
inspect
inspect
the
the
name
name
of
of
a
a
variable,
variable
we
we
just
just
type
type
it
it
down
down
here
here
in
in
the
the
command
command
line
line
and
and
it
it
will
will
print
print
that
that
out
out
in
in
the
the
console.
console
Debugging
debugging
Node
node
is
is
great,
great
but
but
generally,
generally
my
my
front
front
end
end
apps
apps
are
are
a
a
lot
lot
more
more
complex
complex
than
than
my
my
back
back
end
end
apps.
apps
I'd
i'd
like
like
to
to
debug
debug
my
my
Angular
angular
applications
applications
in
in
the
the
context
context
of
of
the
the
Chrome
chrome
browser.
browser
After
after
installing
installing
the
the
Chrome
chrome
extension,
extension
we
we
can
can
go
go
back
back
to
to
the
the
debugger
debugger
and
and
click
click
the
the
play
play
button,
button
but
but
this
this
time
time
use
use
Chrome.
chrome
Then
then
we
we
can
can
set
set
up
up
a
a
launch
launch
configuration
configuration
for
for
this
this
specific
specific
app,
app
which
which
in
in
Angular's
angular's
case,
case
it'll
it'll
be
be
served
served
on
on
local
local
host
host
42100.
42100
Then
then
we
we
can
can
go
go
into
into
one
one
of
of
our
our
component
component
files
files
and
and
set
set
up
up
some
some
break
break
points
points
It's
it's
where
where
we
we
want
want
to
to
have
have
the
the
debugger
debugger
run-in
run-in
the
the
browser.
browser
I'll
i'll
set
set
up
up
one
one
breakpoint
breakpoint
before
before
the
the
components
components
actually
actually
initialized
initialized
and
and
then
then
another
another
one
one
that
that
will
will
run
run
on
on
a
a
button
button
click.
click
Then
then
you
you
can
can
see
see
if
if
we
we
click
click
play,
play
it
it
will
will
launch
launch
Chrome
chrome
and
and
have
have
our
our
debugger
debugger
running
running
here
here
which
which
we
we
can
can
control
control
from
from
Versus
versus
Code.
code
When
when
we
we
click
click
play
play
again,
again
it
it
will
will
define
define
the
the
title
title
And
and
we
we
can
can
actually
actually
highlight
highlight
over
over
properties
properties
in
in
the
the
code
code
and
and
it
it
will
will
tell
tell
us
us
the
the
state
state
of
of
the
the
data.
data
Managing
managing
state
state
in
in
a
a
web
web
application
application
is
is
one
one
of
of
the
the
biggest
biggest
Challenges,
challenges
and
and
this
this
debugger
debugger
can
can
really
really
help
help
you
you
do
do
that
that
more
more
effectively.
effectively
Another
another
huge
huge
way
way
that
that
Versus
versus
Code
code
helps
helps
you
you
out
out
is
is
with
with
your
your
git
git
version
version
control.
control
Dealing
dealing
with
with
git
git
in
in
a
a
large
large
project
project
gets
gets
pretty
pretty
hard
hard
to
to
do
do
from
from
the
the
command
command
line.
line
You
you
might
might
have
have
already
already
noticed
noticed
that
that
Versus
versus
Code
code
automatically
automatically
highlights
highlights
all
all
of
of
your
your
files.
files
Untracked
untracked
or
or
new
new
files
files
are
are
green,
green
modified
modified
files
files
are
are
yellow,
yellow
and
and
files
files
with
with
wintein
wintein
errors
errors
are
are
red.
red
If
if
we
we
want
want
to
to
commit
commit
some
some
changes,
changes
we
we
can
can
just
just
go
go
into
into
the
the
git
git
add
add
our
our
commit
commit
message,
message
and
and
we're
we're
done.
done
We
we
don't
don't
have
have
to
to
do
do
any
any
git
git
add
add
or
or
git
git
flag
flag
message
message
from
from
the
the
command
command
line.
line
But
but
what
what
if
if
we
we
actually
actually
didn't
didn't
mean
mean
to
to
commit
commit
that
that
code?
code
Well,
well
we
we
can
can
come
come
here
here
to
to
the
the
options
options
menu
menu
and
and
just
just
roll
roll
back
back
that
that
commit.
commit
And
and
you
you
can
can
run
run
pretty
pretty
much
much
every
every
other
other
Git
git
command
command
from
from
this
this
menu
menu
as
as
well.
well
If
if
we
we
want
want
to
to
revert
revert
some
some
changes
changes
on
on
a
a
specific
specific
file,
file
we
we
can
can
simply
simply
do
do
that
that
by
by
clicking
clicking
this
this
revert
revert
button,
button
and
and
that
that
will
will
discard
discard
all
all
of
of
the
the
changes
changes
that
that
we
we
made.
made
Or
or
if
if
we
we
just
just
want
want
to
to
commit
commit
a
a
couple
couple
files
files
individually,
individually
we
we
can
can
click
click
the
the
plus
plus
button
button
and
and
that
that
will
will
only
only
stage
stage
those
those
files
files
for
for
your
your
next
next
commit.
commit
So
so
that's
that's
super
super
powerful
powerful
on
on
its
its
own,
own
but
but
I
i
wanna
wanna
know
know
about
about
the
the
git
git
status
status
pretty
pretty
much
much
everywhere
everywhere
in
in
my
my
code.
code
I
i
wanna
wanna
know
know
who
who
changed
changed
what
what
and
and
when
when
it
it
was
was
changed
changed
Because
because
I'm
i'm
working
working
with
with
a
a
team
team
of
of
junior
junior
developers
developers
and
and
they
they
keep
keep
screwing
screwing
things
things
up,
up
we
we
can
can
install
install
GitLens
gitlens
from
from
the
the
extensions
extensions
page.
page
And
and
then
then
if
if
we
we
go
go
back
back
to
to
the
the
Git
git
tab,
tab
you'll
you'll
see
see
that
that
we
we
have
have
an
an
additional
additional
panel
panel
Here
here
with
with
all
all
of
of
the
the
GitLens
gitlens
data.
data
It
it
makes
makes
it
it
a
a
lot
lot
easier
easier
to
to
traverse
traverse
the
the
Git
git
tree
tree
and
and
also
also
deal
deal
with
with
things
things
like
like
stashes
stashes
and
and
tags
tags
and
and
also
also
your
your
remote
remote
repositories.
repositories
But
but
it
it
doesn't
doesn't
just
just
stop
stop
at
at
the
the
Git
git
panel.
panel
It
it
actually
actually
annotates
annotates
all
all
of
of
your
your
code
code
with
with
information
information
about
about
Git.
git
If
if
we
we
go
go
into
into
a
a
file
file
and
and
just
just
hover
hover
over
over
a
a
piece
piece
of
of
code,
code
it
it
will
will
tell
tell
us
us
exactly
exactly
who
who
wrote
wrote
that
that
code,
code
when
when
they
they
wrote
wrote
it,
it
and
and
its
its
commit
commit
ID.
id
This
this
brings
brings
us
us
to
to
Versus
versus
Code
code
Live
live
Share,
share
which
which
is
is
a
a
brand
brand
new
new
feature
feature
in
in
the
the
editor.
editor
It
it
allows
allows
you
you
to
to
connect
connect
your
your
GitHub
github
or
or
Azure
azure
account
account
to
to
Versus
versus
Code
code
and
and
then
then
collaborate
collaborate
with
with
multiple
multiple
team
team
members
members
on
on
a
a
single
single
document
document
in
in
real
real
time.
time
It's
it's
kind
kind
of
of
like
like
the
the
Google
google
Docs
docs
of
of
writing
writing
code.
code
I've
i've
been
been
able
able
to
to
use
use
this
this
with
with
some
some
Angular
angular
Firebase
firebase
Pro
pro
members
members
to
to
collaborate
collaborate
on
on
issues,
issues
and
and
it's
it's
been
been
super
super
useful.
useful
You
you
can
can
install
install
the
the
extension,
extension
and
and
you'll
you'll
need
need
to
to
connect
connect
a
a
GitHub
github
account
account
or
or
a
a
Microsoft
microsoft
account.
account
After
after
that,
that
it's
it's
just
just
a
a
matter
matter
of
of
clicking
clicking
share,
share
and
and
Versus
versus
Code
code
will
will
return
return
a
a
link
link
that
that
you
you
can
can
pass
pass
along
along
to
to
other
other
team
team
members.
members
I
i
probably
probably
could
could
have
have
covered
covered
about
about
90
90
other
other
topics
topics
in
in
this
this
video,
video
but
but
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
it
it
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you're
you're
serious
serious
about
about
building
building
apps,
apps
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
We
we
can
can
write
write
code
code
together
together
using
using
Versus
versus
Code
code
Live
live
Share
share
and
and
work
work
on
on
strategies
strategies
to
to
get
get
your
your
app
app
built
built
and
and
shipped
shipped
as
as
soon
soon
as
as
possible.
possible
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
talk
talk
to
to
you
you
soon.
soon
success
In this video, the speakers discuss the benefits of Versus Code for coding, including its minimal and powerful code, speedy file navigation, and integrated command line terminal. They also show a demonstration of how to use the command line terminal and paste a JSON file to access a tweet file. The IntelliSense feature allows for code auto completion and peak definition of types in a file, and the speaker emphasizes the importance of strong typing in coding. The speakers also discuss installing the Spotify extension and running code, managing state in a web app, and using the app in version control and editing code. They end with a recommendation for becoming a pro member at angular pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat...
VS Code Top-Ten Pro Tips
In just 3 years, Visual Studio Code has gone from being non existent to the single most popular code editor among all developers, according to the Stack flow 2018 survey. I personally like it because it's minimal yet super powerful and free and open source. In this episode, I'll show you exactly what I mean by taking you through my top ten pro tips for using Versus Code effectively. If you're new here, hit subscribe and you'll find a full write up on angular fire .com. The first thing you should know is how to get around the file system quickly. You can open up Versus Code by running code from the command line with the directory that you want to open. The quickest way to move around is to memorize a few hot keys or key bindings. If you hit control k, It'll bring up a full list of key bindings that you can search through and customize as needed, but the single most important one is control p which brings up the command palette. We'll be using the command palette lot in this video, so don't forget this one. To navigate between files, you can simply start typing the file name, and it will automatically search through your tree to find the corresponding file. That's way quicker than trying to navigate through a directory tree by clicking, but sometimes you might wanna bookmark specific lines of code and navigate to them later. For that, I recommend using a bookmark plugin, which will allow us to highlight a block of code, set a bookmark number for it, and then Easily navigate to it later on using the command palette in Versus Code. As you probably noticed, I'm here in an Angular project, so I'm going to install some snippets to generate a lot of the boilerplate code for me. In Angular, we have 2 really good snippet libraries, one from Mike Moreland and one from John Papa, and you can use them both together. When you install snippets, they're automatically added to the Versus Code IntelliSense. So say I need to code up something really tedious like an NG switch statement, I can simply start typing the prefix in the snippet library, and it will automatically generate this code for me. There's even snippets available for libraries like Angular Material, NGXS, and many others. Number 8 is Versus Code's integrated command line terminal. You can pull it up by simply dragging from the bottom of the screen Or you can use the control back tick key binding. You can also pull up the command palette with control p and open it there. What's really cool is that Versus Code will Automatically recognize scripts that you have set up in your project. In JavaScript, you probably have something set up with NPM or maybe with Grunt or Gulp. You can simply type in NPM, And it will show all of your scripts right there automatically so you can run them without ever having to type anything. With that, we can segue into the next major feature which is IntelliSense. IntelliSense is just a fancy word for code auto completion. And if you use a language that's strong typed like TypeScript, you'll get incredible developer tooling in Versus Code. You'll see this automatically as you're coding, but you can pull it up manually with control space as well. Code completion is pretty self explanatory, but there's some pretty cool things you can do with it. Let's say we're going into a large TypeScript file for the first time and we wanna see all the methods and classes that are defined in this file. We can go into the command palette, type in the at symbol, And that will give us all of the interfaces, methods, and properties defined in this file. In a strong type language, another thing you might wanna do is peak the type definitions for a given interface. It can be really disruptive to have multiple files open at once looking for different type definitions, but you can simply click on an interface and say peak definition And it will find that in your project even if it's buried in your node modules and show you the properties on that interface. On the flip side of this, you be looking at an interface and want to know how many references you have to it in a project. If you right click and go to find references, it will show you exactly which files are referencing this interface in your project. But let's say I'm working with an interface and I decide I don't like the name of it. I can highlight it, Then right click and say rename symbol or just hit f 2 and give it a new name. That not only updates the current file but also every other file in the project with that reference. And that's a lot safer than using just a regular find and replace because it's looking at the actual code reference and not the text itself, yet another good reason to strong type your code. Now while we're on the topic of types, I want to show you this really cool extension called paste JSON as code. Almost all apps make calls to APIs that return JSON, But you might not have an easy way to actually strong type this response in your project. I'm in the Twitter API right now, and I'm just going to copy and paste this example response in JSON format. I'll go ahead and paste the JSON into a tweet dot JSON file and then create a new file called tweet dotts. Then I can open up the command palette And just enter that paste as JSON command, and we'll set the top level interface name as tweet. And then magically, we get this whole set of interfaces that model this API response. So that means you can get incredible developer tooling for any API that you work with whether it has types or not. Okay. I think I've heard just about enough of types. Let's just chill out for a second. Hit control k z to go into Zen mode. This will give us a viewport with all of the distractions removed. If you don't care what your Docker container is doing or what the Git status is, you can just go into Zen mode and focus on writing code. While we're at it, let's install the Spotify extension for Versus Code and throw on some carbon based life forms and just chill out. But unfortunately, we relaxed a little too hard And now our application is broken. Let's go into the debugger panel and see how that might be able to help us out. You get to the debugger by clicking on the bug icon, And I have a simple node script set up here. Node works out of the box, but you can also install extensions to support different runtimes. In the script, I have 2 separate functions that are each updating a global variable and we'll just run these one after the other. I can set up break points in my code by simply adding a red dot in between the line numbers. This will stop the execution of the script once it hits this breakpoint, and then you can inspect the local state and the call stack and things like that. All I have to do is click the play button, and it will automatically attach the debugger to this process. You can see here it shows all of the local variables as well as all of our global variables in node. You can also go down to the debugger console and start executing commands within the context of the script, and we'll have access to its current state. So if we want to inspect the name of a variable, we just type it down here in the command line and it will print that out in the console. Debugging Node is great, but generally, my front end apps are a lot more complex than my back end apps. I'd like to debug my Angular applications in the context of the Chrome browser. After installing the Chrome extension, we can go back to the debugger and click the play button, but this time use Chrome. Then we can set up a launch configuration for this specific app, which in Angular's case, it'll be served on local host 42100. Then we can go into one of our component files and set up some break points It's where we want to have the debugger run-in the browser. I'll set up one breakpoint before the components actually initialized and then another one that will run on a button click. Then you can see if we click play, it will launch Chrome and have our debugger running here which we can control from Versus Code. When we click play again, it will define the title And we can actually highlight over properties in the code and it will tell us the state of the data. Managing state in a web application is one of the biggest Challenges, and this debugger can really help you do that more effectively. Another huge way that Versus Code helps you out is with your git version control. Dealing with git in a large project gets pretty hard to do from the command line. You might have already noticed that Versus Code automatically highlights all of your files. Untracked or new files are green, modified files are yellow, and files with wintein errors are red. If we want to commit some changes, we can just go into the git add our commit message, and we're done. We don't have to do any git add or git flag message from the command line. But what if we actually didn't mean to commit that code? Well, we can come here to the options menu and just roll back that commit. And you can run pretty much every other Git command from this menu as well. If we want to revert some changes on a specific file, we can simply do that by clicking this revert button, and that will discard all of the changes that we made. Or if we just want to commit a couple files individually, we can click the plus button and that will only stage those files for your next commit. So that's super powerful on its own, but I wanna know about the git status pretty much everywhere in my code. I wanna know who changed what and when it was changed Because I'm working with a team of junior developers and they keep screwing things up, we can install GitLens from the extensions page. And then if we go back to the Git tab, you'll see that we have an additional panel Here with all of the GitLens data. It makes it a lot easier to traverse the Git tree and also deal with things like stashes and tags and also your remote repositories. But it doesn't just stop at the Git panel. It actually annotates all of your code with information about Git. If we go into a file and just hover over a piece of code, it will tell us exactly who wrote that code, when they wrote it, and its commit ID. This brings us to Versus Code Live Share, which is a brand new feature in the editor. It allows you to connect your GitHub or Azure account to Versus Code and then collaborate with multiple team members on a single document in real time. It's kind of like the Google Docs of writing code. I've been able to use this with some Angular Firebase Pro members to collaborate on issues, and it's been super useful. You can install the extension, and you'll need to connect a GitHub account or a Microsoft account. After that, it's just a matter of clicking share, and Versus Code will return a link that you can pass along to other team members. I probably could have covered about 90 other topics in this video, but I'm gonna go ahead and wrap things up there. If it helped you, please like and subscribe. And if you're serious about building apps, consider becoming a pro member at angularfirebase.com. We can write code together using Versus Code Live Share and work on strategies to get your app built and shipped as soon as possible. Thanks for watching, and I'll talk to you soon.
In this video, the speakers discuss the benefits of Versus Code for coding, including its minimal and powerful code, speedy file navigation, and integrated command line terminal. They also show a demonstration of how to use the command line terminal and paste a JSON file to access a tweet file. The IntelliSense feature allows for code auto completion and peak definition of types in a file, and the speaker emphasizes the importance of strong typing in coding. The speakers also discuss installing the Spotify extension and running code, managing state in a web app, and using the app in version control and editing code. They end with a recommendation for becoming a pro member at angular pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat... pat...