Skip to content

Automatically add braces or quotations after JSX attributes #44563

Closed
@allan2

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    DuplicateAn existing issue was already created

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions