This is a post about setting up WebStorm to understand JSX and work for React projects.
I've started to play with the yeoman generators out there for React, and for a larger-small project like that I really wanted to open it in WebStorm. Of course being written by hardcore React developers, these generated projects all use JSX. In reality, it's not possible to get proficient with React without using JSX because it is in literally all the projects. When in Rome, do it the way the Romans do. Even if you don't understand right now why JSX is better than straight JavaScript, trust that it is (or read this blog post). BUT, I have a problem. My tooling is confused because I'm using JSX for the first time. :) As usual, I just hit File -> Open, and navigate to the root directory of my project. When opening a React project in WebStorm for the first time you might get error messages from your JSX code like this:
Also check if you are getting "Your current JavaScript version does not support this" errors. This means that you need to change the "JavaScript language version" to JSX Harmony. Go to Webstorm -> Preferences -> Languages & Frameworks -> JavaScript to JSX Harmony.
Now your React code should have pretty highlighting and the error messages should be gone!
The Other Options
- Prefer Strict mode - Strict mode is basically equivalent to declaring 'use strict' in your JavaScript files, but the IDE will enforce it even if you don't write 'use strict'! I like using 'use strict' because it allows the IDE to tell you when you make mistakes that could otherwise cause runtime errors and issues with your application. If you forget when 'use strict' does check the Mozilla docs or this stack overflow post. So go ahead and check this box. :)
- Only type-based completion - WebStorm is a unique JavaScript editor in that it can give you hinting and code completion for your JavaScript objects! Sometimes though, you might find that you'll hit command + space, and then the intellisense popup box will give you every possible variable in every library in your project. Ahh! Keep this box checked, and your intellisense popups should be short and useful. :)
RSS Feed