VSCode keybinding to navigate to render method - reactjs

Question

so I am using VSCode for react development and I was wondering if I could jump to the render function with a shortcut. Naturally there is no preconfigured way. So I looked into it and found a GitHub issue.
{
"key": "shift+alt+p",
"command": "workbench.action.quickOpen",
"args": "#:render"
},
Problem is, that the shortcut opens up the vscode window. Which is prefilled and I have to press the enter button to do the actual "navigate to". Does anyone know how to do this without pushing enter?

Answer 1

I think the only way is to use a macro to run both the quickOpen command and selecting with one keystroke.
Using a macro extension like multi-command, put this into your settings:
"multiCommand.commands": [
{
"command": "multiCommand.goToRender",
"sequence": [
{
"command": "workbench.action.quickOpen",
"args": "#:render"
},
"workbench.action.acceptSelectedQuickOpenItem"
]
}
]
and some keybinding to trigger that macro (in your keybindings.json):
{
"key": "shift+alt+p",
"command": "extension.multiCommand.execute",
"args": { "command": "multiCommand.goToRender" },
"when": "editorTextFocus"
}
Of course, if you have multiple render objects the first will be selected and navigated to.
An alternative is to use the selectBy extension which you could configure to jump to the next or previous occurrence of the word render. The extension can move to occurrences of words (and not select anything). In your settings:
"selectby.regexes": {
"goToRender": {
"moveby": "render",
}
}
And some keybindings (whatever bindings you want):
{
"key": "shift+alt+p", // go up to the previous `render`
"when": "editorTextFocus",
"command": "moveby.regex",
"args": ["goToRender", "moveby", "prev", "start"]
},
{
"key": "alt+p", // go to the next `render`
"when": "editorTextFocus",
"command": "moveby.regex",
"args": ["goToRender", "moveby", "next", "start"]
},