[html] provide (auto) rename of tags

[Ahmed-Hussein-Karam]

• VSCode Version: 1.21.1

Description:

In order to rename an HTML/XHTML/XML tag we have to modify tag start, then modify tag end.

Steps to Reproduce:

1. Disable all visual studio code extensions
2. Create element: <div>Hello</div>
3. Modify tag start: <label>Hello</div>
4. Modify tag end <label>Hello</label>

Suggestion:

I suggest that when tag start is modified, the corresponding tag end should be automatically modified and vice versa.

Benefits:

1. Make it easier to avoid typos, especially in XHTML/XML when we modify a custom tag where auto-complete is not available
2. Avoid scrolling to tag end when element content is very large

[vscodebot]

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• Closing HTML tag not highlighting in PHP files. (#38391)
• Tag style and script tag in php file do not work! (#46806)

[roblourens]

You could probably write an extension to do this

[Ahmed-Hussein-Karam]

It will be better to add it as a feature rather than an extension, especially for new users. Because when they notice the problem, they will usually think that this is a limitation in visual studio code rather than thinking about solving the issue with an extension or so. Besides, they may not even know that there are extensions on visual studio code (a user is not necessarily aware of all of the abilities of the software he uses).

[aeschli]

The extension for this is:
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

[michaeljota]

I have used several extension that does this, but I have to say that, neither works as you would expect. Sometimes they work well, sometimes they don't. I think that if VSCode have this integrated, it would deliver a better experience in a more consistent way.

[otijhuis]

I'd love to see this feature in vscode as well. While there are a few extensions, they are very unreliable. Auto Rename Tag does not work with multi-line tags and tags with dashes (like you'd use for components). So for angular development you might as well not use it at all. It's one of those webstorm features that I really miss in vscode.

[grantnorwood]

Adding an extension for every basic piece of functionality an IDE should already do (e.g., updating start/end HTML tags, or dragging/dropping text, and such) is why I don't use Atom. I'm surprised I don't have to install an Atom extension to use capital letters!

All kidding aside, this is both an obstacle for new users, and an unnecessary hurdle for developers who already use VS Code.

[shankarsridhar]

I feel like this feature is basic enough to be added to VS code.
Moreover, the extensions that I have tried works, but are buggy and unreliable.

[SCPCOEXR]

I agree with @shankarsridhar
Also tag wrapping should be apart of the core of VS Code.

[hassanbinsafdar]

All comments i read exactly my thoughts what i wanted so i am with you guys yes we need this feature.

[digeomel]

Agree with everyone else, this is so basic and annoying, it shouldn't be left to extensions.

[zzdumeng]

If you use the vim extension, you can enable surrounding and trigger stroke sequences cstt -> enter tag you want to change -> press <enter>. It will rename the tag while reserve attributes.

[leye0]

@zzdumeng 😨
It's almost faster to rename tags manually 😆

[JonathanTR]

Speaking as a vim user, this is actually incredibly quick and just what I needed. Thanks for saving me the extra package, @zzdumeng!

[gezquinndesign]

Just adding my support for this feature....

[michael-letcher]

Please add this! The extension mentioned in this ticket doesn't work properly if at all.

[El4a]

Can't believe its a YEAR and this superduper basic thing is still left wanting... The plugin mentioned indeed does not seem to work properly anymore. Can say about brackets what you will, but at least it had that.

[OogieBoogieInJSON]

Emmet has edit functions for tags. Click on your tag and using the command panel type update tag. An input box will appear and type your new tag. You can bind this to a shortcut as well. Stop being lazy 🐻

[NgxDev]

😆 @OogieBoogieInJSON this was never about being lazy, it's about being productive
Simply typing while the closing tag changes automatically to match, is faster than having to press a key combination first, and then type. And this is an action you need to do very often if you work with html :), not just a few times a day.
I think this request is more than fair, especially in lack of a good extension (existing extensions fail me when I have more than a few layers of nested tags, ending up not auto renaming the end tag or renaming the wrong end tag)

[OogieBoogieInJSON]

@MrCroft I was suggesting an alternative that already comes built in with the editor. I know, the available extensions don't work well or at all but the emmet function works perfect.

[JeanMeche]

Man, the absence of this feature is frustrating. Should be built-in !

[bmewburn]

Would it be appropriate to implement this as a rename provider (ie F2 then rename)? Or as an additional text edit when selecting a completion suggestion?

[octref]

I added F2 to rename tag. It's not as good as auto-rename, but it should help a bit.

I'll look into auto-rename.

[michaeljota]

@octref Thanks! I think this is way better than auto-rename!

[wizcas]

@octref Thank you! I love the rename feature so much! In which version will it be released?

[octref]

@wizcas You should already be able to use it in latest https://code.visualstudio.com/insiders/

[octref]

Out of consideration for performance, extension compatibility (esp Vim extension and language extensions that would use HTML document), discoverability, usability, here is what I have come down to: auto selecting the matching tag's position. You can opt-out by turning off html.autoSelectingMatchingTags.

Benefits are:

• This is just normal multi-cursor mode, so:
  • Shift + alt + left/right to do multiple selection works
  • Alt + delete to delete word, or Cmd + delete to delete line works
  • Cmd + left/right can get you to beginning/end of the line, so you can easily do line selection as well.
• Changes are emitted in one edit. That means undo/redo can remove both changes at opening/closing tags together. Currently, auto-rename-tag extension's approach wouldn't enable this.
• Auto completion of tag name works.
• Instead of letting an extension modify the file without you being aware, this offers a more easily understandable behavior, as user already understands multi-cursor.

The only two special cases, where I'm making edit to the document are:

• When you type space in <div|></div|>, the second cursor's space is removed
• When you position cursor to </div> and type a space, the space is added to the opening tag, and leave you at the opening tag position

This is to let you change attributes easily:

And finally, this should not interfere with Vim much. Enjoy that cw to change both opening and closing tag. I do notice that this functionality would interfere with Vim in some operations, as Vim tries to handle all typing and selection changes.

Multi-cursor with Cmd + Option + down should also work if you have your tags well aligned.

[octref]

Updates:

When you position cursor to and type a space, the space is added to the opening tag, and leave you at the opening tag position

This behavior was removed.

And now, ESC would temporarily remove the mirroring cursor until you move cursor again.

[ultraGentle]

Hello, excited about this feature -- however, it does not seem to exist for me, using latest insiders.

Positioning cursor within a tag (either via click or keyboard navigation), does not select matching tag, nor is typing mirrored in the matching tag.

Retried with all extensions disabled; still nothing.

There was also not html.autoSelectingMatchingTags setting shown in the settings UI.

If I'm doing something wrong, please let me know -- eager to have access to this feature and ditch the buggy rename- and highlight-matching-tag extensions!

Mac OS X 10.13.6
Version: 1.41.0-insider
Commit: a747d26
Date: 2019-11-23T11:08:24.747Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Darwin x64 17.7.0

[octref]

@ultraGentle Try today's insiders should have it. Give it a try.

[ultraGentle]

Yes! Works like a charm. Much obliged.

[fbricon]

@octref any way to expand the scope of that feature to XML tags? Or at least give some pointers on how to achieve a similar behavior for XML (See redhat-developer/vscode-xml#130)

[AndrePu]

It doesn't look good for xaml code. How can I disable it?

[octref]

@AndrePu xaml support is implemented by vscode-xml extension, so open an issue there.

[xorye]

Hi. Heavily inspired by the code in: https://github.com/microsoft/vscode/blob/master/extensions/html-language-features/client/src/mirrorCursor.ts, I made a different implementation of mirrorCursors here. This new implementation is an idea I had for a PR to vscode-xml: redhat-developer/vscode-xml#213.

The main reason for this implementation was to immediately dispose the vscode.window.onDidChangeActiveTextEditor and vscode.window.onDidChangeTextEditorSelection listeners when the html.mirrorCursorOnMatchingTag is turned off.
Another reason was to have the ability to immediately update the cursors on config toggle.

Most (if not, all) of the logic was transferred over. (ie, the logic for onDidChangeTextEditorSelection() exists in updateCursors())

The structure of the code is a bit different:
When html.mirrorCursorOnMatchingTag is turned on, an instance of MirrorCursors is responsible for managing an instance of CursorUpdater and CursorUpdater is responsible for updating the cursor(s) in an html/handlebars file.
When html.mirrorCursorOnMatchingTag is turned off, the MirrorCursor and CursorUpdater instances are "thrown away" and its listeners are disposed of.

@octref What do you think about this implementation?

[octref]

I think that's ok. Most of the corner-case handling is in mirrorCursor.ts so you want to update it from time to time.