VS Code Tips and Tricks
Of all the IDE's I've used, VS Code quickly became my favorite for web development. I started using it when our company started using Angular for our front end development framework. Here are a few tips and tricks on ways to improve your effectiveness using it and make your job easier.
Keyboard Shortcuts
Go to File
ctrl+p
This is by far my favorite shortcut VS Code has. Use this command to quickly jump to any file in your project. You don't even need to type the exact file name, just start typing any part of it, and vs code will filter on the best match. Hitting enter will open the highlighted (top) result.
Here's an example of opening a file from the Angular Tour of Heroes project:
Open New External Terminal
ctrl+shift+c
I like to keep VS Code pretty clean so I can see as much code as possible, so I prefer to open my terminal in a separate window to run/serve my app. This is a good alternative to using the built in terminal (which can be opened/closed with ctrl+`).
Show All Commands
ctrl+shift+p
I use this the most in combination with GIT, but it can be used for almost every command VS Code has to offer. My most common command: Git: Push.
Rename
F2
This can be used in several places. When you have a file selected in the explorer, F2 renames the file. If you highlight or have your cursor inside a variable, function, class name, etc., it lets you rename it and updates any references.
Refactor
ctrl+shift+r
This acts in several different ways based off what you have highlighted, but my favorite is for extracting code to a new method. Simply highlight code you want to extract, type ctrl+shift+r, give it a new method name, and it creates a new method along with any needed parameters.
Extensions
The power of VS Code comes from it's extensions. Extensions are published to the marketplace, and can be downloaded from there, or an even easier way is to open the extensions tab in VS Code and view/download from there. There's also a shortcut to open it: ctrl+shift+x
Angular Essentials by John Papa
This is a collection of extensions, and always the first one I install. It contains some extensions that truly are essential for any Angular developer.
Angular Language Service by Angular
This is part of the Angular Essentials pack, but it is worth noting as its features are hard to live without. This gives a lot of features for html templates, like intellisense for component variables, and a 'go to definition' feature for functions.
Angular Console by nrwl
Another extension in John Papa's pack, the Angular Console gives a graphical interface for all of the commands provided by the Angular CLI. It is also a great way to learn all the options for each of the commands. As you fill out the options you want, it'll show you the command that you would need to run if you were to run it in the terminal.
Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets by Ashok Koyi
Only helpful if you use Bootstrap and/or Font Awesome, but this gives you a ton of snippets for scaffolding out html. Start typing b4 for the bootstrap snippets, and fa4 or fa5 for the font awesome snippets.
Git History by Don Jayamanne
This is a great tool for seeing the git log as a graph, viewing file history, and comparing commits and branches.