Visual Studio Code is a powerful editor with a lot of fantastic features. However, it’s important to remember that, like any tool, knowing how to use it is key! Without taking advantage of everything VS Code has to offer, it’s as good as a notepad!
Get the VS Code cheat sheet.
First things first, get this cheat sheet from the developers themselves. You can find it right here!
This is a fantastic reference guide to so many fantastic features. Keep it by you! I always have it minimized and ready to go for any time I need a quick reference for a feature I want to use.
Here is my biggest tip: Anytime you think you could use a shortcut to save time, pull up this chart, find exactly what you need, and use it. This will be less efficient initially than simply clicking around and doing things by hand, but this practice is key to getting used to these shortcuts. Eventually, these will become second nature, and your ability to manipulate your code will level up in a huge way.
Basic Shortcuts
These are all fairly basic, commonly used shortcuts that show up daily for me.
- ⌥↓ / ⌥↑ – Used to move a line of code up and down. You can also highlight a whole block of code and move it up or down. Great for when you need to move a function just slightly around.
- ⌥⌘↓ – Create multiple cursers moving downward. Great when you want to create/edit several lines in the same way. You can also use the up arrow to make multiple cursers go up in lines.
-
⌘ D – Find and highlight the next instance of whatever is highlighted. This is fantastic when you need to change a variable name and it’s referenced in several places. If you want to select all instances of that element you can also use:
⌘ shift L - ⌘ P – Search for and open a file. This is useful because scrolling through all the files of a project can take forever. This is also a “fuzzy search,” so you don’t need to have the exact name of the file. A good approximation will do just fine.
More Shortcuts
Here are three more you will have to access by pulling up the command pallet with ⇧⌘P or F1
- Balance outward – This command will automatically find the closing tag for any element you are in and select all of it. Massively useful for when you are trying to select a large block of code, be it a function or an HTML element with several nested elements.
- Git – If you don’t want to go to the terminal, a surprising number of Git commands can be run from the command pallet. Rename a branch, cherry pick, commit, push: it’s all here. Next time you have to use a Git command, see how you like calling it directly from the command pallet.
- Developer: Reload Window – Will simply refresh all the windows. Can be very helpful when you swear that everything is formatted correctly but the editor is still giving you a red underline. Sometimes all it needs is a refresh to get up to date with all the checks.
Are you ready to take it to the next level? Learn Vim.
For my next blog post I’ll go into some of the great features Vim has to offer. It can really take your productivity to the next level. If you want to get started here is a great interactive tutorial: here!
and finally…
Add VS Code Pets!
Seriously look at how cute they are!
They just sort of hang out off to the side and look cute (kind of like real pets). They will interact with the cursor, so you can play with them, including throwing a ball for them to fetch. Download from command pallet or here
Wow, just delightful.