Suggestions for jsx attributes should include =""

[yunti]

TS Template added by @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

[mjbvz]

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'}

[yunti]

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

[andrewbranch]

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.

[armanio123]

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

[merlinaudio]

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

[shayded-exe]

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.

[andrewbranch]

I can’t reproduce that behavior:

https://user-images.githubusercontent.com/3277153/184702590-2c8e37e7-7857-4e14-8812-29aebe874737.mp4

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

[Strate]

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

This is VSCode:

https://user-images.githubusercontent.com/392644/203531303-31bac65f-58e4-4cab-a945-f5bf34be4c2d.mov

And this is WebStorm:

https://user-images.githubusercontent.com/392644/203531493-29b7fb6b-d144-4f9b-b5f0-652720db98e2.mov

[andrewbranch]

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

[Strate]

@andrewbranch isn't auto-closing jsx tag almost same feature?

https://user-images.githubusercontent.com/392644/203761394-bbc74c6f-f190-4419-a7ca-e7b01fe5c023.mov

[andrewbranch]

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