Learn 25 VS Code tips and tricks that will help you write code faster. Try out awesome new features and extensions that turn your editor into a full-blown IDE. https://fireship.io/pro

#vscode #learntocode #programming

Support me for $1 on github https://github.com/sponsors/codediodeio

🔗 Resources

VS Code https://code.visualstudio.com/
Remote Repositories https://code.visualstudio.com/blogs/2021/06/10/remote-repositories
vim Tutorial https://youtu.be/-txKSRn0qeA

📚 Chapters

00:00 Intro
00:35 1. VS Code CLI
01:03 2. Release the Mouse
01:45 3. Command Palette Ctrl+P
02:10 4. Run Commands
02:25 5. Quokka
02:43 6. Find Symbols with @
03:14 7. Find symbols with #
03:36 8. Move Around Quickly
04:07 9. Multiline Editing
04:23 10. Auto Rename Tag
04:47 11. Delete or move a line
05:16 12. Highlight & Comment Lines
05:39 13. JS Doc Extension
06:07 14. Better Comments
06:20 15. Integrated Terminal
07:14 16. Tasks
07:38 17. Git Source Control
08:26 18. Git Lens Extension
08:40 19. Remote Repositories
09:14 20. Remote SSH & Containers
09:31 21. Custom Snippets
10:01 22. Community Snippets
10:13 23. Auto-create directories
10:29 24. Paste as JSON
10:50 25. Rename Symbol


 🤓 Install the quiz app

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

🔥 Watch more with Fireship PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T05:51:06.305Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
ab629750-b82a-47a0-9263-ac0a7e9c6ad9
96adbddb0376c60f82489ea8bcc1e7a611073cc9981fc0c63583612efda5c354
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Visual Studio Code is like a knife.
It's only as good as the hands that wield it, but unfortunately, it has more knobs than a fighter jet and requires the steady hand of a surgeon.
To the untrained eye, Versus Code is just a simple text editor, like Microsoft Word with code highlighting.
But in reality, it contains a ton of productivity boosting features that you're probably not using it.
In today's video, we'll compare amateur Versus Code techniques to the ones used by professionals, allowing you to write and analyze your code it faster.
Because the most valuable thing you own in this world is your time.
If you're new here, like and subscribe, then leave your best Versus Code pro tip in the comments.
I'll choose one of them to win this free t a shirt next week.
And now, let's jump right into things by installing Versus Code.
Once installed, you'll want to open up a directory with some files in it.
Maybe you just generated a new Astro project from the command line.
Then to open it in your editor, you pull up the file explorer and click Open with Versus Code.
That works, but it would have been much quicker had you done it from the command line.
If you're in the terminal and want to open a directory or edit a file, you can do that quickly with the vscode CLI using the code command.
But keep in mind, it.
And if you're on Mac or Linux, you need to first add the binary to your path.
Now that we have the editor opened, it's tempting to go around 2 different windows with the mouse, and click on buttons to run commands, just like we would with any other software.
But here's a little productivity secret.
The less you rely on the mouse, the better.
A Versus Code allows you to use the mouse for everything, making the tool approachable, but that's rarely the most efficient way to get things done.
You don't have to go crazy and learn something like Vim or Emax.
But it's important to understand that anything you do with your mouse can likely be done quicker with the keyboard.
Virtually every command you see in the Versus Code window can be done with a keyboard shortcut.
You don't need to memorize them all, but knowing about 10 to 20 will literally change your life.
Letting go of the mouse may not feel natural at first, but mastering the keyboard It is a lot like learning to play an instrument.
It takes a lot of practice, but eventually it becomes second nature.
The first shortcut you'll want to memorize is control papa, which brings up the command palette.
The beauty the command palette is that it gives you all the power of Versus Code from the keyboard without having to memorize a bunch of key bindings.
By default, it will give you a list of recently opened files.
In addition, you can start typing a file name to find it in your project.
And that's obviously much quicker than trying to find a file by clicking through a bunch of directories in the file explorer.
But the command palette can do a lot more.
If you a type of right angle bracket.
It will give you access to virtually any command that you can run-in Versus Code along with the commands for the extensions that you use.
For example, you may want to toggle the mini map.
A or one thing that you'll notice in some of my videos is that I execute JavaScript directly in the file itself, and that's made possible by an extension called Quoca, which is a tool that I can start and a stop in any file via the command palette.
The extension itself is really cool.
It automatically runs your JavaScript code in the background, then appends the output directly a play in your editor, which can facilitate rapid prototyping when your goal is to just write some plain JavaScript code.
Now, another really awesome thing we can do here is find pieces of code or symbols throughout our project.
When working in a really big file, it's easy to get lost.
The worst thing you can do is scroll around the page looking for for the function or interface that you need.
You could do control foxtrot to find that text on the page, but an even better approach is to use the at symbol from the command palette.
That'll list out every symbol in the code so you can quickly navigate to it.
And if you want, you can bypass the command palette altogether by entering control shift period to do the same thing directly in the file itself.
Now, in other cases, you may want to find a symbol throughout the entire project, including all of your dependencies like node modules.
Use the hashtag followed by the name of the symbol you're looking for to find that interface in your own code or your dependencies code.
Another really awesome bonus tip here a is that if you have a really long class name, you don't even have to type the whole thing out.
Just the first character in each camel cased word and it will work just as well.
A The command palette is awesome, but it doesn't really help you write your code faster.
When you see a line of code that you want to edit, the natural approach is to take the mouse and then highlight that a line.
A developer might do this 100, if not 1000 of times per day.
A faster way to get to where you need to go is to hit control golf, followed by the line number that you want to focus on.
A from there, use the arrow keys to go character by character and hold down the shift key if you want to highlight something, or use control arrow to move word by word.
A When your cursor lands on a word that you want to edit, hit ctrl delta to highlight it, so you can then delete it or replace it.
But here's where things get really mind blowing.
A If those characters appear multiple times in the code and you want to edit them all at the same time, just hit ctrl d again and again, and you're now a three x a developer editing 3 lines of code at the same time.
In some cases, you may want to use the mouse for multiline editing.
Holding down alt while you click on different parts of the editor, will set up cursors in multiple places.
That can be really useful for writing repetitive CSS properties.
One place you might use this often is with opening and closing HTML tags.
But you can actually make your life even easier by installing the auto rename tag extension.
A this will automatically rename the closing tag when you edit the opening tag, and it can work in other languages beyond just HTML.
Now in other cases, you may just want to delete or move a line.
The amateur approach is to highlight that line, do a right click with the mouse and find cut, then do another right click with the mouse and find paste.
Here's the faster approach.
If your cursor is already on a line, a all you have to do is hit control x to cut it.
No highlighting is necessary.
But if your goal is to move the line somewhere else, then there's an even better approach.
A switch.
Use alt followed by the up or down arrows to move the line somewhere else quickly.
And if you want to copy that line as you move it, use alt shift followed by the arrows.
A now one other thing that you likely often do in your code is comment it out to disable it.
The worst possible thing you can do is go line by line adding the comment syntax to each line.
If this is how you currently do comments, you'll want to pay attention to this next shortcut.
1st, highlight the code using your mouse or by using that control l command to highlight line by line.
A once highlighted, use control forward slash to toggle comments on that code.
Now when speaking of code comments, it's often important to format them properly.
In JavaScript, that typically means following the JSDoc standard.
And there's an extension called addjs.comments.
Once installed, it allows us to highlight a function, then use the command palette to add a a comment to it automatically.
Bonus tip.
In your j s dot comments, you can use the link tag to link to other symbols in your source code.
When you hover over that symbol, it will give you the comment.
Then if you click the link, it will take you to that part of the code automatically.
That makes writing comments much easier, but what if we could also make them easier to read?
A by also installing the better comments extension, we'll get automatic highlighting in our comment text.
Any line that starts with a bang is now red and all of our to dos are highlighted orange.
A but now let's switch gears into a very important topic, the terminal.
You can open a new terminal session directly in Versus Code in your current working directory using control backtick.
When a when you start a new terminal, it uses your default shell, which in my case is bash.
If you click the carrot, you can use a different shell if needed like PowerShell or WSL.
A What often happens though is you need multiple terminal sessions running at the same time, like one for your test runner, one for your dev server, and so on.
To keep things organized, click on the icon, a then change the name or the color of that session, and now you don't have to fumble between different terminals to figure out what each one is doing.
It.
Now, when you type out an actual command in the terminal and you screw it up, you can use control arrows to quickly navigate to a different part of the actual text a because your mouse won't even work here.
But if you already hit enter and got an error message, you can use control k to clear out the terminal, then use the up arrow to go to the last command in your history and just rerun it instantly.
But what if there is a way where you didn't have to write the same terminal command over and over again?
A like how many times have you written npm run build or npm run test?
To simplify things, you can create a Versus Code task, a, which is just a JSON configuration that contains a command that you want to run-in the terminal.
Now, instead of pulling up the terminal and writing out a command, you can just use the command palette to run it automatically and it will show the name of that task in the terminal sidebar here.
Speaking of the terminal, one one of the most common things you'll do here is execute commands for version control using git.
Not only are git commands hard to remember, but it can be very dangerous and painful when you mess them up.
The standard procedure for git fuckups is to go to Stack Overflow and look at the top questions there because they're almost all related to git.
The funny thing though is that I think this is an area where it actually makes more sense to use your mouse as opposed to the keyboard.
In the source control tab in Versus Code, we get a breakdown of all the changes in our current working directory.
A we can just point and click at files that we want to stage, and also notice the icon next to each file, which will tell us if that file has been modified, added, or removed.
A Now from the drop down menu, we get a list of all the possible git commands.
Most often, we're just committing files, but vscode will give us a breakdown of all the possible commands without having to look them up in the documentation.
If you're working on a big complex project with other developers, I'd highly recommend installing the GitLens extension.
It.
It provides a bunch of extra ways to visualize and explore your code, and most importantly, it will tell you exactly who to blame when your code stops working.
It.
It's a really great extension, but now we're going to look at another extension that's brand new and even crazier.
Normally, when you want to work with a git repo on GitHub, you need to clone it to your local a system.
But now, thanks to the monopoly that Microsoft has on the developer ecosystem, this process can now be streamlined with remote repositories.
Install the extension, then click on this icon in in the bottom left corner to open up a remote repository.
It'll have you log in with your GitHub account, then you can start contributing to any repo on GitHub without needing to worry about complex git commands.
You can create a new branch, edit some code, and then submit a pull request without ever having to leave Versus Code.
A in addition to remote repositories, you should also know about remote SSH to connect to a remote server and also remote containers a to use a Docker container as your development environment instead of your local system.
These extensions are managed by Microsoft and can turn your basic text editor into a full a blown integrated development environment.
But, let's get back to our actual code.
In many projects, you may find yourself writing the same boilerplate code over and over again.
A If you find yourself doing that, an easy way to improve your productivity is to create a custom snippet.
From the command palette, run the configure user snippets command.
You can create global snippets a fuse across all of your projects or scope them to an individual workspace.
Basically, you just modify this JSON file with the code that you want to insert, a then when you go back to your main project, you can use the insert snippet command to quickly add your own custom boilerplate.
But if you work with a popular framework, a there's a good chance that somebody already did this work for you.
Before you go building your own, check out the extensions panel to see if there are any prebuilt snippets out there that already meet your needs.
A Oh, and here's a cool random thing.
If you need to create a new file in the file explorer, but it lives in a directory that doesn't exist yet, you can create that file along with any nested directories on top of it automatically by just putting a slash in front of the file name.
And Versus Code will automatically create those directories.
Now, yet another awesome tool that I want to mention is the paste JSON as code extension.
If you work with TypeScript, one extremely tedious thing you might have to do is take a JSON object a, and convert it to a bunch of types to represent some kind of schema.
This extension will take your JSON and automatically infer types using a tool called QuickType.
A and, in some cases, that can save you hours of work.
But, the final thing I wanna leave you with is a quote you've probably heard before.
There are only 2 hard things in computer science, cache invalidation and naming things.
Naming your code is hard, which means that you'll often be renaming things.
When you name something poorly, your first idea might be to do a find and replace across your whole project.
A but that can be kind of dangerous.
A better idea is to find the thing you want to rename.
Then if you right click it, you can find all of its references or implementations.
Then From there, you can use the rename symbol option to safely rename it across all of your files.
I'm gonna go ahead and wrap things up there, but make sure to share your its own BSco pro tips in the comments.
And if you wanna support my work, consider sponsoring me on GitHub or becoming a pro member at FireShip IO.
Thanks for watching, and I will see you in the next one.
A

Speaker 0: Visual Studio Code is like a knife. It's only as good as the hands that wield it, but unfortunately, it has more knobs than a fighter jet and requires the steady hand of a surgeon. To the untrained eye, Versus Code is just a simple text editor, like Microsoft Word with code highlighting. But in reality, it contains a ton of productivity boosting features that you're probably not using it. In today's video, we'll compare amateur Versus Code techniques to the ones used by professionals, allowing you to write and analyze your code it faster.

Because the most valuable thing you own in this world is your time. If you're new here, like and subscribe, then leave your best Versus Code pro tip in the comments. I'll choose one of them to win this free t a shirt next week. And now, let's jump right into things by installing Versus Code. Once installed, you'll want to open up a directory with some files in it.

Maybe you just generated a new Astro project from the command line. Then to open it in your editor, you pull up the file explorer and click Open with Versus Code. That works, but it would have been much quicker had you done it from the command line. If you're in the terminal and want to open a directory or edit a file, you can do that quickly with the vscode CLI using the code command. But keep in mind, it.

And if you're on Mac or Linux, you need to first add the binary to your path. Now that we have the editor opened, it's tempting to go around 2 different windows with the mouse, and click on buttons to run commands, just like we would with any other software. But here's a little productivity secret. The less you rely on the mouse, the better. A Versus Code allows you to use the mouse for everything, making the tool approachable, but that's rarely the most efficient way to get things done.

You don't have to go crazy and learn something like Vim or Emax. But it's important to understand that anything you do with your mouse can likely be done quicker with the keyboard. Virtually every command you see in the Versus Code window can be done with a keyboard shortcut. You don't need to memorize them all, but knowing about 10 to 20 will literally change your life. Letting go of the mouse may not feel natural at first, but mastering the keyboard It is a lot like learning to play an instrument.

It takes a lot of practice, but eventually it becomes second nature. The first shortcut you'll want to memorize is control papa, which brings up the command palette. The beauty the command palette is that it gives you all the power of Versus Code from the keyboard without having to memorize a bunch of key bindings. By default, it will give you a list of recently opened files. In addition, you can start typing a file name to find it in your project.

And that's obviously much quicker than trying to find a file by clicking through a bunch of directories in the file explorer. But the command palette can do a lot more. If you a type of right angle bracket. It will give you access to virtually any command that you can run-in Versus Code along with the commands for the extensions that you use. For example, you may want to toggle the mini map.

A or one thing that you'll notice in some of my videos is that I execute JavaScript directly in the file itself, and that's made possible by an extension called Quoca, which is a tool that I can start and a stop in any file via the command palette. The extension itself is really cool. It automatically runs your JavaScript code in the background, then appends the output directly a play in your editor, which can facilitate rapid prototyping when your goal is to just write some plain JavaScript code. Now, another really awesome thing we can do here is find pieces of code or symbols throughout our project. When working in a really big file, it's easy to get lost.

The worst thing you can do is scroll around the page looking for for the function or interface that you need. You could do control foxtrot to find that text on the page, but an even better approach is to use the at symbol from the command palette. That'll list out every symbol in the code so you can quickly navigate to it. And if you want, you can bypass the command palette altogether by entering control shift period to do the same thing directly in the file itself. Now, in other cases, you may want to find a symbol throughout the entire project, including all of your dependencies like node modules.

Use the hashtag followed by the name of the symbol you're looking for to find that interface in your own code or your dependencies code. Another really awesome bonus tip here a is that if you have a really long class name, you don't even have to type the whole thing out. Just the first character in each camel cased word and it will work just as well. A The command palette is awesome, but it doesn't really help you write your code faster. When you see a line of code that you want to edit, the natural approach is to take the mouse and then highlight that a line.

A developer might do this 100, if not 1000 of times per day. A faster way to get to where you need to go is to hit control golf, followed by the line number that you want to focus on. A from there, use the arrow keys to go character by character and hold down the shift key if you want to highlight something, or use control arrow to move word by word. A When your cursor lands on a word that you want to edit, hit ctrl delta to highlight it, so you can then delete it or replace it. But here's where things get really mind blowing.

A If those characters appear multiple times in the code and you want to edit them all at the same time, just hit ctrl d again and again, and you're now a three x a developer editing 3 lines of code at the same time. In some cases, you may want to use the mouse for multiline editing. Holding down alt while you click on different parts of the editor, will set up cursors in multiple places. That can be really useful for writing repetitive CSS properties. One place you might use this often is with opening and closing HTML tags.

But you can actually make your life even easier by installing the auto rename tag extension. A this will automatically rename the closing tag when you edit the opening tag, and it can work in other languages beyond just HTML. Now in other cases, you may just want to delete or move a line. The amateur approach is to highlight that line, do a right click with the mouse and find cut, then do another right click with the mouse and find paste. Here's the faster approach.

If your cursor is already on a line, a all you have to do is hit control x to cut it. No highlighting is necessary. But if your goal is to move the line somewhere else, then there's an even better approach. A switch. Use alt followed by the up or down arrows to move the line somewhere else quickly.

And if you want to copy that line as you move it, use alt shift followed by the arrows. A now one other thing that you likely often do in your code is comment it out to disable it. The worst possible thing you can do is go line by line adding the comment syntax to each line. If this is how you currently do comments, you'll want to pay attention to this next shortcut. 1st, highlight the code using your mouse or by using that control l command to highlight line by line.

A once highlighted, use control forward slash to toggle comments on that code. Now when speaking of code comments, it's often important to format them properly. In JavaScript, that typically means following the JSDoc standard. And there's an extension called addjs.comments. Once installed, it allows us to highlight a function, then use the command palette to add a a comment to it automatically.

Bonus tip. In your j s dot comments, you can use the link tag to link to other symbols in your source code. When you hover over that symbol, it will give you the comment. Then if you click the link, it will take you to that part of the code automatically. That makes writing comments much easier, but what if we could also make them easier to read?

A by also installing the better comments extension, we'll get automatic highlighting in our comment text. Any line that starts with a bang is now red and all of our to dos are highlighted orange. A but now let's switch gears into a very important topic, the terminal. You can open a new terminal session directly in Versus Code in your current working directory using control backtick. When a when you start a new terminal, it uses your default shell, which in my case is bash.

If you click the carrot, you can use a different shell if needed like PowerShell or WSL. A What often happens though is you need multiple terminal sessions running at the same time, like one for your test runner, one for your dev server, and so on. To keep things organized, click on the icon, a then change the name or the color of that session, and now you don't have to fumble between different terminals to figure out what each one is doing. It. Now, when you type out an actual command in the terminal and you screw it up, you can use control arrows to quickly navigate to a different part of the actual text a because your mouse won't even work here.

But if you already hit enter and got an error message, you can use control k to clear out the terminal, then use the up arrow to go to the last command in your history and just rerun it instantly. But what if there is a way where you didn't have to write the same terminal command over and over again? A like how many times have you written npm run build or npm run test? To simplify things, you can create a Versus Code task, a, which is just a JSON configuration that contains a command that you want to run-in the terminal. Now, instead of pulling up the terminal and writing out a command, you can just use the command palette to run it automatically and it will show the name of that task in the terminal sidebar here.

Speaking of the terminal, one one of the most common things you'll do here is execute commands for version control using git. Not only are git commands hard to remember, but it can be very dangerous and painful when you mess them up. The standard procedure for git fuckups is to go to Stack Overflow and look at the top questions there because they're almost all related to git. The funny thing though is that I think this is an area where it actually makes more sense to use your mouse as opposed to the keyboard. In the source control tab in Versus Code, we get a breakdown of all the changes in our current working directory.

A we can just point and click at files that we want to stage, and also notice the icon next to each file, which will tell us if that file has been modified, added, or removed. A Now from the drop down menu, we get a list of all the possible git commands. Most often, we're just committing files, but vscode will give us a breakdown of all the possible commands without having to look them up in the documentation. If you're working on a big complex project with other developers, I'd highly recommend installing the GitLens extension. It.

It provides a bunch of extra ways to visualize and explore your code, and most importantly, it will tell you exactly who to blame when your code stops working. It. It's a really great extension, but now we're going to look at another extension that's brand new and even crazier. Normally, when you want to work with a git repo on GitHub, you need to clone it to your local a system. But now, thanks to the monopoly that Microsoft has on the developer ecosystem, this process can now be streamlined with remote repositories.

Install the extension, then click on this icon in in the bottom left corner to open up a remote repository. It'll have you log in with your GitHub account, then you can start contributing to any repo on GitHub without needing to worry about complex git commands. You can create a new branch, edit some code, and then submit a pull request without ever having to leave Versus Code. A in addition to remote repositories, you should also know about remote SSH to connect to a remote server and also remote containers a to use a Docker container as your development environment instead of your local system. These extensions are managed by Microsoft and can turn your basic text editor into a full a blown integrated development environment.

But, let's get back to our actual code. In many projects, you may find yourself writing the same boilerplate code over and over again. A If you find yourself doing that, an easy way to improve your productivity is to create a custom snippet. From the command palette, run the configure user snippets command. You can create global snippets a fuse across all of your projects or scope them to an individual workspace.

Basically, you just modify this JSON file with the code that you want to insert, a then when you go back to your main project, you can use the insert snippet command to quickly add your own custom boilerplate. But if you work with a popular framework, a there's a good chance that somebody already did this work for you. Before you go building your own, check out the extensions panel to see if there are any prebuilt snippets out there that already meet your needs. A Oh, and here's a cool random thing. If you need to create a new file in the file explorer, but it lives in a directory that doesn't exist yet, you can create that file along with any nested directories on top of it automatically by just putting a slash in front of the file name.

And Versus Code will automatically create those directories. Now, yet another awesome tool that I want to mention is the paste JSON as code extension. If you work with TypeScript, one extremely tedious thing you might have to do is take a JSON object a, and convert it to a bunch of types to represent some kind of schema. This extension will take your JSON and automatically infer types using a tool called QuickType. A and, in some cases, that can save you hours of work.

But, the final thing I wanna leave you with is a quote you've probably heard before. There are only 2 hard things in computer science, cache invalidation and naming things. Naming your code is hard, which means that you'll often be renaming things. When you name something poorly, your first idea might be to do a find and replace across your whole project. A but that can be kind of dangerous.

A better idea is to find the thing you want to rename. Then if you right click it, you can find all of its references or implementations. Then From there, you can use the rename symbol option to safely rename it across all of your files. I'm gonna go ahead and wrap things up there, but make sure to share your its own BSco pro tips in the comments. And if you wanna support my work, consider sponsoring me on GitHub or becoming a pro member at FireShip IO.

Thanks for watching, and I will see you in the next one. A
Visual Studio Code is like a knife. It's only as good as the hands that wield it, but unfortunately, it has more knobs than a fighter jet and requires the steady hand of a surgeon. To the untrained eye, Versus Code is just a simple text editor, like Microsoft Word with code highlighting. But in reality, it contains a ton of productivity boosting features that you're probably not using it. In today's video, we'll compare amateur Versus Code techniques to the ones used by professionals, allowing you to write and analyze your code it faster. Because the most valuable thing you own in this world is your time. If you're new here, like and subscribe, then leave your best Versus Code pro tip in the comments.
programming
software
graphic design
software development
computer science
I'll choose one of them to win this free t a shirt next week. And now, let's jump right into things by installing Versus Code. Once installed, you'll want to open up a directory with some files in it. Maybe you just generated a new Astro project from the command line. Then to open it in your editor, you pull up the file explorer and click Open with Versus Code. That works, but it would have been much quicker had you done it from the command line. If you're in the terminal and want to open a directory or edit a file, you can do that quickly with the vscode CLI using the code command.
But keep in mind, it. And if you're on Mac or Linux, you need to first add the binary to your path. Now that we have the editor opened, it's tempting to go around 2 different windows with the mouse, and click on buttons to run commands, just like we would with any other software. But here's a little productivity secret. The less you rely on the mouse, the better. A Versus Code allows you to use the mouse for everything, making the tool approachable, but that's rarely the most efficient way to get things done. You don't have to go crazy and learn something like Vim or Emax. But it's important to understand that anything you do with your mouse can likely be done quicker with the keyboard. Virtually every command you see in the Versus Code window can be done with a keyboard shortcut.
software
computer science
programming
You don't need to memorize them all, but knowing about 10 to 20 will literally change your life. Letting go of the mouse may not feel natural at first, but mastering the keyboard It is a lot like learning to play an instrument. It takes a lot of practice, but eventually it becomes second nature. The first shortcut you'll want to memorize is control papa, which brings up the command palette. The beauty the command palette is that it gives you all the power of Versus Code from the keyboard without having to memorize a bunch of key bindings. By default, it will give you a list of recently opened files. In addition, you can start typing a file name to find it in your project. And that's obviously much quicker than trying to find a file by clicking through a bunch of directories in the file explorer. But the command palette can do a lot more.
If you a type of right angle bracket. It will give you access to virtually any command that you can run-in Versus Code along with the commands for the extensions that you use. For example, you may want to toggle the mini map. A or one thing that you'll notice in some of my videos is that I execute JavaScript directly in the file itself, and that's made possible by an extension called Quoca, which is a tool that I can start and a stop in any file via the command palette. The extension itself is really cool. It automatically runs your JavaScript code in the background, then appends the output directly a play in your editor, which can facilitate rapid prototyping when your goal is to just write some plain JavaScript code. Now, another really awesome thing we can do here is find pieces of code or symbols throughout our project.
youtube
programming
animation
streaming
When working in a really big file, it's easy to get lost. The worst thing you can do is scroll around the page looking for for the function or interface that you need. You could do control foxtrot to find that text on the page, but an even better approach is to use the at symbol from the command palette. That'll list out every symbol in the code so you can quickly navigate to it. And if you want, you can bypass the command palette altogether by entering control shift period to do the same thing directly in the file itself. Now, in other cases, you may want to find a symbol throughout the entire project, including all of your dependencies like node modules. Use the hashtag followed by the name of the symbol you're looking for to find that interface in your own code or your dependencies code. Another really awesome bonus tip here a is that if you have a really long class name, you don't even have to type the whole thing out.
Just the first character in each camel cased word and it will work just as well. A The command palette is awesome, but it doesn't really help you write your code faster. When you see a line of code that you want to edit, the natural approach is to take the mouse and then highlight that a line.
programming
A developer might do this 100, if not 1000 of times per day. A faster way to get to where you need to go is to hit control golf, followed by the line number that you want to focus on. A from there, use the arrow keys to go character by character and hold down the shift key if you want to highlight something, or use control arrow to move word by word. A When your cursor lands on a word that you want to edit, hit ctrl delta to highlight it, so you can then delete it or replace it. But here's where things get really mind blowing. A If those characters appear multiple times in the code and you want to edit them all at the same time, just hit ctrl d again and again, and you're now a three x a developer editing 3 lines of code at the same time. In some cases, you may want to use the mouse for multiline editing. Holding down alt while you click on different parts of the editor, will set up cursors in multiple places. That can be really useful for writing repetitive CSS properties. One place you might use this often is with opening and closing HTML tags. But you can actually make your life even easier by installing the auto rename tag extension. A this will automatically rename the closing tag when you edit the opening tag, and it can work in other languages beyond just HTML. Now in other cases, you may just want to delete or move a line.
The amateur approach is to highlight that line, do a right click with the mouse and find cut, then do another right click with the mouse and find paste. Here's the faster approach. If your cursor is already on a line, a all you have to do is hit control x to cut it.
machine learning
No highlighting is necessary. But if your goal is to move the line somewhere else, then there's an even better approach. A switch. Use alt followed by the up or down arrows to move the line somewhere else quickly. And if you want to copy that line as you move it, use alt shift followed by the arrows. A now one other thing that you likely often do in your code is comment it out to disable it. The worst possible thing you can do is go line by line adding the comment syntax to each line. If this is how you currently do comments, you'll want to pay attention to this next shortcut. 1st, highlight the code using your mouse or by using that control l command to highlight line by line. A once highlighted, use control forward slash to toggle comments on that code. Now when speaking of code comments, it's often important to format them properly. In JavaScript, that typically means following the JSDoc standard. And there's an extension called addjs.comments. Once installed, it allows us to highlight a function, then use the command palette to add a a comment to it automatically. Bonus tip. In your j s dot comments, you can use the link tag to link to other symbols in your source code. When you hover over that symbol, it will give you the comment. Then if you click the link, it will take you to that part of the code automatically. That makes writing comments much easier, but what if we could also make them easier to read? A by also installing the better comments extension, we'll get automatic highlighting in our comment text. Any line that starts with a bang is now red and all of our to dos are highlighted orange. A but now let's switch gears into a very important topic, the terminal. You can open a new terminal session directly in Versus Code in your current working directory using control backtick. When a when you start a new terminal, it uses your default shell, which in my case is bash. If you click the carrot, you can use a different shell if needed like PowerShell or WSL. A What often happens though is you need multiple terminal sessions running at the same time, like one for your test runner, one for your dev server, and so on. To keep things organized, click on the icon, a then change the name or the color of that session, and now you don't have to fumble between different terminals to figure out what each one is doing. It. Now, when you type out an actual command in the terminal and you screw it up, you can use control arrows to quickly navigate to a different part of the actual text a because your mouse won't even work here. But if you already hit enter and got an error message, you can use control k to clear out the terminal, then use the up arrow to go to the last command in your history and just rerun it instantly. But what if there is a way where you didn't have to write the same terminal command over and over again? A like how many times have you written npm run build or npm run test?
To simplify things, you can create a Versus Code task, a, which is just a JSON configuration that contains a command that you want to run-in the terminal. Now, instead of pulling up the terminal and writing out a command, you can just use the command palette to run it automatically and it will show the name of that task in the terminal sidebar here.
programming
Speaking of the terminal, one one of the most common things you'll do here is execute commands for version control using git. Not only are git commands hard to remember, but it can be very dangerous and painful when you mess them up. The standard procedure for git fuckups is to go to Stack Overflow and look at the top questions there because they're almost all related to git. The funny thing though is that I think this is an area where it actually makes more sense to use your mouse as opposed to the keyboard. In the source control tab in Versus Code, we get a breakdown of all the changes in our current working directory. A we can just point and click at files that we want to stage, and also notice the icon next to each file, which will tell us if that file has been modified, added, or removed.
A Now from the drop down menu, we get a list of all the possible git commands. Most often, we're just committing files, but vscode will give us a breakdown of all the possible commands without having to look them up in the documentation. If you're working on a big complex project with other developers, I'd highly recommend installing the GitLens extension. It. It provides a bunch of extra ways to visualize and explore your code, and most importantly, it will tell you exactly who to blame when your code stops working. It. It's a really great extension, but now we're going to look at another extension that's brand new and even crazier. Normally, when you want to work with a git repo on GitHub, you need to clone it to your local a system. But now, thanks to the monopoly that Microsoft has on the developer ecosystem, this process can now be streamlined with remote repositories. Install the extension, then click on this icon in in the bottom left corner to open up a remote repository. It'll have you log in with your GitHub account, then you can start contributing to any repo on GitHub without needing to worry about complex git commands.
software
software development
microsoft
You can create a new branch, edit some code, and then submit a pull request without ever having to leave Versus Code. A in addition to remote repositories, you should also know about remote SSH to connect to a remote server and also remote containers a to use a Docker container as your development environment instead of your local system.
These extensions are managed by Microsoft and can turn your basic text editor into a full a blown integrated development environment. But, let's get back to our actual code. In many projects, you may find yourself writing the same boilerplate code over and over again. A If you find yourself doing that, an easy way to improve your productivity is to create a custom snippet. From the command palette, run the configure user snippets command. You can create global snippets a fuse across all of your projects or scope them to an individual workspace.
software development
software
programming
Basically, you just modify this JSON file with the code that you want to insert, a then when you go back to your main project, you can use the insert snippet command to quickly add your own custom boilerplate. But if you work with a popular framework, a there's a good chance that somebody already did this work for you. Before you go building your own, check out the extensions panel to see if there are any prebuilt snippets out there that already meet your needs. A Oh, and here's a cool random thing. If you need to create a new file in the file explorer, but it lives in a directory that doesn't exist yet, you can create that file along with any nested directories on top of it automatically by just putting a slash in front of the file name. And Versus Code will automatically create those directories. Now, yet another awesome tool that I want to mention is the paste JSON as code extension. If you work with TypeScript, one extremely tedious thing you might have to do is take a JSON object a, and convert it to a bunch of types to represent some kind of schema. This extension will take your JSON and automatically infer types using a tool called QuickType. A and, in some cases, that can save you hours of work. But, the final thing I wanna leave you with is a quote you've probably heard before. There are only 2 hard things in computer science, cache invalidation and naming things. Naming your code is hard, which means that you'll often be renaming things. When you name something poorly, your first idea might be to do a find and replace across your whole project. A but that can be kind of dangerous. A better idea is to find the thing you want to rename. Then if you right click it, you can find all of its references or implementations. Then From there, you can use the rename symbol option to safely rename it across all of your files. I'm gonna go ahead and wrap things up there, but make sure to share your its own BSco pro tips in the comments.
And if you wanna support my work, consider sponsoring me on GitHub or becoming a pro member at FireShip IO. Thanks for watching, and I will see you in the next one. A
literature
construction
art
writing
science
customer support
Visual Studio Code is like a knife. It's only as good as the hands that wield it, but unfortunately, it has more knobs than a fighter jet and requires the steady hand of a surgeon. To the untrained eye, Versus Code is just a simple text editor, like Microsoft Word with code highlighting. But in reality, it contains a ton of productivity boosting features that you're probably not using it. In today's video, we'll compare amateur Versus Code techniques to the ones used by professionals, allowing you to write and analyze your code it faster. Because the most valuable thing you own in this world is your time. If you're new here, like and subscribe, then leave your best Versus Code pro tip in the comments. I'll choose one of them to win this free t a shirt next week. And now, let's jump right into things by installing Versus Code. Once installed, you'll want to open up a directory with some files in it. Maybe you just generated a new Astro project from the command line. Then to open it in your editor, you pull up the file explorer and click Open with Versus Code. That works, but it would have been much quicker had you done it from the command line. If you're in the terminal and want to open a directory or edit a file, you can do that quickly with the vscode CLI using the code command. But keep in mind, it. And if you're on Mac or Linux, you need to first add the binary to your path. Now that we have the editor opened, it's tempting to go around 2 different windows with the mouse, and click on buttons to run commands, just like we would with any other software. But here's a little productivity secret. The less you rely on the mouse, the better. A Versus Code allows you to use the mouse for everything, making the tool approachable, but that's rarely the most efficient way to get things done. You don't have to go crazy and learn something like Vim or Emax. But it's important to understand that anything you do with your mouse can likely be done quicker with the keyboard. Virtually every command you see in the Versus Code window can be done with a keyboard shortcut. You don't need to memorize them all, but knowing about 10 to 20 will literally change your life. Letting go of the mouse may not feel natural at first, but mastering the keyboard It is a lot like learning to play an instrument. It takes a lot of practice, but eventually it becomes second nature. The first shortcut you'll want to memorize is control papa, which brings up the command palette. The beauty the command palette is that it gives you all the power of Versus Code from the keyboard without having to memorize a bunch of key bindings. By default, it will give you a list of recently opened files. In addition, you can start typing a file name to find it in your project. And that's obviously much quicker than trying to find a file by clicking through a bunch of directories in the file explorer. But the command palette can do a lot more. If you a type of right angle bracket. It will give you access to virtually any command that you can run-in Versus Code along with the commands for the extensions that you use. For example, you may want to toggle the mini map. A or one thing that you'll notice in some of my videos is that I execute JavaScript directly in the file itself, and that's made possible by an extension called Quoca, which is a tool that I can start and a stop in any file via the command palette. The extension itself is really cool. It automatically runs your JavaScript code in the background, then appends the output directly a play in your editor, which can facilitate rapid prototyping when your goal is to just write some plain JavaScript code. Now, another really awesome thing we can do here is find pieces of code or symbols throughout our project. When working in a really big file, it's easy to get lost. The worst thing you can do is scroll around the page looking for for the function or interface that you need. You could do control foxtrot to find that text on the page, but an even better approach is to use the at symbol from the command palette. That'll list out every symbol in the code so you can quickly navigate to it. And if you want, you can bypass the command palette altogether by entering control shift period to do the same thing directly in the file itself. Now, in other cases, you may want to find a symbol throughout the entire project, including all of your dependencies like node modules. Use the hashtag followed by the name of the symbol you're looking for to find that interface in your own code or your dependencies code. Another really awesome bonus tip here a is that if you have a really long class name, you don't even have to type the whole thing out. Just the first character in each camel cased word and it will work just as well. A The command palette is awesome, but it doesn't really help you write your code faster. When you see a line of code that you want to edit, the natural approach is to take the mouse and then highlight that a line. A developer might do this 100, if not 1000 of times per day. A faster way to get to where you need to go is to hit control golf, followed by the line number that you want to focus on. A from there, use the arrow keys to go character by character and hold down the shift key if you want to highlight something, or use control arrow to move word by word. A When your cursor lands on a word that you want to edit, hit ctrl delta to highlight it, so you can then delete it or replace it. But here's where things get really mind blowing. A If those characters appear multiple times in the code and you want to edit them all at the same time, just hit ctrl d again and again, and you're now a three x a developer editing 3 lines of code at the same time. In some cases, you may want to use the mouse for multiline editing. Holding down alt while you click on different parts of the editor, will set up cursors in multiple places. That can be really useful for writing repetitive CSS properties. One place you might use this often is with opening and closing HTML tags. But you can actually make your life even easier by installing the auto rename tag extension. A this will automatically rename the closing tag when you edit the opening tag, and it can work in other languages beyond just HTML. Now in other cases, you may just want to delete or move a line. The amateur approach is to highlight that line, do a right click with the mouse and find cut, then do another right click with the mouse and find paste. Here's the faster approach. If your cursor is already on a line, a all you have to do is hit control x to cut it. No highlighting is necessary. But if your goal is to move the line somewhere else, then there's an even better approach. A switch. Use alt followed by the up or down arrows to move the line somewhere else quickly. And if you want to copy that line as you move it, use alt shift followed by the arrows. A now one other thing that you likely often do in your code is comment it out to disable it. The worst possible thing you can do is go line by line adding the comment syntax to each line. If this is how you currently do comments, you'll want to pay attention to this next shortcut. 1st, highlight the code using your mouse or by using that control l command to highlight line by line. A once highlighted, use control forward slash to toggle comments on that code. Now when speaking of code comments, it's often important to format them properly. In JavaScript, that typically means following the JSDoc standard. And there's an extension called addjs.comments. Once installed, it allows us to highlight a function, then use the command palette to add a a comment to it automatically. Bonus tip. In your j s dot comments, you can use the link tag to link to other symbols in your source code. When you hover over that symbol, it will give you the comment. Then if you click the link, it will take you to that part of the code automatically. That makes writing comments much easier, but what if we could also make them easier to read? A by also installing the better comments extension, we'll get automatic highlighting in our comment text. Any line that starts with a bang is now red and all of our to dos are highlighted orange. A but now let's switch gears into a very important topic, the terminal. You can open a new terminal session directly in Versus Code in your current working directory using control backtick. When a when you start a new terminal, it uses your default shell, which in my case is bash. If you click the carrot, you can use a different shell if needed like PowerShell or WSL. A What often happens though is you need multiple terminal sessions running at the same time, like one for your test runner, one for your dev server, and so on. To keep things organized, click on the icon, a then change the name or the color of that session, and now you don't have to fumble between different terminals to figure out what each one is doing. It. Now, when you type out an actual command in the terminal and you screw it up, you can use control arrows to quickly navigate to a different part of the actual text a because your mouse won't even work here. But if you already hit enter and got an error message, you can use control k to clear out the terminal, then use the up arrow to go to the last command in your history and just rerun it instantly. But what if there is a way where you didn't have to write the same terminal command over and over again? A like how many times have you written npm run build or npm run test? To simplify things, you can create a Versus Code task, a, which is just a JSON configuration that contains a command that you want to run-in the terminal. Now, instead of pulling up the terminal and writing out a command, you can just use the command palette to run it automatically and it will show the name of that task in the terminal sidebar here. Speaking of the terminal, one one of the most common things you'll do here is execute commands for version control using git. Not only are git commands hard to remember, but it can be very dangerous and painful when you mess them up. The standard procedure for git fuckups is to go to Stack Overflow and look at the top questions there because they're almost all related to git. The funny thing though is that I think this is an area where it actually makes more sense to use your mouse as opposed to the keyboard. In the source control tab in Versus Code, we get a breakdown of all the changes in our current working directory. A we can just point and click at files that we want to stage, and also notice the icon next to each file, which will tell us if that file has been modified, added, or removed. A Now from the drop down menu, we get a list of all the possible git commands. Most often, we're just committing files, but vscode will give us a breakdown of all the possible commands without having to look them up in the documentation. If you're working on a big complex project with other developers, I'd highly recommend installing the GitLens extension. It. It provides a bunch of extra ways to visualize and explore your code, and most importantly, it will tell you exactly who to blame when your code stops working. It. It's a really great extension, but now we're going to look at another extension that's brand new and even crazier. Normally, when you want to work with a git repo on GitHub, you need to clone it to your local a system. But now, thanks to the monopoly that Microsoft has on the developer ecosystem, this process can now be streamlined with remote repositories. Install the extension, then click on this icon in in the bottom left corner to open up a remote repository. It'll have you log in with your GitHub account, then you can start contributing to any repo on GitHub without needing to worry about complex git commands. You can create a new branch, edit some code, and then submit a pull request without ever having to leave Versus Code. A in addition to remote repositories, you should also know about remote SSH to connect to a remote server and also remote containers a to use a Docker container as your development environment instead of your local system. These extensions are managed by Microsoft and can turn your basic text editor into a full a blown integrated development environment. But, let's get back to our actual code. In many projects, you may find yourself writing the same boilerplate code over and over again. A If you find yourself doing that, an easy way to improve your productivity is to create a custom snippet. From the command palette, run the configure user snippets command. You can create global snippets a fuse across all of your projects or scope them to an individual workspace. Basically, you just modify this JSON file with the code that you want to insert, a then when you go back to your main project, you can use the insert snippet command to quickly add your own custom boilerplate. But if you work with a popular framework, a there's a good chance that somebody already did this work for you. Before you go building your own, check out the extensions panel to see if there are any prebuilt snippets out there that already meet your needs. A Oh, and here's a cool random thing. If you need to create a new file in the file explorer, but it lives in a directory that doesn't exist yet, you can create that file along with any nested directories on top of it automatically by just putting a slash in front of the file name. And Versus Code will automatically create those directories. Now, yet another awesome tool that I want to mention is the paste JSON as code extension. If you work with TypeScript, one extremely tedious thing you might have to do is take a JSON object a, and convert it to a bunch of types to represent some kind of schema. This extension will take your JSON and automatically infer types using a tool called QuickType. A and, in some cases, that can save you hours of work. But, the final thing I wanna leave you with is a quote you've probably heard before. There are only 2 hard things in computer science, cache invalidation and naming things. Naming your code is hard, which means that you'll often be renaming things. When you name something poorly, your first idea might be to do a find and replace across your whole project. A but that can be kind of dangerous. A better idea is to find the thing you want to rename. Then if you right click it, you can find all of its references or implementations. Then From there, you can use the rename symbol option to safely rename it across all of your files. I'm gonna go ahead and wrap things up there, but make sure to share your its own BSco pro tips in the comments. And if you wanna support my work, consider sponsoring me on GitHub or becoming a pro member at FireShip IO. Thanks for watching, and I will see you in the next one. A
Visual
visual
Studio
studio
Code
code
is
is
like
like
a
a
knife.
knife
It's
it's
only
only
as
as
good
good
as
as
the
the
hands
hands
that
that
wield
wield
it,
it
but
but
unfortunately,
unfortunately
it
it
has
has
more
more
knobs
knobs
than
than
a
a
fighter
fighter
jet
jet
and
and
requires
requires
the
the
steady
steady
hand
hand
of
of
a
a
surgeon.
surgeon
To
to
the
the
untrained
untrained
eye,
eye
Versus
versus
Code
code
is
is
just
just
a
a
simple
simple
text
text
editor,
editor
like
like
Microsoft
microsoft
Word
word
with
with
code
code
highlighting.
highlighting
But
but
in
in
reality,
reality
it
it
contains
contains
a
a
ton
ton
of
of
productivity
productivity
boosting
boosting
features
features
that
that
you're
you're
probably
probably
not
not
using
using
it.
it
In
in
today's
today's
video,
video
we'll
we'll
compare
compare
amateur
amateur
Versus
versus
Code
code
techniques
techniques
to
to
the
the
ones
ones
used
used
by
by
professionals,
professionals
allowing
allowing
you
you
to
to
write
write
and
and
analyze
analyze
your
your
code
code
it
it
faster.
faster
Because
because
the
the
most
most
valuable
valuable
thing
thing
you
you
own
own
in
in
this
this
world
world
is
is
your
your
time.
time
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
then
then
leave
leave
your
your
best
best
Versus
versus
Code
code
pro
pro
tip
tip
in
in
the
the
comments.
comments
I'll
i'll
choose
choose
one
one
of
of
them
them
to
to
win
win
this
this
free
free
t
t
a
a
shirt
shirt
next
next
week.
week
And
and
now,
now
let's
let's
jump
jump
right
right
into
into
things
things
by
by
installing
installing
Versus
versus
Code.
code
Once
once
installed,
installed
you'll
you'll
want
want
to
to
open
open
up
up
a
a
directory
directory
with
with
some
some
files
files
in
in
it.
it
Maybe
maybe
you
you
just
just
generated
generated
a
a
new
new
Astro
astro
project
project
from
from
the
the
command
command
line.
line
Then
then
to
to
open
open
it
it
in
in
your
your
editor,
editor
you
you
pull
pull
up
up
the
the
file
file
explorer
explorer
and
and
click
click
Open
open
with
with
Versus
versus
Code.
code
That
that
works,
works
but
but
it
it
would
would
have
have
been
been
much
much
quicker
quicker
had
had
you
you
done
done
it
it
from
from
the
the
command
command
line.
line
If
if
you're
you're
in
in
the
the
terminal
terminal
and
and
want
want
to
to
open
open
a
a
directory
directory
or
or
edit
edit
a
a
file,
file
you
you
can
can
do
do
that
that
quickly
quickly
with
with
the
the
vscode
vscode
CLI
cli
using
using
the
the
code
code
command.
command
But
but
keep
keep
in
in
mind,
mind
it.
it
And
and
if
if
you're
you're
on
on
Mac
mac
or
or
Linux,
linux
you
you
need
need
to
to
first
first
add
add
the
the
binary
binary
to
to
your
your
path.
path
Now
now
that
that
we
we
have
have
the
the
editor
editor
opened,
opened
it's
it's
tempting
tempting
to
to
go
go
around
around
2
2
different
different
windows
windows
with
with
the
the
mouse,
mouse
and
and
click
click
on
on
buttons
buttons
to
to
run
run
commands,
commands
just
just
like
like
we
we
would
would
with
with
any
any
other
other
software.
software
But
but
here's
here's
a
a
little
little
productivity
productivity
secret.
secret
The
the
less
less
you
you
rely
rely
on
on
the
the
mouse,
mouse
the
the
better.
better
A
a
Versus
versus
Code
code
allows
allows
you
you
to
to
use
use
the
the
mouse
mouse
for
for
everything,
everything
making
making
the
the
tool
tool
approachable,
approachable
but
but
that's
that's
rarely
rarely
the
the
most
most
efficient
efficient
way
way
to
to
get
get
things
things
done.
done
You
you
don't
don't
have
have
to
to
go
go
crazy
crazy
and
and
learn
learn
something
something
like
like
Vim
vim
or
or
Emax.
emax
But
but
it's
it's
important
important
to
to
understand
understand
that
that
anything
anything
you
you
do
do
with
with
your
your
mouse
mouse
can
can
likely
likely
be
be
done
done
quicker
quicker
with
with
the
the
keyboard.
keyboard
Virtually
virtually
every
every
command
command
you
you
see
see
in
in
the
the
Versus
versus
Code
code
window
window
can
can
be
be
done
done
with
with
a
a
keyboard
keyboard
shortcut.
shortcut
You
you
don't
don't
need
need
to
to
memorize
memorize
them
them
all,
all
but
but
knowing
knowing
about
about
10
10
to
to
20
20
will
will
literally
literally
change
change
your
your
life.
life
Letting
letting
go
go
of
of
the
the
mouse
mouse
may
may
not
not
feel
feel
natural
natural
at
at
first,
first
but
but
mastering
mastering
the
the
keyboard
keyboard
It
it
is
is
a
a
lot
lot
like
like
learning
learning
to
to
play
play
an
an
instrument.
instrument
It
it
takes
takes
a
a
lot
lot
of
of
practice,
practice
but
but
eventually
eventually
it
it
becomes
becomes
second
second
nature.
nature
The
the
first
first
shortcut
shortcut
you'll
you'll
want
want
to
to
memorize
memorize
is
is
control
control
papa,
papa
which
which
brings
brings
up
up
the
the
command
command
palette.
palette
The
the
beauty
beauty
the
the
command
command
palette
palette
is
is
that
that
it
it
gives
gives
you
you
all
all
the
the
power
power
of
of
Versus
versus
Code
code
from
from
the
the
keyboard
keyboard
without
without
having
having
to
to
memorize
memorize
a
a
bunch
bunch
of
of
key
key
bindings.
bindings
By
by
default,
default
it
it
will
will
give
give
you
you
a
a
list
list
of
of
recently
recently
opened
opened
files.
files
In
in
addition,
addition
you
you
can
can
start
start
typing
typing
a
a
file
file
name
name
to
to
find
find
it
it
in
in
your
your
project.
project
And
and
that's
that's
obviously
obviously
much
much
quicker
quicker
than
than
trying
trying
to
to
find
find
a
a
file
file
by
by
clicking
clicking
through
through
a
a
bunch
bunch
of
of
directories
directories
in
in
the
the
file
file
explorer.
explorer
But
but
the
the
command
command
palette
palette
can
can
do
do
a
a
lot
lot
more.
more
If
if
you
you
a
a
type
type
of
of
right
right
angle
angle
bracket.
bracket
It
it
will
will
give
give
you
you
access
access
to
to
virtually
virtually
any
any
command
command
that
that
you
you
can
can
run-in
run-in
Versus
versus
Code
code
along
along
with
with
the
the
commands
commands
for
for
the
the
extensions
extensions
that
that
you
you
use.
use
For
for
example,
example
you
you
may
may
want
want
to
to
toggle
toggle
the
the
mini
mini
map.
map
A
a
or
or
one
one
thing
thing
that
that
you'll
you'll
notice
notice
in
in
some
some
of
of
my
my
videos
videos
is
is
that
that
I
i
execute
execute
JavaScript
javascript
directly
directly
in
in
the
the
file
file
itself,
itself
and
and
that's
that's
made
made
possible
possible
by
by
an
an
extension
extension
called
called
Quoca,
quoca
which
which
is
is
a
a
tool
tool
that
that
I
i
can
can
start
start
and
and
a
a
stop
stop
in
in
any
any
file
file
via
via
the
the
command
command
palette.
palette
The
the
extension
extension
itself
itself
is
is
really
really
cool.
cool
It
it
automatically
automatically
runs
runs
your
your
JavaScript
javascript
code
code
in
in
the
the
background,
background
then
then
appends
appends
the
the
output
output
directly
directly
a
a
play
play
in
in
your
your
editor,
editor
which
which
can
can
facilitate
facilitate
rapid
rapid
prototyping
prototyping
when
when
your
your
goal
goal
is
is
to
to
just
just
write
write
some
some
plain
plain
JavaScript
javascript
code.
code
Now,
now
another
another
really
really
awesome
awesome
thing
thing
we
we
can
can
do
do
here
here
is
is
find
find
pieces
pieces
of
of
code
code
or
or
symbols
symbols
throughout
throughout
our
our
project.
project
When
when
working
working
in
in
a
a
really
really
big
big
file,
file
it's
it's
easy
easy
to
to
get
get
lost.
lost
The
the
worst
worst
thing
thing
you
you
can
can
do
do
is
is
scroll
scroll
around
around
the
the
page
page
looking
looking
for
for
for
for
the
the
function
function
or
or
interface
interface
that
that
you
you
need.
need
You
you
could
could
do
do
control
control
foxtrot
foxtrot
to
to
find
find
that
that
text
text
on
on
the
the
page,
page
but
but
an
an
even
even
better
better
approach
approach
is
is
to
to
use
use
the
the
at
at
symbol
symbol
from
from
the
the
command
command
palette.
palette
That'll
that'll
list
list
out
out
every
every
symbol
symbol
in
in
the
the
code
code
so
so
you
you
can
can
quickly
quickly
navigate
navigate
to
to
it.
it
And
and
if
if
you
you
want,
want
you
you
can
can
bypass
bypass
the
the
command
command
palette
palette
altogether
altogether
by
by
entering
entering
control
control
shift
shift
period
period
to
to
do
do
the
the
same
same
thing
thing
directly
directly
in
in
the
the
file
file
itself.
itself
Now,
now
in
in
other
other
cases,
cases
you
you
may
may
want
want
to
to
find
find
a
a
symbol
symbol
throughout
throughout
the
the
entire
entire
project,
project
including
including
all
all
of
of
your
your
dependencies
dependencies
like
like
node
node
modules.
modules
Use
use
the
the
hashtag
hashtag
followed
followed
by
by
the
the
name
name
of
of
the
the
symbol
symbol
you're
you're
looking
looking
for
for
to
to
find
find
that
that
interface
interface
in
in
your
your
own
own
code
code
or
or
your
your
dependencies
dependencies
code.
code
Another
another
really
really
awesome
awesome
bonus
bonus
tip
tip
here
here
a
a
is
is
that
that
if
if
you
you
have
have
a
a
really
really
long
long
class
class
name,
name
you
you
don't
don't
even
even
have
have
to
to
type
type
the
the
whole
whole
thing
thing
out.
out
Just
just
the
the
first
first
character
character
in
in
each
each
camel
camel
cased
cased
word
word
and
and
it
it
will
will
work
work
just
just
as
as
well.
well
A
a
The
the
command
command
palette
palette
is
is
awesome,
awesome
but
but
it
it
doesn't
doesn't
really
really
help
help
you
you
write
write
your
your
code
code
faster.
faster
When
when
you
you
see
see
a
a
line
line
of
of
code
code
that
that
you
you
want
want
to
to
edit,
edit
the
the
natural
natural
approach
approach
is
is
to
to
take
take
the
the
mouse
mouse
and
and
then
then
highlight
highlight
that
that
a
a
line.
line
A
a
developer
developer
might
might
do
do
this
this
100,
100
if
if
not
not
1000
1000
of
of
times
times
per
per
day.
day
A
a
faster
faster
way
way
to
to
get
get
to
to
where
where
you
you
need
need
to
to
go
go
is
is
to
to
hit
hit
control
control
golf,
golf
followed
followed
by
by
the
the
line
line
number
number
that
that
you
you
want
want
to
to
focus
focus
on.
on
A
a
from
from
there,
there
use
use
the
the
arrow
arrow
keys
keys
to
to
go
go
character
character
by
by
character
character
and
and
hold
hold
down
down
the
the
shift
shift
key
key
if
if
you
you
want
want
to
to
highlight
highlight
something,
something
or
or
use
use
control
control
arrow
arrow
to
to
move
move
word
word
by
by
word.
word
A
a
When
when
your
your
cursor
cursor
lands
lands
on
on
a
a
word
word
that
that
you
you
want
want
to
to
edit,
edit
hit
hit
ctrl
ctrl
delta
delta
to
to
highlight
highlight
it,
it
so
so
you
you
can
can
then
then
delete
delete
it
it
or
or
replace
replace
it.
it
But
but
here's
here's
where
where
things
things
get
get
really
really
mind
mind
blowing.
blowing
A
a
If
if
those
those
characters
characters
appear
appear
multiple
multiple
times
times
in
in
the
the
code
code
and
and
you
you
want
want
to
to
edit
edit
them
them
all
all
at
at
the
the
same
same
time,
time
just
just
hit
hit
ctrl
ctrl
d
d
again
again
and
and
again,
again
and
and
you're
you're
now
now
a
a
three
three
x
x
a
a
developer
developer
editing
editing
3
3
lines
lines
of
of
code
code
at
at
the
the
same
same
time.
time
In
in
some
some
cases,
cases
you
you
may
may
want
want
to
to
use
use
the
the
mouse
mouse
for
for
multiline
multiline
editing.
editing
Holding
holding
down
down
alt
alt
while
while
you
you
click
click
on
on
different
different
parts
parts
of
of
the
the
editor,
editor
will
will
set
set
up
up
cursors
cursors
in
in
multiple
multiple
places.
places
That
that
can
can
be
be
really
really
useful
useful
for
for
writing
writing
repetitive
repetitive
CSS
css
properties.
properties
One
one
place
place
you
you
might
might
use
use
this
this
often
often
is
is
with
with
opening
opening
and
and
closing
closing
HTML
html
tags.
tags
But
but
you
you
can
can
actually
actually
make
make
your
your
life
life
even
even
easier
easier
by
by
installing
installing
the
the
auto
auto
rename
rename
tag
tag
extension.
extension
A
a
this
this
will
will
automatically
automatically
rename
rename
the
the
closing
closing
tag
tag
when
when
you
you
edit
edit
the
the
opening
opening
tag,
tag
and
and
it
it
can
can
work
work
in
in
other
other
languages
languages
beyond
beyond
just
just
HTML.
html
Now
now
in
in
other
other
cases,
cases
you
you
may
may
just
just
want
want
to
to
delete
delete
or
or
move
move
a
a
line.
line
The
the
amateur
amateur
approach
approach
is
is
to
to
highlight
highlight
that
that
line,
line
do
do
a
a
right
right
click
click
with
with
the
the
mouse
mouse
and
and
find
find
cut,
cut
then
then
do
do
another
another
right
right
click
click
with
with
the
the
mouse
mouse
and
and
find
find
paste.
paste
Here's
here's
the
the
faster
faster
approach.
approach
If
if
your
your
cursor
cursor
is
is
already
already
on
on
a
a
line,
line
a
a
all
all
you
you
have
have
to
to
do
do
is
is
hit
hit
control
control
x
x
to
to
cut
cut
it.
it
No
no
highlighting
highlighting
is
is
necessary.
necessary
But
but
if
if
your
your
goal
goal
is
is
to
to
move
move
the
the
line
line
somewhere
somewhere
else,
else
then
then
there's
there's
an
an
even
even
better
better
approach.
approach
A
a
switch.
switch
Use
use
alt
alt
followed
followed
by
by
the
the
up
up
or
or
down
down
arrows
arrows
to
to
move
move
the
the
line
line
somewhere
somewhere
else
else
quickly.
quickly
And
and
if
if
you
you
want
want
to
to
copy
copy
that
that
line
line
as
as
you
you
move
move
it,
it
use
use
alt
alt
shift
shift
followed
followed
by
by
the
the
arrows.
arrows
A
a
now
now
one
one
other
other
thing
thing
that
that
you
you
likely
likely
often
often
do
do
in
in
your
your
code
code
is
is
comment
comment
it
it
out
out
to
to
disable
disable
it.
it
The
the
worst
worst
possible
possible
thing
thing
you
you
can
can
do
do
is
is
go
go
line
line
by
by
line
line
adding
adding
the
the
comment
comment
syntax
syntax
to
to
each
each
line.
line
If
if
this
this
is
is
how
how
you
you
currently
currently
do
do
comments,
comments
you'll
you'll
want
want
to
to
pay
pay
attention
attention
to
to
this
this
next
next
shortcut.
shortcut
1st,
1st
highlight
highlight
the
the
code
code
using
using
your
your
mouse
mouse
or
or
by
by
using
using
that
that
control
control
l
l
command
command
to
to
highlight
highlight
line
line
by
by
line.
line
A
a
once
once
highlighted,
highlighted
use
use
control
control
forward
forward
slash
slash
to
to
toggle
toggle
comments
comments
on
on
that
that
code.
code
Now
now
when
when
speaking
speaking
of
of
code
code
comments,
comments
it's
it's
often
often
important
important
to
to
format
format
them
them
properly.
properly
In
in
JavaScript,
javascript
that
that
typically
typically
means
means
following
following
the
the
JSDoc
jsdoc
standard.
standard
And
and
there's
there's
an
an
extension
extension
called
called
addjs.comments.
addjs.comments
Once
once
installed,
installed
it
it
allows
allows
us
us
to
to
highlight
highlight
a
a
function,
function
then
then
use
use
the
the
command
command
palette
palette
to
to
add
add
a
a
a
a
comment
comment
to
to
it
it
automatically.
automatically
Bonus
bonus
tip.
tip
In
in
your
your
j
j
s
s
dot
dot
comments,
comments
you
you
can
can
use
use
the
the
link
link
tag
tag
to
to
link
link
to
to
other
other
symbols
symbols
in
in
your
your
source
source
code.
code
When
when
you
you
hover
hover
over
over
that
that
symbol,
symbol
it
it
will
will
give
give
you
you
the
the
comment.
comment
Then
then
if
if
you
you
click
click
the
the
link,
link
it
it
will
will
take
take
you
you
to
to
that
that
part
part
of
of
the
the
code
code
automatically.
automatically
That
that
makes
makes
writing
writing
comments
comments
much
much
easier,
easier
but
but
what
what
if
if
we
we
could
could
also
also
make
make
them
them
easier
easier
to
to
read?
read
A
a
by
by
also
also
installing
installing
the
the
better
better
comments
comments
extension,
extension
we'll
we'll
get
get
automatic
automatic
highlighting
highlighting
in
in
our
our
comment
comment
text.
text
Any
any
line
line
that
that
starts
starts
with
with
a
a
bang
bang
is
is
now
now
red
red
and
and
all
all
of
of
our
our
to
to
dos
dos
are
are
highlighted
highlighted
orange.
orange
A
a
but
but
now
now
let's
let's
switch
switch
gears
gears
into
into
a
a
very
very
important
important
topic,
topic
the
the
terminal.
terminal
You
you
can
can
open
open
a
a
new
new
terminal
terminal
session
session
directly
directly
in
in
Versus
versus
Code
code
in
in
your
your
current
current
working
working
directory
directory
using
using
control
control
backtick.
backtick
When
when
a
a
when
when
you
you
start
start
a
a
new
new
terminal,
terminal
it
it
uses
uses
your
your
default
default
shell,
shell
which
which
in
in
my
my
case
case
is
is
bash.
bash
If
if
you
you
click
click
the
the
carrot,
carrot
you
you
can
can
use
use
a
a
different
different
shell
shell
if
if
needed
needed
like
like
PowerShell
powershell
or
or
WSL.
wsl
A
a
What
what
often
often
happens
happens
though
though
is
is
you
you
need
need
multiple
multiple
terminal
terminal
sessions
sessions
running
running
at
at
the
the
same
same
time,
time
like
like
one
one
for
for
your
your
test
test
runner,
runner
one
one
for
for
your
your
dev
dev
server,
server
and
and
so
so
on.
on
To
to
keep
keep
things
things
organized,
organized
click
click
on
on
the
the
icon,
icon
a
a
then
then
change
change
the
the
name
name
or
or
the
the
color
color
of
of
that
that
session,
session
and
and
now
now
you
you
don't
don't
have
have
to
to
fumble
fumble
between
between
different
different
terminals
terminals
to
to
figure
figure
out
out
what
what
each
each
one
one
is
is
doing.
doing
It.
it
Now,
now
when
when
you
you
type
type
out
out
an
an
actual
actual
command
command
in
in
the
the
terminal
terminal
and
and
you
you
screw
screw
it
it
up,
up
you
you
can
can
use
use
control
control
arrows
arrows
to
to
quickly
quickly
navigate
navigate
to
to
a
a
different
different
part
part
of
of
the
the
actual
actual
text
text
a
a
because
because
your
your
mouse
mouse
won't
won't
even
even
work
work
here.
here
But
but
if
if
you
you
already
already
hit
hit
enter
enter
and
and
got
got
an
an
error
error
message,
message
you
you
can
can
use
use
control
control
k
k
to
to
clear
clear
out
out
the
the
terminal,
terminal
then
then
use
use
the
the
up
up
arrow
arrow
to
to
go
go
to
to
the
the
last
last
command
command
in
in
your
your
history
history
and
and
just
just
rerun
rerun
it
it
instantly.
instantly
But
but
what
what
if
if
there
there
is
is
a
a
way
way
where
where
you
you
didn't
didn't
have
have
to
to
write
write
the
the
same
same
terminal
terminal
command
command
over
over
and
and
over
over
again?
again
A
a
like
like
how
how
many
many
times
times
have
have
you
you
written
written
npm
npm
run
run
build
build
or
or
npm
npm
run
run
test?
test
To
to
simplify
simplify
things,
things
you
you
can
can
create
create
a
a
Versus
versus
Code
code
task,
task
a,
a
which
which
is
is
just
just
a
a
JSON
json
configuration
configuration
that
that
contains
contains
a
a
command
command
that
that
you
you
want
want
to
to
run-in
run-in
the
the
terminal.
terminal
Now,
now
instead
instead
of
of
pulling
pulling
up
up
the
the
terminal
terminal
and
and
writing
writing
out
out
a
a
command,
command
you
you
can
can
just
just
use
use
the
the
command
command
palette
palette
to
to
run
run
it
it
automatically
automatically
and
and
it
it
will
will
show
show
the
the
name
name
of
of
that
that
task
task
in
in
the
the
terminal
terminal
sidebar
sidebar
here.
here
Speaking
speaking
of
of
the
the
terminal,
terminal
one
one
one
one
of
of
the
the
most
most
common
common
things
things
you'll
you'll
do
do
here
here
is
is
execute
execute
commands
commands
for
for
version
version
control
control
using
using
git.
git
Not
not
only
only
are
are
git
git
commands
commands
hard
hard
to
to
remember,
remember
but
but
it
it
can
can
be
be
very
very
dangerous
dangerous
and
and
painful
painful
when
when
you
you
mess
mess
them
them
up.
up
The
the
standard
standard
procedure
procedure
for
for
git
git
fuckups
fuckups
is
is
to
to
go
go
to
to
Stack
stack
Overflow
overflow
and
and
look
look
at
at
the
the
top
top
questions
questions
there
there
because
because
they're
they're
almost
almost
all
all
related
related
to
to
git.
git
The
the
funny
funny
thing
thing
though
though
is
is
that
that
I
i
think
think
this
this
is
is
an
an
area
area
where
where
it
it
actually
actually
makes
makes
more
more
sense
sense
to
to
use
use
your
your
mouse
mouse
as
as
opposed
opposed
to
to
the
the
keyboard.
keyboard
In
in
the
the
source
source
control
control
tab
tab
in
in
Versus
versus
Code,
code
we
we
get
get
a
a
breakdown
breakdown
of
of
all
all
the
the
changes
changes
in
in
our
our
current
current
working
working
directory.
directory
A
a
we
we
can
can
just
just
point
point
and
and
click
click
at
at
files
files
that
that
we
we
want
want
to
to
stage,
stage
and
and
also
also
notice
notice
the
the
icon
icon
next
next
to
to
each
each
file,
file
which
which
will
will
tell
tell
us
us
if
if
that
that
file
file
has
has
been
been
modified,
modified
added,
added
or
or
removed.
removed
A
a
Now
now
from
from
the
the
drop
drop
down
down
menu,
menu
we
we
get
get
a
a
list
list
of
of
all
all
the
the
possible
possible
git
git
commands.
commands
Most
most
often,
often
we're
we're
just
just
committing
committing
files,
files
but
but
vscode
vscode
will
will
give
give
us
us
a
a
breakdown
breakdown
of
of
all
all
the
the
possible
possible
commands
commands
without
without
having
having
to
to
look
look
them
them
up
up
in
in
the
the
documentation.
documentation
If
if
you're
you're
working
working
on
on
a
a
big
big
complex
complex
project
project
with
with
other
other
developers,
developers
I'd
i'd
highly
highly
recommend
recommend
installing
installing
the
the
GitLens
gitlens
extension.
extension
It.
it
It
it
provides
provides
a
a
bunch
bunch
of
of
extra
extra
ways
ways
to
to
visualize
visualize
and
and
explore
explore
your
your
code,
code
and
and
most
most
importantly,
importantly
it
it
will
will
tell
tell
you
you
exactly
exactly
who
who
to
to
blame
blame
when
when
your
your
code
code
stops
stops
working.
working
It.
it
It's
it's
a
a
really
really
great
great
extension,
extension
but
but
now
now
we're
we're
going
going
to
to
look
look
at
at
another
another
extension
extension
that's
that's
brand
brand
new
new
and
and
even
even
crazier.
crazier
Normally,
normally
when
when
you
you
want
want
to
to
work
work
with
with
a
a
git
git
repo
repo
on
on
GitHub,
github
you
you
need
need
to
to
clone
clone
it
it
to
to
your
your
local
local
a
a
system.
system
But
but
now,
now
thanks
thanks
to
to
the
the
monopoly
monopoly
that
that
Microsoft
microsoft
has
has
on
on
the
the
developer
developer
ecosystem,
ecosystem
this
this
process
process
can
can
now
now
be
be
streamlined
streamlined
with
with
remote
remote
repositories.
repositories
Install
install
the
the
extension,
extension
then
then
click
click
on
on
this
this
icon
icon
in
in
in
in
the
the
bottom
bottom
left
left
corner
corner
to
to
open
open
up
up
a
a
remote
remote
repository.
repository
It'll
it'll
have
have
you
you
log
log
in
in
with
with
your
your
GitHub
github
account,
account
then
then
you
you
can
can
start
start
contributing
contributing
to
to
any
any
repo
repo
on
on
GitHub
github
without
without
needing
needing
to
to
worry
worry
about
about
complex
complex
git
git
commands.
commands
You
you
can
can
create
create
a
a
new
new
branch,
branch
edit
edit
some
some
code,
code
and
and
then
then
submit
submit
a
a
pull
pull
request
request
without
without
ever
ever
having
having
to
to
leave
leave
Versus
versus
Code.
code
A
a
in
in
addition
addition
to
to
remote
remote
repositories,
repositories
you
you
should
should
also
also
know
know
about
about
remote
remote
SSH
ssh
to
to
connect
connect
to
to
a
a
remote
remote
server
server
and
and
also
also
remote
remote
containers
containers
a
a
to
to
use
use
a
a
Docker
docker
container
container
as
as
your
your
development
development
environment
environment
instead
instead
of
of
your
your
local
local
system.
system
These
these
extensions
extensions
are
are
managed
managed
by
by
Microsoft
microsoft
and
and
can
can
turn
turn
your
your
basic
basic
text
text
editor
editor
into
into
a
a
full
full
a
a
blown
blown
integrated
integrated
development
development
environment.
environment
But,
but
let's
let's
get
get
back
back
to
to
our
our
actual
actual
code.
code
In
in
many
many
projects,
projects
you
you
may
may
find
find
yourself
yourself
writing
writing
the
the
same
same
boilerplate
boilerplate
code
code
over
over
and
and
over
over
again.
again
A
a
If
if
you
you
find
find
yourself
yourself
doing
doing
that,
that
an
an
easy
easy
way
way
to
to
improve
improve
your
your
productivity
productivity
is
is
to
to
create
create
a
a
custom
custom
snippet.
snippet
From
from
the
the
command
command
palette,
palette
run
run
the
the
configure
configure
user
user
snippets
snippets
command.
command
You
you
can
can
create
create
global
global
snippets
snippets
a
a
fuse
fuse
across
across
all
all
of
of
your
your
projects
projects
or
or
scope
scope
them
them
to
to
an
an
individual
individual
workspace.
workspace
Basically,
basically
you
you
just
just
modify
modify
this
this
JSON
json
file
file
with
with
the
the
code
code
that
that
you
you
want
want
to
to
insert,
insert
a
a
then
then
when
when
you
you
go
go
back
back
to
to
your
your
main
main
project,
project
you
you
can
can
use
use
the
the
insert
insert
snippet
snippet
command
command
to
to
quickly
quickly
add
add
your
your
own
own
custom
custom
boilerplate.
boilerplate
But
but
if
if
you
you
work
work
with
with
a
a
popular
popular
framework,
framework
a
a
there's
there's
a
a
good
good
chance
chance
that
that
somebody
somebody
already
already
did
did
this
this
work
work
for
for
you.
you
Before
before
you
you
go
go
building
building
your
your
own,
own
check
check
out
out
the
the
extensions
extensions
panel
panel
to
to
see
see
if
if
there
there
are
are
any
any
prebuilt
prebuilt
snippets
snippets
out
out
there
there
that
that
already
already
meet
meet
your
your
needs.
needs
A
a
Oh,
oh
and
and
here's
here's
a
a
cool
cool
random
random
thing.
thing
If
if
you
you
need
need
to
to
create
create
a
a
new
new
file
file
in
in
the
the
file
file
explorer,
explorer
but
but
it
it
lives
lives
in
in
a
a
directory
directory
that
that
doesn't
doesn't
exist
exist
yet,
yet
you
you
can
can
create
create
that
that
file
file
along
along
with
with
any
any
nested
nested
directories
directories
on
on
top
top
of
of
it
it
automatically
automatically
by
by
just
just
putting
putting
a
a
slash
slash
in
in
front
front
of
of
the
the
file
file
name.
name
And
and
Versus
versus
Code
code
will
will
automatically
automatically
create
create
those
those
directories.
directories
Now,
now
yet
yet
another
another
awesome
awesome
tool
tool
that
that
I
i
want
want
to
to
mention
mention
is
is
the
the
paste
paste
JSON
json
as
as
code
code
extension.
extension
If
if
you
you
work
work
with
with
TypeScript,
typescript
one
one
extremely
extremely
tedious
tedious
thing
thing
you
you
might
might
have
have
to
to
do
do
is
is
take
take
a
a
JSON
json
object
object
a,
a
and
and
convert
convert
it
it
to
to
a
a
bunch
bunch
of
of
types
types
to
to
represent
represent
some
some
kind
kind
of
of
schema.
schema
This
this
extension
extension
will
will
take
take
your
your
JSON
json
and
and
automatically
automatically
infer
infer
types
types
using
using
a
a
tool
tool
called
called
QuickType.
quicktype
A
a
and,
and
in
in
some
some
cases,
cases
that
that
can
can
save
save
you
you
hours
hours
of
of
work.
work
But,
but
the
the
final
final
thing
thing
I
i
wanna
wanna
leave
leave
you
you
with
with
is
is
a
a
quote
quote
you've
you've
probably
probably
heard
heard
before.
before
There
there
are
are
only
only
2
2
hard
hard
things
things
in
in
computer
computer
science,
science
cache
cache
invalidation
invalidation
and
and
naming
naming
things.
things
Naming
naming
your
your
code
code
is
is
hard,
hard
which
which
means
means
that
that
you'll
you'll
often
often
be
be
renaming
renaming
things.
things
When
when
you
you
name
name
something
something
poorly,
poorly
your
your
first
first
idea
idea
might
might
be
be
to
to
do
do
a
a
find
find
and
and
replace
replace
across
across
your
your
whole
whole
project.
project
A
a
but
but
that
that
can
can
be
be
kind
kind
of
of
dangerous.
dangerous
A
a
better
better
idea
idea
is
is
to
to
find
find
the
the
thing
thing
you
you
want
want
to
to
rename.
rename
Then
then
if
if
you
you
right
right
click
click
it,
it
you
you
can
can
find
find
all
all
of
of
its
its
references
references
or
or
implementations.
implementations
Then
then
From
from
there,
there
you
you
can
can
use
use
the
the
rename
rename
symbol
symbol
option
option
to
to
safely
safely
rename
rename
it
it
across
across
all
all
of
of
your
your
files.
files
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there,
there
but
but
make
make
sure
sure
to
to
share
share
your
your
its
its
own
own
BSco
bsco
pro
pro
tips
tips
in
in
the
the
comments.
comments
And
and
if
if
you
you
wanna
wanna
support
support
my
my
work,
work
consider
consider
sponsoring
sponsoring
me
me
on
on
GitHub
github
or
or
becoming
becoming
a
a
pro
pro
member
member
at
at
FireShip
fireship
IO.
io
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
A
a
success
The virtual Studio Code provides productivity tips for creating successful YouTube videos, including finding code faster, finding symbols faster, and editing code in smaller command lines. The speaker recommends installing a terminal session and suggests installing the GitLens extension for version control. Consent to sponsored content is also suggested, and viewers are advised to consider creating custom snippet files for searching through a directory and considering the use of paste JSON extensions for finding and replacing code with more common types.
25 VS Code Productivity Tips and Speed Hacks
Visual Studio Code is like a knife. It's only as good as the hands that wield it, but unfortunately, it has more knobs than a fighter jet and requires the steady hand of a surgeon. To the untrained eye, Versus Code is just a simple text editor, like Microsoft Word with code highlighting. But in reality, it contains a ton of productivity boosting features that you're probably not using it. In today's video, we'll compare amateur Versus Code techniques to the ones used by professionals, allowing you to write and analyze your code it faster. Because the most valuable thing you own in this world is your time. If you're new here, like and subscribe, then leave your best Versus Code pro tip in the comments. I'll choose one of them to win this free t a shirt next week. And now, let's jump right into things by installing Versus Code. Once installed, you'll want to open up a directory with some files in it. Maybe you just generated a new Astro project from the command line. Then to open it in your editor, you pull up the file explorer and click Open with Versus Code. That works, but it would have been much quicker had you done it from the command line. If you're in the terminal and want to open a directory or edit a file, you can do that quickly with the vscode CLI using the code command. But keep in mind, it. And if you're on Mac or Linux, you need to first add the binary to your path. Now that we have the editor opened, it's tempting to go around 2 different windows with the mouse, and click on buttons to run commands, just like we would with any other software. But here's a little productivity secret. The less you rely on the mouse, the better. A Versus Code allows you to use the mouse for everything, making the tool approachable, but that's rarely the most efficient way to get things done. You don't have to go crazy and learn something like Vim or Emax. But it's important to understand that anything you do with your mouse can likely be done quicker with the keyboard. Virtually every command you see in the Versus Code window can be done with a keyboard shortcut. You don't need to memorize them all, but knowing about 10 to 20 will literally change your life. Letting go of the mouse may not feel natural at first, but mastering the keyboard It is a lot like learning to play an instrument. It takes a lot of practice, but eventually it becomes second nature. The first shortcut you'll want to memorize is control papa, which brings up the command palette. The beauty the command palette is that it gives you all the power of Versus Code from the keyboard without having to memorize a bunch of key bindings. By default, it will give you a list of recently opened files. In addition, you can start typing a file name to find it in your project. And that's obviously much quicker than trying to find a file by clicking through a bunch of directories in the file explorer. But the command palette can do a lot more. If you a type of right angle bracket. It will give you access to virtually any command that you can run-in Versus Code along with the commands for the extensions that you use. For example, you may want to toggle the mini map. A or one thing that you'll notice in some of my videos is that I execute JavaScript directly in the file itself, and that's made possible by an extension called Quoca, which is a tool that I can start and a stop in any file via the command palette. The extension itself is really cool. It automatically runs your JavaScript code in the background, then appends the output directly a play in your editor, which can facilitate rapid prototyping when your goal is to just write some plain JavaScript code. Now, another really awesome thing we can do here is find pieces of code or symbols throughout our project. When working in a really big file, it's easy to get lost. The worst thing you can do is scroll around the page looking for for the function or interface that you need. You could do control foxtrot to find that text on the page, but an even better approach is to use the at symbol from the command palette. That'll list out every symbol in the code so you can quickly navigate to it. And if you want, you can bypass the command palette altogether by entering control shift period to do the same thing directly in the file itself. Now, in other cases, you may want to find a symbol throughout the entire project, including all of your dependencies like node modules. Use the hashtag followed by the name of the symbol you're looking for to find that interface in your own code or your dependencies code. Another really awesome bonus tip here a is that if you have a really long class name, you don't even have to type the whole thing out. Just the first character in each camel cased word and it will work just as well. A The command palette is awesome, but it doesn't really help you write your code faster. When you see a line of code that you want to edit, the natural approach is to take the mouse and then highlight that a line. A developer might do this 100, if not 1000 of times per day. A faster way to get to where you need to go is to hit control golf, followed by the line number that you want to focus on. A from there, use the arrow keys to go character by character and hold down the shift key if you want to highlight something, or use control arrow to move word by word. A When your cursor lands on a word that you want to edit, hit ctrl delta to highlight it, so you can then delete it or replace it. But here's where things get really mind blowing. A If those characters appear multiple times in the code and you want to edit them all at the same time, just hit ctrl d again and again, and you're now a three x a developer editing 3 lines of code at the same time. In some cases, you may want to use the mouse for multiline editing. Holding down alt while you click on different parts of the editor, will set up cursors in multiple places. That can be really useful for writing repetitive CSS properties. One place you might use this often is with opening and closing HTML tags. But you can actually make your life even easier by installing the auto rename tag extension. A this will automatically rename the closing tag when you edit the opening tag, and it can work in other languages beyond just HTML. Now in other cases, you may just want to delete or move a line. The amateur approach is to highlight that line, do a right click with the mouse and find cut, then do another right click with the mouse and find paste. Here's the faster approach. If your cursor is already on a line, a all you have to do is hit control x to cut it. No highlighting is necessary. But if your goal is to move the line somewhere else, then there's an even better approach. A switch. Use alt followed by the up or down arrows to move the line somewhere else quickly. And if you want to copy that line as you move it, use alt shift followed by the arrows. A now one other thing that you likely often do in your code is comment it out to disable it. The worst possible thing you can do is go line by line adding the comment syntax to each line. If this is how you currently do comments, you'll want to pay attention to this next shortcut. 1st, highlight the code using your mouse or by using that control l command to highlight line by line. A once highlighted, use control forward slash to toggle comments on that code. Now when speaking of code comments, it's often important to format them properly. In JavaScript, that typically means following the JSDoc standard. And there's an extension called addjs.comments. Once installed, it allows us to highlight a function, then use the command palette to add a a comment to it automatically. Bonus tip. In your j s dot comments, you can use the link tag to link to other symbols in your source code. When you hover over that symbol, it will give you the comment. Then if you click the link, it will take you to that part of the code automatically. That makes writing comments much easier, but what if we could also make them easier to read? A by also installing the better comments extension, we'll get automatic highlighting in our comment text. Any line that starts with a bang is now red and all of our to dos are highlighted orange. A but now let's switch gears into a very important topic, the terminal. You can open a new terminal session directly in Versus Code in your current working directory using control backtick. When a when you start a new terminal, it uses your default shell, which in my case is bash. If you click the carrot, you can use a different shell if needed like PowerShell or WSL. A What often happens though is you need multiple terminal sessions running at the same time, like one for your test runner, one for your dev server, and so on. To keep things organized, click on the icon, a then change the name or the color of that session, and now you don't have to fumble between different terminals to figure out what each one is doing. It. Now, when you type out an actual command in the terminal and you screw it up, you can use control arrows to quickly navigate to a different part of the actual text a because your mouse won't even work here. But if you already hit enter and got an error message, you can use control k to clear out the terminal, then use the up arrow to go to the last command in your history and just rerun it instantly. But what if there is a way where you didn't have to write the same terminal command over and over again? A like how many times have you written npm run build or npm run test? To simplify things, you can create a Versus Code task, a, which is just a JSON configuration that contains a command that you want to run-in the terminal. Now, instead of pulling up the terminal and writing out a command, you can just use the command palette to run it automatically and it will show the name of that task in the terminal sidebar here. Speaking of the terminal, one one of the most common things you'll do here is execute commands for version control using git. Not only are git commands hard to remember, but it can be very dangerous and painful when you mess them up. The standard procedure for git fuckups is to go to Stack Overflow and look at the top questions there because they're almost all related to git. The funny thing though is that I think this is an area where it actually makes more sense to use your mouse as opposed to the keyboard. In the source control tab in Versus Code, we get a breakdown of all the changes in our current working directory. A we can just point and click at files that we want to stage, and also notice the icon next to each file, which will tell us if that file has been modified, added, or removed. A Now from the drop down menu, we get a list of all the possible git commands. Most often, we're just committing files, but vscode will give us a breakdown of all the possible commands without having to look them up in the documentation. If you're working on a big complex project with other developers, I'd highly recommend installing the GitLens extension. It. It provides a bunch of extra ways to visualize and explore your code, and most importantly, it will tell you exactly who to blame when your code stops working. It. It's a really great extension, but now we're going to look at another extension that's brand new and even crazier. Normally, when you want to work with a git repo on GitHub, you need to clone it to your local a system. But now, thanks to the monopoly that Microsoft has on the developer ecosystem, this process can now be streamlined with remote repositories. Install the extension, then click on this icon in in the bottom left corner to open up a remote repository. It'll have you log in with your GitHub account, then you can start contributing to any repo on GitHub without needing to worry about complex git commands. You can create a new branch, edit some code, and then submit a pull request without ever having to leave Versus Code. A in addition to remote repositories, you should also know about remote SSH to connect to a remote server and also remote containers a to use a Docker container as your development environment instead of your local system. These extensions are managed by Microsoft and can turn your basic text editor into a full a blown integrated development environment. But, let's get back to our actual code. In many projects, you may find yourself writing the same boilerplate code over and over again. A If you find yourself doing that, an easy way to improve your productivity is to create a custom snippet. From the command palette, run the configure user snippets command. You can create global snippets a fuse across all of your projects or scope them to an individual workspace. Basically, you just modify this JSON file with the code that you want to insert, a then when you go back to your main project, you can use the insert snippet command to quickly add your own custom boilerplate. But if you work with a popular framework, a there's a good chance that somebody already did this work for you. Before you go building your own, check out the extensions panel to see if there are any prebuilt snippets out there that already meet your needs. A Oh, and here's a cool random thing. If you need to create a new file in the file explorer, but it lives in a directory that doesn't exist yet, you can create that file along with any nested directories on top of it automatically by just putting a slash in front of the file name. And Versus Code will automatically create those directories. Now, yet another awesome tool that I want to mention is the paste JSON as code extension. If you work with TypeScript, one extremely tedious thing you might have to do is take a JSON object a, and convert it to a bunch of types to represent some kind of schema. This extension will take your JSON and automatically infer types using a tool called QuickType. A and, in some cases, that can save you hours of work. But, the final thing I wanna leave you with is a quote you've probably heard before. There are only 2 hard things in computer science, cache invalidation and naming things. Naming your code is hard, which means that you'll often be renaming things. When you name something poorly, your first idea might be to do a find and replace across your whole project. A but that can be kind of dangerous. A better idea is to find the thing you want to rename. Then if you right click it, you can find all of its references or implementations. Then From there, you can use the rename symbol option to safely rename it across all of your files. I'm gonna go ahead and wrap things up there, but make sure to share your its own BSco pro tips in the comments. And if you wanna support my work, consider sponsoring me on GitHub or becoming a pro member at FireShip IO. Thanks for watching, and I will see you in the next one. A
The virtual Studio Code provides productivity tips for creating successful YouTube videos, including finding code faster, finding symbols faster, and editing code in smaller command lines. The speaker recommends installing a terminal session and suggests installing the GitLens extension for version control. Consent to sponsored content is also suggested, and viewers are advised to consider creating custom snippet files for searching through a directory and considering the use of paste JSON extensions for finding and replacing code with more common types.