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, VS 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 yet.
In today's video, we'll compare amateur VS Code techniques to the ones used by professionals, allowing you to write and analyze your code 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 VS Code pro tip in the comments. I'll choose one of them to win this free t-shirt next week and now let's jump right into things by installing VS 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 VS 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 VS Code CLI using the code command but keep in mind 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 two 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.
VS Code allows you to use the mouse for everything, making the tool approachable but that's really the most inefficient way to get things done. You don't have to go crazy and learn something like vim or emacs 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 VS 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 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 Ctrl+P which brings up the command palette. The beauty of the command palette is that it gives you all the power of VS 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 type a right angle bracket, it will give you access to virtually any command that you can run in VS Code along with the commands for the extensions that you use. You may want to toggle the minimap or execute JavaScript directly in the file itself using an extension like Quokka. 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 line. A developer might do this hundreds if not thousands of times per day. A faster way to get to where you need to go is to hit Ctrl+G followed by the line number that you want to focus on. 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 Ctrl arrow to move word by word. When your cursor lands on a word that you want to edit hit Ctrl+D to highlight it so you can then delete it or replace it. But here's where things get really mind blowing: 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 3x developer editing three lines of code at the same time.
In some cases you may want to use the mouse for multi-line editing. Holding down alt while you click on different parts of the editor will setup cursors in multiple places that can be really useful for writing repetitive CSS properties... I'm going to go ahead and wrap things up there but make sure to share your own VS Code pro tips in the comments and if you want to 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!