How to navigate to child components in Functional React with VSCode?

Question

For a project with relatively large (Functional) React components I would like to improve my (keyboard) navigation skills through the code base, using VSCode.

What I notice is that for React Components the usual "Go To Definition" functionality is only a first step. Navigating to a component with F12 is that first step, but navigating to the child components is a step I cannot find.

Question(s)

Is there a keyboard shortcut (in VSCode) to jump from the name of a Functional Component to the return-statement? Even better, is there a shortcut to list all composed child component of a given component?

What I want to do

The outcome of this question, I hope, is the ability to

• Jump to a component definition with F12
• Jump to the return statement of the (functional) component
• Pick a child of the return statement that I want to see next
• Move the cursor down and press F12 again.

What I no longer want to do is to

• Use F12 to jump to a Component definition
• Scroll down for a long time to the return statement of a very long component
• etc...

My own (invalid) attempts

I have tried a textual search for "return", but this doesn't work. The larger components have many handler functions which all use return statements, so a textual search doesn't get me to the component's return in one go.

I have also tried the breadcrumbs functionality to see how VSCode interprets the Functional Components, but in there the return statemtent was not listed, shamefully.

Answer 1

Using Vim, a sloppy solution is to search for "return" from the end of the file. So, F12 to jump to a component name, followed by G?return in Normal mode.

A slightly less sloppy solution is to use Vim marks. I'll mark a return-statement or render function with mr and jump to it with 'r . This works fine as long as I remember to mark a return statement whenever I come across one.

I'd still like to see a more solid answer to this, though, so I'm hoping someone will respond with their workflow.