Suggestions for jsx attributes should include =""

[yunti]

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

[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]

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)

[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