DEV Community

Teal Larson
Teal Larson

Posted on

5 VSCode Features I Use Daily as a Full Stack Engineer

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.

Grease GIFImage 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.

Search bar

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.

Search by filename

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.

settings search

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.
Go to definition

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".
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 (9)

r_levkovych profile image
Roma Levkovych

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.

teallarson profile image
Teal Larson

That's a new one for me, definitely will put it to use.

ayushranjan6456 profile image
Ayush Ranjan

Wow .. didn't know ctrl+click was that powerful 😯😯

teallarson profile image
Teal Larson

It's such a great tool!

emile profile image

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?

teallarson profile image
Teal Larson

I haven't explored doing that personally. Tell me more!

cariehl profile image
Cooper Riehl

Good article! Short, focused, and well-written. Thanks for sharing!

teallarson profile image
Teal Larson

Thank you