IntelliJ how to turn of automatic { } when writing JSX

Question

I'm working with React in IntelliJ and have a annoying issue. When wrting JSX (e.g. in Render) IntelliJ automatically inserts two {} when i press enter/autocomplete a property.

For example when writing the following JS code:

const SomeCompenent = () => {
    return (
        <div className="someClassName">
    )
};

IntelliJ automatically write className={}

It kind of assumes I'm always going to use props which require the {} syntax. However, it reduce the readability of the code (imo) with all the unnecessary {}.

I have tried some different settings in file -> settings -> editor -> general -> smart keys, but to no avail.

Hope someone is able to help.

Answer 1

IntelliJ still doesn't expose JSX attribute style in the UI, but turns out that you can manually edit the config file. This worked for me in IntelliJ Ultimate 2020.3:

1. Switch code style scheme to Stored in Project.
2. Open the config file at /.idea/codeStyles/FoobarSchemeName.xml.
3. Add <option name="JSX_ATTRIBUTE_VALUE" value="Based on type" /> entry under JSCodeStyleSettings to default to " instead of { for string props, or value="None" to append neither " nor {.
4. Restart IntelliJ. Just reopening the project wasn't enough for me.

If you're missing JSCodeStyleSettings, add it in as follows:

<component name="ProjectCodeStyleConfiguration">
  <code_scheme name="Project" version="173">
    <JSCodeStyleSettings version="0">
      <option name="JSX_ATTRIBUTE_VALUE" value="Based on type" />
    </JSCodeStyleSettings>
  </code_scheme>
</component>