Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WebStorm, React & JSX curly braces autocomplete

Tags:

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?

Example problem

like image 629
Darren Keen. Avatar asked Nov 15 '17 16:11

Darren Keen.


People also ask

Does WebStorm support react?

WebStorm provides code completion for React APIs and JSX in JavaScript code. Code completion works for React methods, React-specific attributes, HTML tags and component names, React events, component properties, and so on.

Is WebStorm good for JS?

Webstorm is the best JS and Front-End IDE I've ever used. It's simple, easy to learn, and really helpful when working on larger projects. It's not really suited when you just want to make quick edits as it takes a while to load the files/project in.

What IDE should I use for react?

We consider WebStorm to be the best-paid IDE on the market for React development, thanks to its many features, plugins, and good documentation.


2 Answers

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:

enter image description here

like image 94
Attila Szeremi Avatar answered Oct 25 '22 20:10

Attila Szeremi


enter image description here

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

like image 30
vivek agarwal Avatar answered Oct 25 '22 19:10

vivek agarwal