As a software engineer, there are times you'll walk into a codebase that is already established and is some combination of: (a) new to you (b) much larger/more complex than other projects you've worked on and (c) uses a structure and some core libraries that are new to you. OR you're a mutant genius, in which case no need to read on (but I would like to know more).
Having the "mind of a programmer" and being able to recognize patterns and connections will help, and so will pair programming and documentation. But personally, some of my favorite strategies are tools and shortcuts that I've picked up to use VSCode to help me work smarter without always having to do either of those.
Image credit: Giphy
These five VSCode tools and shortcuts are ones that I use every day (if not every hour):
5. Search by file content
This is probably cheating, it's not really a hidden feature. But SEARCH! If that search bar on the left isn't your friend already, you're missing out. This search bar searches file contents. Remember the name of a function or variable but not what files it was used in? Looking to see if a function or variable exists elsewhere? Trying to make sure you removed all your //TODO comments and console.log() statements before you push? Yeah, search is my jam.
4. Search by file name
Cmd+p search (Windows: Ctrl+p)
Similar to the search on the left, but different in one key way: This search bar searches by file NAME! I spent way too long not knowing about this second search bar.
3. Search for settings
Cmd+shift+p (Windows: Ctrl+shift+p)
This one is just ::chef kiss::. I can't tell you how frequently I want to do something like toggle word wrap, reload the window, etc. Instead of remembering the hot keys for all of those settings, you can open up this search bar and quickly find the setting you need.
2. Go to definition
Cmd + click (Windows: ctrl+click)
Use this one on any variable, function, namespace, model... anything that was defined somewhere else. VSCode will open up wherever it was defined in a new tab for you. Boom.
1. Go to references
Right click, choose "go to references"
Similar to "Go to definition", but I think this one is a level up. Go to references will show you everywhere in the codebase whatever you're looking at is referenced. This is great for seeing where a function might be in use before you modify it, for instance. I have learned so much about new codebases by browsing with "Go to references".
Additional Resources
Some other tools I use daily:
- Prettier Code Formatter - Automatically tidies up your formatting.
- Bracket Pair Colorizer - Never miss your closing bracket again. (I'm actually realizing I never loaded this on my work setup 😱, but I use it at home.)
- Git Lens - I love this one for knowing who's worked on different parts of the code base and when!
- OhMyZsh - Makes working in the terminal 10000x less intimidating (and faster!)
Top comments (8)
One of my most used shortcuts is: Ctrl + p and then type @ to get list of symbols in the file.
The best way to navigate across methods/classes in a file.
That's a new one for me, definitely will put it to use.
Wow .. didn't know ctrl+click was that powerful 😯😯
It's such a great tool!
Any of you guys create your own templates?
Really cool when you create your class file and then use your filename to create the classes structure...?
Any other cool templates you create?
I haven't explored doing that personally. Tell me more!
Good article! Short, focused, and well-written. Thanks for sharing!
Thank you