Repository navigation
[html] provide (auto) rename of tags #47069
Description
- 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:
- Disable all visual studio code extensions
- Create element: <div>Hello</div>
- Modify tag start: <label>Hello</div>
- 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:
- Make it easier to avoid typos, especially in XHTML/XML when we modify a custom tag where auto-complete is not available
- Avoid scrolling to tag end when element content is very large
Activity
vscodebot commentedon Apr 2, 2018
(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:
roblourens commentedon Apr 2, 2018
You could probably write an extension to do this
Ahmed-Hussein-Karam commentedon Apr 2, 2018
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).
[-]Automatic modification of tag end when the start tag is modified, and vice versa[/-][+][html] provide (auto) rename of tags[/+]aeschli commentedon Apr 3, 2018
The extension for this is:
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
michaeljota commentedon Apr 30, 2018
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 commentedon Jul 9, 2018
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 commentedon Jul 30, 2018
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 commentedon Aug 25, 2018
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 commentedon Aug 31, 2018
I agree with Shankar Sridhar (@shankarsridhar)
Also tag wrapping should be apart of the core of VS Code.
hassanbinsafdar commentedon Nov 10, 2018
All comments i read exactly my thoughts what i wanted so i am with you guys yes we need this feature.
28 remaining items
ultraGentle commentedon Nov 23, 2019
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.autoSelectingMatchingTagssetting 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 commentedon Nov 25, 2019
ultraGentle Try today's insiders should have it. Give it a try.
ultraGentle commentedon Nov 25, 2019
Yes! Works like a charm. Much obliged.
fbricon commentedon Nov 29, 2019
Pine (@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)
HTML mirror cursor for microsoft/vscode#47069
HTML rename for microsoft/vscode#47069
AndrePu commentedon Dec 19, 2019
It doesn't look good for xaml code. How can I disable it?
octref commentedon Dec 19, 2019
Black_Cat33 (@AndrePu) xaml support is implemented by vscode-xml extension, so open an issue there.
xorye commentedon Dec 20, 2019
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.onDidChangeActiveTextEditorandvscode.window.onDidChangeTextEditorSelectionlisteners 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 inupdateCursors())The structure of the code is a bit different:
When
html.mirrorCursorOnMatchingTagis turned on, an instance ofMirrorCursorsis responsible for managing an instance ofCursorUpdaterandCursorUpdateris responsible for updating the cursor(s) in an html/handlebars file.When
html.mirrorCursorOnMatchingTagis turned off, theMirrorCursorandCursorUpdaterinstances are "thrown away" and its listeners are disposed of.Pine (@octref) What do you think about this implementation?
octref commentedon Jan 8, 2020
I think that's ok. Most of the corner-case handling is in
mirrorCursor.tsso you want to update it from time to time.