Using LLMs for efficient learning
As your projects grow and involve multiple files, mastering IDE navigation becomes essential for efficient coding. Learning to quickly jump between files, find function definitions, and search for references across your codebase will save you significant time and reduce frustration. These navigation skills allow you to understand how different parts of your code connect, making it easier to debug issues, refactor code, and maintain a clear mental model of your project's structure. Without proper navigation skills, working with multiple files can quickly become overwhelming and slow down your development process.
"Go to definition" is a powerful IDE feature that allows developers to instantly navigate to where a function or variable is originally defined. By simply clicking on a reference (while holding Ctrl on Windows or Cmd on Mac), you can jump directly to the place where that element was created, regardless of which file it's in. Let’s see an example video of how it works in a big project. Don’t worry, you do not need to understand the code:
https://www.youtube.com/watch?v=RlcOqPxAgSU
<aside> ❗
You may end up in JavaScript's base library code. For example, if you type 'hello'.concat('world') and go to the definition of concat, you'll jump to the library source. Don't edit anything there as it can cause strange bugs.
</aside>
If you want to go the other way and see all of the places that a function or variable is being used, then you will want to use the ‘go to references' (Shift+F12) functionality. ‘Go to references’ will list all of the places in the codebase where that function or variable is being used. This is really useful to see the impact of the change you are making or even see if some code is not needed any more. For quick lookups you can use ‘go to references’, if you want to go through it more detailed you can use the ‘find all references’ functionality (Option+Shift+F12 on Mac, Alt+Shift+F12 on Windows). Have a look at it in action here:
https://www.youtube.com/watch?v=VV-fPVHoIZQ
VSCode provides powerful search capabilities to help you find content across your entire project. The basic search function (Cmd+F on Mac, Ctrl+F on Windows) allows you to search within the current file, while the global search (Cmd+Shift+F on Mac, Ctrl+Shift+F on Windows) lets you search across all files in your workspace. If you are looking for more The search panel also supports case-sensitive searches and whole word matching, making it easy to find exactly what you're looking for in large codebases. You can even right click on a folder and select ‘Find in folder’ to only search within that folder:
https://www.youtube.com/watch?v=TdwM9X_H0rs
The "Go to File" feature (Cmd+P on Mac, Ctrl+P on Windows) is one of the fastest ways to navigate between files in VSCode. Instead of clicking through folders in the sidebar, you can simply start typing the name of any file in your project and VSCode will instantly show matching results. This fuzzy search is intelligent enough to match partial names and abbreviations, so typing "strfn" could find "string-functions.js".
<aside> ⌨️
Try this one out yourself, create a new project and make a couple of files with different names. Then use the Go to File feature and navigate between them using just the keyboard
</aside>
These are the first shortcuts we would like you to get used to as they form the basis for navigating around projects. Try to make it a habit to use these so that they become second nature. In the upcoming weeks we will be introducing more and more of these useful functionalities and our brains can only learn so many at once. We also hope you have noticed that VS code is also kind enough to show shortcuts next to the menu items that have shortcuts. Whenever you are clicking a menu item with a shortcut, remind yourself to use that shortcut next time as it will help make navigation second nature.
| Command Mac | Command Windows | Description |
|---|---|---|
F12 / Cmd+click |
F12 / Ctrl+click |
Go to the definition of the function or variable you have selected/clicked on |
Shift+F12 |
Shift+F12 |
Shows all the references to that function or variable in a popup window |
Option+Shift+F12 |
Alt+Shift+F12 |
Shows all the references to that function or variable in a sidebar that can be clicked through |
Cmd+F |
Ctrl+F |
Search for text in the current file |
Cmd+Shift+F |
Ctrl+Shift+F |
Search for something in the whole project |
Cmd+P |
Ctrl+P |
Find a file within the whole project |
The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0 **