Jump to Closing tag in VS Code?

Question

I can't seem to find a way to select the beginning of a bracket and jump to the end of it through some key combination or something in VS Code. For example, in atom, this is done with Ctrl + m.

I know there is a way to jump to the beginning and end of a bracket or curlybraces with Cmd + Shift + \ but that does not work for tags. Any ideas?

Nothing to add to the other answers but I personally prefer `alt+>` because it's kind of related to the angle brackets in tags. But notice, to assign this keybinding, you have to use dot (`.`) instead of `>`, at least these are on the same key on my keyboard. (Also the `alt` key might be called something else such as `meta` in other non-Windows OSs) — aderchox, Sep 21 '20 at 05:25

score 122 · Accepted Answer · edited Jun 09 '18 at 16:02

122

It is possible to do, but either using Ctrl + Shift + P -> "Emmet: Go to Matching Pair" or by manually setting a shortcut for it (Ctrl + K Ctrl + S).

Unfortunately there is currently no support for it out of the box.

edited Jun 09 '18 at 16:02

Eduardo Cuomo

17,828
6
117
94

answered Apr 16 '17 at 18:52

Jakub Jurkian

1,346
1
9
5

1

What could be generic format for custom shortcut key in VS code – Code Mar 10 '18 at 15:38
FWIW, I set mine to cmd-; – Steve Mar 08 '21 at 18:54
How do I know what key combinations are available for binding without overwriting any existing bindings? Edit: Oh, nvm. It tells you if it's taken after you type it in. – Kevin Wheeler Nov 02 '22 at 00:13

f1lt3r · Answer 2 · 2018-08-31T15:57:14.773

59

You can use Cmd + % to jump tags in VSCode if you add the following to your keybindings.json.

{
    "key":"cmd+shift+5",
    "command": "editor.emmet.action.matchTag"
}

Go to: File > Preferences > Keyboard Shortcuts and click the underlined link to edit keybindings.json.

For those using VIM keys: you are already used to pressing % to jump to matching parens and tags. So, hopefully, Cmd + % will be close enough to your existing muscle memory to make this transition painless.

edited Aug 31 '18 at 15:57

answered Apr 05 '18 at 20:40

f1lt3r

2,176
22
26

Lol, you're downvoting my answer for that? What you are seeing is a limitation of the VIM plugin you're using. (Try running the emmet command manually.) It was never a requirement in the question to have it working in visual mode for a specific VIM plugin. – f1lt3r Jun 14 '18 at 13:35
2

A big thumbs up for the thought behind maintaining backward compatibility to VIM based matching – Anshuman Manral Oct 02 '18 at 19:07
2

I don't know if it's because I have a newer version, but it wasn't working. I had to wrote: { "key": "ctrl+shift+5", "command": "editor.emmet.action.matchTag", "when": "editorTextFocus" } – Francois Girard Dec 18 '18 at 18:50
3

`ctrl+shift+5` splits the terminal when that's focused. I use `alt+[` for tag matching. – Cees Timmerman May 10 '19 at 13:23
Is there any support for this now? none of these work for me. using @FrancoisGirard solution. would being in a php/vue file affect this at all...? – Pwntastic Mar 20 '20 at 20:38
1

Note there's a bug which prevents this from working if the file contains certain characters https://github.com/microsoft/vscode/issues/99896 – Oliver Joseph Ash Jul 08 '20 at 11:45
1

I added the line inside the braces: `"when": "editorFocus"`. So, you can use it along with the terminal splits keybinding. – nav Aug 06 '20 at 11:39
1

Note: on a Mac, `cmd+shift+5` triggers screen capturing. – Oliver Joseph Ash Jul 07 '21 at 13:31

score 14 · Answer 3 · answered Apr 14 '19 at 21:12

14

For those who are using Vim plugin and Mac, Leader+% is working well for me.

You can setup in your Vim json file setting.json by adding:

"vim.normalModeKeyBindingsNonRecursive": [
    {
      "before": ["<leader>", "%"],
      "commands": [
        {
          "command": "editor.emmet.action.matchTag"
        }
      ]
    }
]

PS. I mentioned Mac user because cmd+shift+5 is for capturing the screen in Mac.

answered Apr 14 '19 at 21:12

FFEVER

178
2
9

What is `Leader`? (I use Vim and Mac) – User May 06 '22 at 05:49
Ok googled it - though using only `%` is working fine for me. – User May 06 '22 at 05:58
Can you get this working in visual mode as well? I added the binding to `visualModeKeyBindings`, but with no luck. I want to be able to select a whole block of HTML from starting to closing tag with `shift + V` to select line where the starting tag is and then `leader + %` to select to the closing tag line. – Ian Jamieson Jul 26 '22 at 08:55

score 6 · Answer 4 · edited Jul 05 '21 at 16:20

6

I think you are asking about Breadcrumb Keyboard Navigation

In this case you can simply press Ctrl+Shift+. to go to elements before or after the current element.

edited Jul 05 '21 at 16:20

KyleMit

30,350
66
462
664

answered Feb 12 '21 at 14:06

Optimaz Prime

857
10
11

It behaves weird: when I want to stay there in the markup and place the cursor - it throws me back instantly to the end tag :( – Alexander Sep 07 '22 at 20:32

score 5 · Answer 5 · edited May 26 '20 at 13:04

5

You can jump to the matching bracket with Ctrl+Shift+\

For more reference, you can refer: Visual Studio Code Navigation

edited May 26 '20 at 13:04

RobC

22,977
20
73
80

answered May 25 '20 at 06:53

Shirish Dhotre

145
1
4

score 4 · Answer 6 · answered Nov 22 '18 at 12:57

There is no support for this out of the box. Though if you are willing to use extensions, there is: https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag which among other things, gives you ability to use command: Jump to matching tag which you can bind to a key.

Jump to Closing tag in VS Code?

6 Answers6

Linked