GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — Suggestions for jsx attributes should include ="" · Issue #38891 · microsoft/TypeScript

Suggestions for jsx attributes should include =""  #38891

New issue
Copy link
New issue
Copy link
Closed
Closed
Suggestions for jsx attributes should include ="" #38891
Copy link
Assignees
armanio123
Labels
Awaiting More FeedbackThis means we'd like to hear from more people who would be helped by this featureThis means we'd like to hear from more people who would be helped by this featureRescheduledThis issue was previously scheduled to an earlier milestoneThis issue was previously scheduled to an earlier milestoneSuggestionAn idea for TypeScriptAn idea for TypeScript
Milestone
TypeScript 4.8.0

Description

@barclay13
Barclay (barclay13)
opened on May 20, 2020
Issue body actions

TS Template added by Matt Bierner (@mjbvz)

TypeScript Version: 3.9.4

Search Terms

  • suggest, suggestion, completions
  • snippet
  • react, jsx

In vscode the autocomplete for className just adds className in webstorm it adds className="" is there a way in vscode to get it to add the additional =""?

I'm not sure currently where the autocomplete comes from, whether it is inbuilt into vscode or comes from the React plugin I use (although it doesn't appear to be in their snippets).

https://github.com/dsznajder/vscode-es7-javascript-react-snippets

Reacted by Yan Takushevich, Merlin, Juan Araujo, maeyama, Riley Shea, Erik, Yannick Tamburrini, ngld and Daniel Ferro
Reacted by Riley Shea

Activity

  1. Kai Maetzel (kieferrm)
    assigned
    Matt Bierner (mjbvz)
    on May 22, 2020
  2. Matt Bierner (mjbvz)
    transferred this issue frommicrosoft/vscodeon Jun 2, 2020
  3. Matt Bierner (mjbvz)
    changed the title [-]REact autocomplete for className misses ="" like webstorm[/-] [+]Suggestions for jsx attributes should include ="" [/+] on Jun 2, 2020
  4. mjbvz commented on Jun 2, 2020

    @mjbvz
    Matt Bierner (mjbvz)
    on Jun 2, 2020
    Contributor
    More actions

    Potentially related to #25207

    If there is enough interest in this, we should also consider what happens when a user wants to write: className={expr ? 'a': 'b'}

  5. Matt Bierner (mjbvz)
    removed their assignment
    on Jun 2, 2020
  6. barclay13 commented on Jun 2, 2020

    @barclay13
    Barclay (barclay13)
    on Jun 2, 2020
    Author
    More actions

    Matt Bierner (@mjbvz) webstorm/pycharm etc... has an option for completion on jsx attributes to be braces, quotes, none or based on type. Based on type defaults to className using quotes and the others using \{}. Which works pretty well.
    (pic of the jsx completion options below)
    image

    Reacted by Andrii Dieiev and Sebastian Herrmann
  7. Ryan Cavanaugh (RyanCavanaugh)
    added
    Awaiting More FeedbackThis means we'd like to hear from more people who would be helped by this featureThis means we'd like to hear from more people who would be helped by this feature
    SuggestionAn idea for TypeScriptAn idea for TypeScript
    on Jun 9, 2020
  8. Andrew Branch (andrewbranch)
    assigned
    Armando Aguirre (armanio123)
    on Aug 26, 2021
  9. Andrew Branch (andrewbranch)
    added this to the TypeScript 4.5.0 milestone on Aug 26, 2021
  10. andrewbranch commented on Aug 26, 2021

    @andrewbranch
    Andrew Branch (andrewbranch)
    on Aug 26, 2021
    Member
    More actions

    IMO the options should be

    • None
    • Braces
    • Quotes for strings, braces otherwise

    (wording negotiable). An option for quotes always is nonsense. What to do for union types that include strings and non-strings, or for any and unknown, is debatable. Inserting braces seems fine; keeping existing behavior and not inserting the = seems fine; inserting just the = with no braces or quotes seems fine.

  11. armanio123 commented on Sep 15, 2021

    @armanio123
    Armando Aguirre (armanio123)
    on Sep 15, 2021
    Contributor
    More actions

    Based on type makes sense to me as, it can also be used to avoid adding the suggestion to boolean attributes. For the union types scenario, unless is union with undefined, I think everything should be on braces.

    Options:

    • None
    • Braces
    • Based on type
  12. merlinaudio commented on Oct 8, 2021

    @merlinaudio
    Merlin (merlinaudio)
    on Oct 8, 2021
    More actions

    Just wanted to leave a big thank you for adding this, super helpful 😄

    Reacted by Armando Aguirre, Andrew Branch, Juan Araujo, Michał Lytek, Karl F, Igor Pantović, maeyama, Patrick Moody, Erik, Mark McDermid and 3 more
  13. Ryan Cavanaugh (RyanCavanaugh)
    added
    RescheduledThis issue was previously scheduled to an earlier milestoneThis issue was previously scheduled to an earlier milestone
    on Dec 15, 2021
  14. Ryan Cavanaugh (RyanCavanaugh)
    modified the milestones: TypeScript 4.5.0, TypeScript 4.6.0 on Dec 15, 2021
  15. Ryan Cavanaugh (RyanCavanaugh)
    modified the milestones: TypeScript 4.6.0, TypeScript 4.6.1 on Feb 3, 2022
  16. Ryan Cavanaugh (RyanCavanaugh)
    modified the milestones: TypeScript 4.6.1, TypeScript 4.8.0 on May 13, 2022
  17. shayded-exe commented on Aug 10, 2022

    @shayded-exe
    SHAYDED (shayded-exe)
    on Aug 10, 2022
    More actions

    If I have it set to braces, it will auto complete a given attribute with braces once.
    If I ctrl+z and try completing it again, it just completes the attribute name without braces.

  18. andrewbranch commented on Aug 15, 2022

    @andrewbranch
    Andrew Branch (andrewbranch)
    on Aug 15, 2022
    Member
    More actions

    I can’t reproduce that behavior:

    Kapture.2022-08-15.at.12.20.29.mp4

    Feel free to file a new issue with more repro info. This one should have been closed as completed.

  19. Andrew Branch (andrewbranch)
    closed this as completedon Aug 15, 2022
  20. Strate commented on Nov 23, 2022

    @Strate
    Artur Eshenbrener (Strate)
    on Nov 23, 2022
    More actions

    It would be nice to auto add braces / quotes when = symbol pressed (like in webstorm).

    This is VSCode:

    2022-11-23.14.03.33.mov

    And this is WebStorm:

    2022-11-23.14.05.36.mov
  21. andrewbranch commented on Nov 23, 2022

    @andrewbranch
    Andrew Branch (andrewbranch)
    on Nov 23, 2022
    Member
    More actions

    Artur Eshenbrener (@Strate) I think that would require a new VS Code API; there’s nothing that I know of where an editor asks us to auto-insert code upon insertion of a previous character. Feel free to leave your suggestion on the VS Code repo (be sure to search for duplicates first).

  22. Strate commented on Nov 24, 2022

    @Strate
    Artur Eshenbrener (Strate)
    on Nov 24, 2022
    More actions

    Andrew Branch (@andrewbranch) isn't auto-closing jsx tag almost same feature?

    2022-11-24.13.28.57.mov
  23. andrewbranch commented on Nov 28, 2022

    @andrewbranch
    Andrew Branch (andrewbranch)
    on Nov 28, 2022
    Member
    More actions

    That feature exists purely on the VS Code side; they don’t ask TypeScript for any info to make that happen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

  • @armanio123
    Armando Aguirre (armanio123)

Labels

Awaiting More FeedbackThis means we'd like to hear from more people who would be helped by this featureThis means we'd like to hear from more people who would be helped by this featureRescheduledThis issue was previously scheduled to an earlier milestoneThis issue was previously scheduled to an earlier milestoneSuggestionAn idea for TypeScriptAn idea for TypeScript

Type

No type

Projects

No projects

    Milestone

    • TypeScript 4.8.0

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

    You are visitor 01402503 — GeezerVison does not store the pages you look up.
    Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.