Automatically add braces or quotations after JSX attributes

[allan2]

For .jsx or .tsx files, WebStorm has a nice feature that automatically adds braces or quotations after JSX attributes. It's on by default too.

Since all attributes accept either string literals expressions in curly braces, this would help a lot of people.

This is how it would work:

// type this
<div className=

// get either this
<div className={}
               ^^ cursor is nicely between the braces

// or get this
<div className=""
               ^^ cursor is nicely between the quotes

In case it comes up, this issue is different from microsoft/vscode#35197. That issue was about auto-completing the braces after typing the opening brace.
This one is about automatically inserting both braces (or quotes).

It would be nice to have the option of quotation marks or braces. I expect most people would want braces so that should be the default.

The setting in WebStorm:

Blog posts on it:
Under "Configurable code completion for JSX attributes" https://blog.jetbrains.com/webstorm/2017/12/webstorm-2017-3-1/

[mjbvz]

Another possible use case of #25207

[RyanCavanaugh]

@mjbvz happy to prioritize this one, maybe for 4.5? It'd be nice

[andrewbranch]

Duplicate of #38891 — tracking there.