Is there a way or plugin to display the references on top of a method declarations in VsCode with Dart code? Something similar to Visual Studio reference display?
Is there a way or plugin to display the references on top of a method declarations in VsCode with Dart code? Something similar to Visual Studio reference display?
2
Answers
In Visual Studio Code (VSCode), while there isn’t a built-in feature exactly like Visual Studio’s "reference display" above method declarations, you can still achieve something similar using a few tools and techniques. Here’s how you can manage references and make navigation smoother in your Dart code:
First, make sure you have the Dart and Flutter extensions installed in VSCode. These extensions give you powerful features like code navigation and refactoring tools, which are essential for working with Dart code.
How to use it:
After installing the Dart extension (and Flutter if you’re working with Flutter), you can easily find references to methods and classes. Just right-click on any method or class name, and select Go to References or press Shift + F12. This will open a panel showing where the method or class is referenced across your project.
However, it doesn’t show the references above the method declaration in the same way Visual Studio does. You’ll need to look at a side panel or the hover information to see the references.
VSCode also has a feature called Peek References that gives you a quick, inline view of all references in the code, without leaving your current view.
How to use it:
Right-click on a method name and choose Peek → Peek References, or use the shortcut Alt + F12. This opens a small window at the bottom of your current editor, where all references are shown right next to the code you’re working on.
It’s like a quick peek into all the places where your method is being used, without navigating away from the current file.
If you’re looking for more control over finding references, you can always search for them manually.
How to do it:
Select the method or class you want to track, and press Shift + F12 to see all references of that item across your project. This will show a list of places in your code where the method or variable is used. It’s not as automatic as seeing it directly above the method, but it’s a great way to gather all references in one go.
4. Dart Code Metrics (Extra Features)
For additional insights into your code’s quality and structure, you can install the Dart Code Metrics extension. It won’t show references above your method declarations, but it will provide a lot of helpful code analysis.
How to use it:
Install the Dart Code Metrics extension from the Extensions marketplace. It provides things like code complexity and other metrics, which can help you manage your codebase more effectively.
5. GitLens for Version Control
If you’re working with Git, the GitLens extension gives you a detailed history of your code, including reference tracking, so you can see changes over time.
How to use it:
GitLens doesn’t show references directly above methods but provides insights into the history of a function or class. This is especially useful if you’re working in a team and need to track where things have been used and changed across different versions.
As far as I remember there is a similar thing in the official Dart Code or Dart extension, enable the
editor.codeLens
option