Skip to content

[html] provide (auto) rename of tags #47069

Closed
Closed
[html] provide (auto) rename of tags#47069
Assignees
octref
Labels
feature-requestRequest for new features or functionalityhtmlHTML support issueson-testplan
Milestone
November 2019

Description

@Ahmed-Hussein-Karam
Ahmed-Hussein-Karam
opened on Apr 2, 2018
  • 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

Activity

  1. vscodebot commented on Apr 2, 2018

    @vscodebot
    vscodebotbot
    on Apr 2, 2018

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

  2. roblourens
    added
    feature-requestRequest for new features or functionality
    on Apr 2, 2018
  3. roblourens
    assigned
    Martin Aeschlimann (aeschli)
    on Apr 2, 2018

  4. roblourens commented on Apr 2, 2018

    @roblourens
    roblourens
    on Apr 2, 2018
    Member

    You could probably write an extension to do this

  5. Ahmed-Hussein-Karam commented on Apr 2, 2018

    @Ahmed-Hussein-Karam
    Ahmed-Hussein-Karam
    on Apr 2, 2018
    Author

    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).

  6. Martin Aeschlimann (aeschli)
    changed the title [-]Automatic modification of tag end when the start tag is modified, and vice versa[/-] [+][html] provide (auto) rename of tags[/+] on Apr 3, 2018
  7. Martin Aeschlimann (aeschli)
    added
    htmlHTML support issues
    on Apr 3, 2018
  8. Martin Aeschlimann (aeschli)
    added this to the Backlog milestone on Apr 3, 2018

  9. aeschli commented on Apr 3, 2018

    @aeschli
    Martin Aeschlimann (aeschli)
    on Apr 3, 2018
    Contributor

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

  10. michaeljota commented on Apr 30, 2018

    @michaeljota
    Michael De Abreu (michaeljota)
    on 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.

  11. otijhuis commented on Jul 9, 2018

    @otijhuis
    Okke Tijhuis (otijhuis)
    on 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.

  12. grantnorwood commented on Jul 30, 2018

    @grantnorwood
    Grant Norwood (grantnorwood)
    on 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.

  13. shankarsridhar commented on Aug 25, 2018

    @shankarsridhar
    Shankar Sridhar (shankarsridhar)
    on 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.

  14. SCPCOEXR commented on Aug 31, 2018

    @SCPCOEXR
    SCPCOEXR
    on Aug 31, 2018

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

  15. hassanbinsafdar commented on Nov 10, 2018

    @hassanbinsafdar
    hassanbinsafdar
    on Nov 10, 2018

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

  16. 28 remaining items

  17. ultraGentle commented on Nov 23, 2019

    @ultraGentle
    ultraGentle
    on Nov 23, 2019
    Contributor

    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

  18. octref commented on Nov 25, 2019

    @octref
    Pine (octref)
    on Nov 25, 2019
    Contributor

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

  19. ultraGentle commented on Nov 25, 2019

    @ultraGentle
    ultraGentle
    on Nov 25, 2019
    Contributor

    Yes! Works like a charm. Much obliged.

  20. fbricon commented on Nov 29, 2019

    @fbricon
    Fred Bricon (fbricon)
    on Nov 29, 2019
    Contributor

    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)

  21. Martin Aeschlimann (aeschli)
    assigned
    Pine (octref)
    and unassigned
    Martin Aeschlimann (aeschli)
    on Dec 5, 2019
  22. Pine (octref)
    added 2 commits that reference this issue on Dec 6, 2019

    HTML mirror cursor for microsoft/vscode#47069

    2d1f0de

    HTML rename for microsoft/vscode#47069

    45ebac1

  23. AndrePu commented on Dec 19, 2019

    @AndrePu
    Black_Cat33 (AndrePu)
    on Dec 19, 2019

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

    image

  24. octref commented on Dec 19, 2019

    @octref
    Pine (octref)
    on Dec 19, 2019
    Contributor

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

  25. xorye commented on Dec 20, 2019

    @xorye
    xorye
    on 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.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.

    Pine (@octref) What do you think about this implementation?

  26. vscodebot
    locked and limited conversation to collaborators on Jan 8, 2020
  27. microsoft
    unlocked this conversation on Jan 8, 2020

  28. octref commented on Jan 8, 2020

    @octref
    Pine (octref)
    on Jan 8, 2020
    Contributor

    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.

  29. vscodebot
    locked and limited conversation to collaborators on Jan 14, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

feature-requestRequest for new features or functionalityhtmlHTML support issueson-testplan

Type

No type

Projects

No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions