1

In Visual Studio Code when the cursor is on a TSX tag I would like to be able to jump to the closing tag, as that might be quite a bit away from the start tag:

<MyComponent
  prop1="someValue"
  prop2={someOtherValue}
>
  <OtherComponent1 />

  {/* Some other code, many more lines...  */}

</MyComponent>

So how can I jump to </MyComponent> when the cursor is within the first 4 lines of <MyComponent> and vice versa?

I already stumbled across this SO question, but Ctrl + Shift + P --> "Emmet: Go to Matching Pair" does not work. Searching the Marketplace for an appropriate VS Code Extension also revealed no result.

Is it possible at all?

Edit: Changed <MyComponent> to not be self-closing anymore.

Tobias
  • 2,089
  • 2
  • 26
  • 51
  • There are extensions which highlight matching tags, I would go in this direction and forking it to create own extension. Or just use/learn VIM. – Dennis Vash Dec 14 '21 at 13:57
  • Before learning VIM, I'd rather learn a language that doesn't require . – Tobias Dec 14 '21 at 17:27

2 Answers2

4

In the example code the tag MyComponent is self-closing due to the forward slash on line 4. The Emmet command therefore remains on this tag rather than moving to line 8 as you are expecting.

Updated code snippet without the MyComponent tag being self-closing:

<MyComponent
  prop1="someValue"
  prop2={someOtherValue}
>
  <OtherComponent1 />

  {/* Some other code, many more lines...  */}

</MyComponent>

With this updated example CTRL + SHIFT + P then "Emmet: Go to Matching Pair" works correctly.

As suggested in the post you linked you can then add a keybinding for the command editor.emmet.action.matchTag.

Chris C
  • 1,662
  • 1
  • 15
  • 17
  • Nice spotting!! I wondered why the emmet command wouldn't work. – Mark Dec 15 '21 at 22:17
  • @ChrisC You're absolutely right. Now I'm completely puzzled! In my production code, the `` tag was not self-closing, that was acutally a mistake I made when typing the sample code in my question. The "Go to matching pair" emmet never worked for me. But right now when I tried it again after reading your answer, it did work like a charm! Don't know what was wrong with my VS Code... Maybe some misbehaving extension... – Tobias Dec 16 '21 at 07:15
0

With the extension multi-command make a sequence of

  • Emmet: Balance outward
  • Arrow Right
rioV8
  • 24,506
  • 3
  • 32
  • 49
  • Not quite what I was looking for - this solution would require two key bindings, one for the closing and one for the opening tag - but a nice workaround. Thanks. – Tobias Dec 14 '21 at 17:24