26

I wanted to be able to easily edit HTML tags together. It seemed to me like this is such an easy thing to implement nowadays, so I've installed this auto-rename-tag extension, and it turned out to be not useful for me: instead of helping me in html/jsx code editing, it breaks everything and I have to undo what it does and try to edit the thing to avoid triggering it.

The logical thing here would obviously be to remove this extension from my system. The only problem here, however, is that I can't seem to do that - I've uninstalled it, even reinstalled VS Code, tried VS Code Insiders, but here it is, still enabled:

in action

Is it built-in now? How do I disable it?

VSCode version: 1.41.0, commit 9579eda04fdb3a9bba2750f15193e5fafe16b959

Gino Mempin
  • 25,369
  • 29
  • 96
  • 135
comonadd
  • 1,822
  • 1
  • 13
  • 23
  • HTML Rename tags is a different feature from the mirror cursor, see https://stackoverflow.com/questions/36628833/select-matching-element-rename-html-tag-in-visual-studio-code/59221721#59221721 – Mark Dec 20 '19 at 02:20
  • Yes, the HTML Rename is a different feature. But the HTML Mirror Cursor is similar to the functionality provided by the [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) extension, which edits both start and end HTML tags if you place your cursor on them. – Gino Mempin Jan 09 '20 at 00:37

2 Answers2

47

It has become a built-in feature, separate from the Auto Rename Tag extension. If you don't like it, you can disable it depending on which version you've got installed.

Update for 1.52+

The setting has now been renamed to Linked Editing:

The On Type Rename feature for editing a tag when its matching closing tag is modified is now called linked editing. The command to enable linked editing is Start Linked Editing (⇧⌘F2) and Escape disables linked editing mode.

The setting to enable/disable it is now:

"editor.linkedEditing": true

Or from the UI:

Settings > Linked Editing

Update for 1.44+

They changed the mirror cursor feature and are now calling it Synced Regions.

enter image description here
(copied from the VS Code 1.44 release notes)

When activated on HTML tags, if both start and end tags become "synced", then changing one also changes the other. The feature is disabled by default though, and either you explicitly execute the On Type Rename Symbol command or set the editor.renameOnType setting to true.

With this change, the html.mirrorCursorOnMatchingTag introduced in 1.41 will now show up as deprecated (or grayed-out).

enter image description here

Update for 1.42+

The html.mirrorCursorOnMatchingTag is now disabled by default starting in 1.42.
See this other answer for the quotation from the release notes.

Original Answer for 1.41

It's now a built-in feature starting 1.41.

HTML mirror cursor
https://code.visualstudio.com/updates/v1_41#_html-mirror-cursor

VS Code now adds a "mirror cursor" when you are editing HTML tags. This behavior is controlled by the setting html.mirrorCursorOnMatchingTag, which is on by default.

This feature works by adding a multi-cursor to the matching tag when your cursor moves into an HTML tag name range. Just like in multi-cursor mode, you can use word-wise deletion or word-wise selection. The mirrored cursor is removed when you move your cursor outside the tag name range.

Basically, selecting either the tag start or the tag end puts 2 cursors on each, so editing one also edits the other. It is enabled by default.

You can explicitly disable it from your settings.

Via UI:

enter image description here

Via settings.json:

"html.mirrorCursorOnMatchingTag": false,
Gino Mempin
  • 25,369
  • 29
  • 96
  • 135
  • 16
    I found this feature is very buggy and corrupt HTML on copy/paste operations. I leave this comment here because Code developers prevent to create Issues on their site :( P.S. It seems html.mirrorCursorOnMatchingTag = false helps – KoViMa Dec 20 '19 at 09:13
  • 10
    This feature is incredibly buggy, arbitrarily changing content in other tags and deleting large swathes of content when I edit tag attributes. It should never have gone out in this state. Things like this risk ruining a good editor, when they start bloating it with half-baked and ill-tested features when it was working fine before. – Garret Wilson Jan 04 '20 at 15:17
  • 6
    I agree with KoViMa and @Garret Wilson that implementing this feature by default calls into question the judgement of the Code dev team. Expess yourself about it at this MS monitored thread: https://github.com/microsoft/vscode/issues/87737 – VanAlbert Jan 09 '20 at 19:56
  • 1
    @VanAlbert, thanks; I have [commented](https://github.com/microsoft/vscode/issues/87737#issuecomment-573046065) on the issue. – Garret Wilson Jan 10 '20 at 14:02
  • Does this work with `.vue` files or any other custom file types that have HTML/XML in it? Can't seem to get it to work. – Jack Jul 15 '20 at 21:54
  • @Jack Are you referring to the Synced Regions feature or the Auto Rename Tag extension? For VS Code's Synced Regions, it works well on my .vue files, with `editor.renameOnType` set to `true`. With the Auto Rename Tag, try checking the `auto-rename-tag.activationOnLanguage` setting. Other than that, I don't know, the issue here was actually how to turn it off. – Gino Mempin Jul 15 '20 at 23:39
  • @GinoMempin The auto rename tag extension works. I got a pop up saying VSCode supports tag renames now so uninstalled the extension and set renameOnType to true but it didn't work. Is the new vscode setting supposed to replace the third party extension? – Jack Jul 16 '20 at 01:18
  • @Jack OK, on my env, I still have the Auto Rename Tag installed, and I think that's why I thought it was working for .vue files. Yes, it does not seem to work on its own, and I don't know about the goals for this feature. I think it's best you ask a *separate question*, because my answer and the question itself is about *turning this feature off*, rather than making it work. – Gino Mempin Jul 16 '20 at 01:37
  • 1
    none of the above works, it is called Linked Editing now https://roboleary.net/vscode/2020/08/05/dont-need-extensions.html – angularrocks.com Mar 30 '21 at 07:22
3

See https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_42.md#html-mirror-cursor-off-by-default with v1.42 due out early February, 2020.

HTML Mirror Cursor off by default

We have made Mirror Cursor an opt-in feature. In the upcoming iteration, we'll continue to improve its implementation to make this feature more easily understandable and available to more languages. You can still use this feature by turning on html.mirrorCursorOnMatchingTag.

----- Update March 2020 ----------

The vscode devs have heard you. The mirror cursor functionality is being substantially modified. You can test it in the Insiders' Build now so perhaps it'll get into v1.44 or soon thereafter.

Especially pasting into a tag has been much improved. And no dual cursors. See https://github.com/microsoft/vscode/issues/88424#issuecomment-600840619

And release notes: https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_44.md#synced-regions It is in v1.44.

Mark
  • 143,421
  • 24
  • 428
  • 436