Control JSX autocompletion of HTML attributes in Jetbrains IDEs

July 2022Jonathan Gruber

I often write React and JSX code. However, unlike most frontend people (at least that’s what I assume), I don’t use VSCode for this but PhpStorm. It’s pretty much like WebStorm but with more features making it more suitable for PHP development (duh 🤯). A few years ago, in my experience, TypeScript and React support was not as good as in VSCode. Over time, though, the Jetbrains IDEs have improved a lot here. For full-stack work, it’s very convenient to be able to use the same IDE for the backend and frontend parts.

JSX autocompletion

However, one thing that used to bug me when writing JSX in PhpStorm is the default autocompletion of HTML attributes. If you start typing some characters like in the screenshot and then hit <tab>, it will autocomplete the onClick attribute with braces:

HTML attribute autocompletion in PhpStorm

<button onClick={}>Hello</button>

Braces are probably a reasonable default for most people because it’s the correct syntax if you want to pass non-string values. But if you use components that work a lot with string properties, e.g. variants of UI components, it can be annoying. In the following example the variant property of <Alert /> can only be success or error, so quotes make a lot more sense for the autocompletion.

If you autocomplete a string property of a component, PhpStorm still inserts braces

// ❌ Braces need to be replaced with quotes
<Alert variant={}>Content</Alert>

// ✅ Literal values can be passed immediately
<Alert variant="">Content</Alert>

I always assumed there’s no way to change this IDE behavior, but it turns out there is: Under Preferences | Editor | Code Style | HTML | Other is a dropdown called “Add for JSX attributes” where you can select one of the following options. If you select “Quotes” autocomplete works the way I prefer.

  • Quotes 😍
  • Braces (default)
  • Based on type
  • None

The “Based on type” option seems perfect, but is less helpful than thought. Braces will still be inserted most of the time because most HTML attributes are optional and undefined needs to be supported.

The whole point of this blog post is that this little setting made me quite happy, and I wanted to share it. I hope someone else who’s also annoyed by the default behavior finds this post and will have an improved DX too.