WebStorm, React & JSX curly braces autocomplete

Question

I have an issue with WebStorm and React.

Within the render function I type my HTML (JSX) and when I type an attribute for an element, WebStorm will autocomplete it with curly braces instead of speech marks.

Anyone any ideas?

Webstorm isn't going to know if you need a dynamic prop or not, so it assumes you will. — Matt Lo, Nov 15 '17 at 17:13
Thats for the reply. Webstorms example in their docs show that this should work thought: https://d3nmt5vlzunoa1.cloudfront.net/webstorm/files/2015/10/react_classname.gif — Darren Keen., Nov 15 '17 at 17:19
IDE version? https://stackoverflow.com/a/46949738/783119 -- try 2017.3 EAP builds perhaps. — LazyOne, Nov 15 '17 at 18:31

score 54 · Accepted Answer · edited Apr 04 '20 at 21:02

54

You can control this behavior:

File | Settings | Editor | Code Style | HTML | Add for JSX attributes

The "Add for JSX attributes" setting is under the "Other" tab:

edited Apr 04 '20 at 21:02

Rick

136
12

answered Apr 11 '18 at 11:08

Attila Szeremi

5,235
5
40
64

Could you please elaborate on what to add? – Sayan Jan 31 '19 at 15:20
3

If you want "speech marks", then set it to "Quotes", or if you want it to try and be smart and show quotes if the attribute is such a type, you can set it to "Based on type". By default, it's set to "Braces". – Attila Szeremi Jan 31 '19 at 17:48
1

Thanks Attila! I had a tough time finding the "Add for JSX attributes" option which was way under the "Other" tab in HTML. – Sayan Jan 31 '19 at 20:37

score 3 · Answer 2 · answered Sep 29 '19 at 11:38

3

Yes, Attila's answer is correct. It's a bit confusing though. This screenshot will complement Attila's answer.

answered Sep 29 '19 at 11:38

vivek agarwal

435
4
6

WebStorm, React & JSX curly braces autocomplete

2 Answers2