Bind a command to go to a specific symbol in VS Code - visual-studio-code

Question

My issue:
I would like to bind a few keyboard shortcuts to navigate to specific symbols in my currently open file within VS Code.
Example:
I want to navigate to the symbol <template> by pressing cmd+1.
I want to navigate to the symbol <script> by pressing cmd+2.
I want to navigate to the symbol <style> by pressing cmd+3.
By default, you can do that by pressing cmd+p and then in the palette typing #template which will jump to the template tag within the open file.
So a solution might look something like this in my keybinding.json:
{
"key": "cmd+1",
"command": "workbench.action.gotoSymbol",
"args": ["#template"],
}
However, the args part of this does not work. I'm wondering if anyone knows a good solution for setting up key bindings like this so I can navigate around my files with shortcuts.
Thanks in advance!

Answer 1

Try this:
{
"key": "cmd+1",
"command": "workbench.action.quickOpen",
"args": "#<template>",
},
The command workbench.action.gotoSymbol won't take an argument, but workbench.action.quickOpen will. I don't know why there is that difference, but as you know if you start the Quick Open Panel with # you get object references. And the rest of your text <template> for example will automatically be entered into the input box.
It will filter for those symbols but will not jump to the first one. If you want that additional functionality, you would have to consider a macro which would select the first entry.
There is an alternative that allows you to navigate to anything by using a matching regex. See the extension Select By which allows to jump to any string. For example (in settings.json):
"selectby.regexes": {
"goTo<template>": {
"moveby": "<template>",
}
}
and your keybinding (keybindings.json):
{
"key": "ctrl+1", // <template>`
"command": "moveby.regex",
"args": ["go<template>", "moveby", "next", "start", "wrap"],
// "when": "editorTextFocus && editorLangId == javascriptreact"
}
You can set it up to jump to the previous instance as well:
{
"key": "ctrl+alt+1", // previous <template>
"command": "moveby.regex",
"args": ["goTo<template>", "moveby", "prev", "start", "wrap"],
// "when": "editorTextFocus && editorLangId == javascriptreact"
}
either way it should now "wrap", it just depends on how many <templates> you have in the file and which direction you want to go to first.

Answer 2

I found the solution to my problem, which is pretty funny because it's an existing extension for VS Code that does exactly what I am looking for:
https://marketplace.visualstudio.com/items?itemName=andersonmfjr.vue-jumptotag
To bind the keyboard shortcuts in keybindings.json
{
"key": "cmd+1",
"command": "extension.jumptotemplate",
},
{
"key": "cmd+2",
"command": "extension.jumptoscript",
},
{
"key": "cmd+3",
"command": "extension.jumptostyle",
},
That does exactly what I was looking for.