Navigating between symbol highlights in Visual Studio Code
Learning to navigate code efficiently is always a good idea. I already wrote about navigating between edits. Now, let’s see why you might want to navigate between symbol highlights and how to do that.
Whenever a cursor is placed at a recognized symbol, VS Code will highlight all the symbol occurrences in the opened file. That’s great for visually identifying all the places the symbol is used, but also for selection and navigation.
Visual Studio Code allows you to navigate between these highlights using the Go to Next Symbol Highlight (default F7) and Go to Previous Symbol Highlight (default Shift + F7) commands.
This feature is ideal for quick, focused navigation within a single file, without the need to use search or a more complex approach. You can use it for a lot of things:
Going from where a symbol is defined or imported to where it is used
Jumping between the children of a parent class (as you will typically have the same symbol defining the inheritance)
Tracking and tracing the usage of a variable in a class, method, or function
Going between opening and closing tags in HTML or XML
Cycling through the locations of the same word in a text or Markdown document
Let’s see it in action:
Note that when you place your cursor on a variable name (or another language construct), it will highlight all its occurrences within the same scope. On the other hand, placing the cursor in a string, comment, or text document will highlight all the word occurrences in the file, as there isn’t any scope to restrict it.
For example, if a function's documentation mentions the function's name, you can jump from that documentation to the function's definition. However, the reverse is not possible; you cannot jump from the function's definition back to the documentation, unless the text occurrence was highlighted first.
—Petr