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:
<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.
// ❌ 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.