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?

CodePudding user response：

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.

CodePudding user response：

With the extension multi-command make a sequence of

• Emmet: Balance outward
• Arrow Right