Working with ReactJS in WebStorm: Coding Assistance
ReactJS is no doubt one of the trendiest JavaScript libraries released recently and as such is seeing wide adoption.
React support was introduced in WebStorm 10 and has undergone continuous improvement since then. This post has been updated with some of the features introduced in WebStorm 2016.2 and further updates. In this blog post we’d like to show how WebStorm can help you write code with React.
More on using React in WebStorm:
- Working with ReactJS in WebStorm: Linting, refactoring and compiling
- Debugging React apps created with Create React App
- Developing mobile apps with React Native
React introduces JSX, an XML-like syntax that you can use inside your JavaScript code, but you can also use React in pure JavaScript.
If you’re using JSX, WebStorm will suggest switching language version to React JSX so that it may understand JSX syntax in .js files. That’s it, now you can write JSX code and enjoy code completion for JSX tags, navigation and code analysis.
You can also switch language version to React JSX manually in Preferences | Languages & Frameworks | JavaScript.
NB: Once you have react.js library file somewhere in your project, WebStorm will provide you code completion for React methods and React-specific attributes. By default, the code completion popup displays automatically as you type. For example:
From your code you can jump to the method definition in the library with Cmd-click (Ctrl+click).
To enhance code completion we recommend that you add a TypeScript definition file for React with npm install --save @types/react
Component names
WebStorm can also provide code completion for HTML tags and component names that you have defined inside methods in JavaScript or inside other components.
Completion also works for imported components with ES6 style syntax:
From there you can also jump to the component definition with Cmd-click (Ctrl+click on Windows and Linux) on component name or see a definition in a popup with Cmd-Y (Ctrl+Shift+I).
Attributes and events
In JSX tags, the IDE provides coding assistance for React-specific attributes such as className or classID and non-DOM attributes like key or ref. Moreover, for class names you can autocomplete classes defined in the project’s CSS files.
All React events like onClick or onChange can be also autocompleted together with ={}
.
Of course there is also code completion for JavaScript expressions inside the curly braces. That includes all methods and functions that you have defined:
Component properties
WebStorm 2016.2 can provide code completion and resolve for component properties defined using propTypes.
When you autocomplete component name, all its required properties will be added automatically. If the component usage misses some of the required properties, WebStorm will warn you about that.
Emmet in JSX
With Emmet support in WebStorm, you can generate HTML markup really fast. You type an abbreviation that expands to HTML code when you press Tab. You can also use Emmet in JSX code, and that brings us to some special React twists. For example, the abbreviation MyComponent.my-class would expand in JSX into tag with className=”my-class” and not to class=”my-class” like it would in HTML.
Live templates
Live templates work very similar to Emmet – type a special abbreviation and it will expand into a code snippet. WebStorm has a predefined set of templates for JavaScript and HTML, and you can also create your custom templates for React in Preferences | Editor | Live templates.
As an example let’s create a live template for creating a new React component:
var $NAME$ = React.createClass({ render: function () { return ( <div>$END$</div> ) } });
Let’s set the abbreviation to rC. With $variable_name$ syntax, we can set the edit points for variable and function names (we have multiple edit points in one template), and with $END$ we specify a location of the cursor at the end.
We also need to specify the kind of files in which this template can be invoked; in our case it will be JSX.
Now when you type rC and press Tab, the code snippet will expand. Type the component name and press Tab again to jump to the end edit location:
Another way to go is to import a set of templates created by community members for development with React in WebStorm. See GitHub for details on the installation process.
In a follow-up blog post we’ll talk more about the available refactoring options, code quality analysis, and compiling code. Stay tuned!
Develop with pleasure!
– JetBrains WebStorm Team
Cian says:
October 6, 2015This is great news! I’ve recently started working with React and I love all the extra support I’m getting with it.
I have one question (they are really both the same)
I’m using browserfy to allow me use React in the browser. Thus,
React.js
is sitting in mynode_modules
folder.At work, we use a buildstep which concats React onto the top of our js file (and then minifies it). As such, I don’t ever have
React.js
actually in the project.Will WebStorm support code completion in these cases? I’ve tried using the above guide, and it doesn’t look like it does currently.
Constantin says:
October 7, 2015Settings -> Languages&Frameworks -> Javascript -> Libraries maybe?
Ekaterina Prigara says:
October 7, 2015Like I’ve mentioned in the blog post, you can add TypeScript definition file for React as JavaScript library in Preferences | Languages and Frameworks | JavaScript and WebStorm will provide you with code completion for React APIs.
Ekaterina Prigara says:
October 7, 2015I would also recommend to add react.js library file itself as JavaScript library via the same Preferences | Languages and Frameworks | JavaScript | Libraries configuration. You can read about that here: https://blog.jetbrains.com/webstorm/2014/07/how-webstorm-works-completion-for-javascript-libraries/
Cian says:
October 10, 2015Hi Ekaterina – The thing is – as I mentioned in the comment I’ve done the steps in this blog post and I’m not getting code completion. I’ve noticed that if I follow the
let MyComponent = React.createClass({...});
module.exports = MyComponent
es6 pattern it works, but I’m not using that pattern. I’m using
export default React.createClass({...});
pattern, and then including each component into parent components with
include MyComponent from './components/MyComponent'
export default React.createClass({
...
render: function() {
...
return (
...
....
)
}
});
Cian says:
October 10, 2015Sorry about the terrible formatting – I tried to format it well but the formatting got removed after posting.
Ekaterina Prigara says:
October 13, 2015Thanks for letting us know. I will look at that closer and will let you know what can be done.
Cian says:
October 15, 2015Thanks!
Randy says:
November 15, 2015Same issue, i’m importing react from node modules but get no completion. It’s a pretty common workflow so i’m surprised webstorm doesn’t support it
Ekaterina Prigara says:
November 16, 2015What WebStorm version do you use? node_modules folder is not excluded from the project, right?
qingguoing says:
March 17, 2017same issue, the code assistance can’t work, the version of WebStorm is 2016.3.4 on macOS sierra 10.12.3
Ekaterina Prigara says:
March 17, 2017What exactly doesn’t work as you expect? Do you have react in your project’s package.json file?
bunny says:
December 25, 2015sorry,i have not fount ‘react’ library in the TypeScript community stubs…
Ekaterina Prigara says:
December 28, 2015Please try typing “react” in the list of stubs to search for it, it should be there.
Akhilesh says:
March 5, 2016Hi,
I tried.. Could find react under TS community stubs.
Akhilesh says:
March 5, 2016Correction. Couldn’t find react.
Ekaterina Prigara says:
March 8, 2016Which WebStorm version do you use?
Charles Merriam says:
December 16, 2016As a note, WebStorm still cannot handle idiomatic React code:
import React, {Component} from ‘react’;
…
class Boxy extends Component
Instead, use:
…
class Boxy extends React.Component
until this is someday fixed
Ekaterina Prigara says:
December 19, 2016Can you please provide more details on what exactly should be fixed. Thank you!
Wagner Camarao says:
October 19, 2017I can confirm this is still not supported as of today:
import React, { Component } from ‘react’;
WebStorm gives the following warning:
Cannot resolve symbol ‘Component’
Ekaterina Prigara says:
October 19, 2017I’ve replied to you on the issue tracker. Please reply to me there what WebStorm and React versions you use.
Wagner Camarao says:
October 19, 2017Great, thanks.
Constantin says:
October 7, 2015Emmet in JSX doesn’t always work right, at least in PhpStorm 9.0.2. ‘label’ expands to ” – notice `for` instead of `htmlFor`. ‘img’ expands to ” – notice lack of `/>` at the end. All these is html5-isms, they aren’t valid in JSX.
Constantin says:
October 7, 2015ah, shoot. comment engine discarded “ and `img src=”” alt=””` because of wrong quotes.
Constantin says:
October 7, 2015are you kidding me? 🙂 “ – will it post like this?
Constantin says:
October 7, 2015ok, there’s also a bug in your comment posing, backticks create inline code blocks but html tags in their content evaporate after posting. no preview either to see what’s gonna happen. can you change it to markdown please?
Ekaterina Prigara says:
October 7, 2015Thanks for your feedback.
I’ve created 2 issues, please follow the updates on them: https://youtrack.jetbrains.com/issue/WEB-18459 and https://youtrack.jetbrains.com/issue/WEB-18458
Janek says:
October 7, 2015I get nice automcompletion when manually adding typescript stubs and/or distributed version of react.js to Preferences | Languages and Frameworks | JavaScript | Libraries.
BUT: Once I import react via “import React from ‘react'” autocompletion is broken as Webpack tries to do autocompletion using the npm import which does not work well…
Is there a way to change this behavior? I’d like to have better react autocompletion when using es6 imports.
Ekaterina Prigara says:
October 8, 2015WebStorm doesn’t resolve Webpack imports now, please see the corresponding issue: https://youtrack.jetbrains.com/issue/WEB-14019 import React from ‘react’ would be now resolved either to node_modules or to react file on the same level in project structure. However, I believe, if you still have a react.js in you project, coding assistance for React methods should work anyway.
Marwan Aziz says:
October 8, 2015ES6 imports also breaks autocompletion for me regardless of whether I have react and/or react.d.ts in my libraries.
Marwan Aziz says:
October 8, 2015CORRECTION:
It looks like this works if I create a new file but not with existing files.
Marwan Aziz says:
October 8, 2015Please disregard my last reply. The only valid case is the first comment. Sorry for the confusion
Janek says:
October 9, 2015I’m using simple es6 style imports. They are not webpack specific.
Webstorm *does* resolve them correctly (CTRL-Click navigates to corresponding file in node_modules folder).
But: Webstorm tries to use resolved file in node_modules for autocompletion instead of configured typescript stubs or react.js.
And this doesn’t work well.
That might usually be the desired behavior but in this case I get much better completions when I don’t import React from node_modules but rely on typescript stubs/react.js library configured in settings.
Ekaterina Prigara says:
October 9, 2015Thank you for your comment. That’s a valid point, we’ll think what we can do. My suggestion would be to exclude node_modules from the project. That way WebStorm would fully rely on react.d.ts file for completion.
Janek says:
October 9, 2015That didn’t helped either.
I’ve disabled the “node_modules” library and excluded the node_modules directory.
Nevertheless typescript still does not use TypeScript react stub library if React is imported with an es6 import statement.
This even happens if “React” is importet from a non existing module. Like:
Andrey Starovoyt says:
October 13, 2015Hi.
Unfortunately WebStorm cannot resolve js es6 imports to typescript files so there is no way to get the typescript autocompletion for import * as React from ‘react’. I guess we will fix the problem soon.
Everett Griffiths says:
January 4, 2016There appears to be a bug in PHPStorm that prevents the react library from being visible in the downloads. In the TypeScript community stubs, it only shows libraries from A to P. In other words, you can scroll down through the ABC’s down to libraries beginning with P, but no React is visible. This is sort of the classic complexity and confusion that seems to be standard in JetBrains stuff unfortunately….
Ekaterina Prigara says:
January 4, 2016That issue has been addressed several months ago (https://youtrack.jetbrains.com/issue/WEB-17686), please use the latest version of PhpStorm.
Larry says:
January 6, 2016Do you know if CJSX (CoffeeScript JSX) support is on the roadmap? I am currently forced to use Atom for writing CJSX since it seems to be the only editor with full support for it. I still use WebStorm for all of my backend, tests, etc. because WebStorm has great CoffeeScript support. I tried a WebStorm plugin for CJSX but it was not well done.
Ekaterina Prigara says:
January 11, 2016Hello Larry, at the moment we don’t have any precise plans to support JSX in CoffeeScript, sorry. You can vote for the corresponding issue and follow the updates on it: https://youtrack.jetbrains.com/issue/WEB-12464
Scags says:
January 7, 2016Great article! Thanks. The LiveTemplates I’m finding especially useful. Using IntelliJ here, but there is little difference.
One thing is annoying me a bit though, wonder if you have a similar issue:
IntelliJ is complaining about unused properties on my React classes (render, componentDidUpdate, etc). I’d like to squelch these warnings, and if it’s a React class, have IntelliJ give a pass to the standard property list of React classes. Any ideas?
Ekaterina Prigara says:
January 8, 2016Thanks! Yeah, Live templates are really useful.
We have a similar request, hope we’ll address it soon, will ping my colleagues: https://youtrack.jetbrains.com/issue/WEB-14576
Gaetan s says:
January 27, 2016Hi,
I don’t use typescript.
The simple “import React from ‘react’;” don’t work even when I add react.js to the libraries.
I have “Default export is not declared in imported module”
Thank you
Ekaterina Prigara says:
January 28, 2016Hello, we don’t use TypeScript and TSX in this blog post.
This warning shows that React is not exported using ES6 module syntax. That doesn’t mean that the import is not working, it’s just a warning.
Unfortunately, you can’t disable this warning in WebStorm 11 (fixed in WebStorm 12 EAP). Sorry for the inconvenience.
bin Hong says:
March 1, 2016I can not find ‘react’ library in the TypeScript community stubs…
Ekaterina Prigara says:
March 1, 2016What WebStorm version do you use?
Please make sure that the library is not downloaded and listed in the library list yet.
WillemX says:
March 26, 2016Is there a way to make WebStorm more JSX-aware and suppress warnings like:
‘this.props’ and ‘this.state’ flagged as unresolved variables inside React,createClass method definitions,
‘key’ flagged as unallowed attribute key inside a JSX component tag
Ekaterina Prigara says:
March 28, 2016Thank you for your feedback! That are known issues that we hope to fix some time soon.
Whippy says:
July 4, 2016Not yet 🙁
Ekaterina Prigara says:
July 5, 2016Please try WebStorm 2016.2 Beta: https://www.jetbrains.com/webstorm/nextversion/#react
Batist Leman says:
August 29, 2016Seems like this is not solved in 2016.2?
Dmitry says:
November 16, 2016Not yet in 2016.3
Ekaterina Prigara says:
November 16, 2016Please send a sample code to reproduce the problem to https://youtrack.jetbrains.com/issues/WEB
Thank you!
Tatsu says:
October 9, 2016I would like to see this feature as well.
Ekaterina Prigara says:
October 10, 2016These issues have been addressed in WebStorm 2016.2: https://www.jetbrains.com/webstorm/whatsnew/#v2016-2-react
Please give it a try!
Tatsu says:
October 10, 2016I am running WebStorm 2016.2.3 Build #WS-162.1812.21.
Upon further investigation, I think what I’m seeing is that it correctly handles “props” and “state”, but not “params”.
Thanks.
Dennis Ushakov says:
October 11, 2016Do you mean this.props.params from the react-router?
Carsten Dietzel says:
October 11, 2016Yeah, there is. You can define all props in a propTypes-object, see https://facebook.github.io/react/docs/reusable-components.html#prop-validation. Atleast works for me.
Klaus Lynggaard Hougesen says:
April 6, 2016jscs -fix does not work in jsx files, due to .jsx files not matching the wildcard *.js that you use for checking if jscs rightclick menu should be shown
Ekaterina Prigara says:
April 6, 2016Thanks for your comment. I’ve reported an issue: https://youtrack.jetbrains.com/issue/WEB-21151
Please follow it for the updates.
Deniz Oğuz says:
April 7, 2016Hi,
I also want to ‘this.props’ and ‘this.state’ ‘unresolved variable’ issue to be solved. Is there an issue we can vote? Thanks for the great work by the way.
Ekaterina Prigara says:
April 8, 2016Hi, thank you! Here’s a related issue that you can vote for and follow for updates: https://youtrack.jetbrains.com/issue/WEB-20884
Olga says:
May 25, 2016Is it possible to autocomplete React component methods, like: componentDidMount?
Dennis Ushakov says:
May 27, 2016What component style are you using? ES5
React.createClass
or ES6extends React.Component
?Jay Barra says:
June 1, 2016I’m seeing related with the ES6 extends method.
import React,{Component,PropTypes} from ‘react’;
class MyClass extends Component {
componentDidMount() {}
}
componentDidMount is listed as unused
Ekaterina Prigara says:
June 1, 2016Sorry, it’s a known issue, we hope to get it fixed soon: https://youtrack.jetbrains.com/issue/WEB-14576
Michael Offenbecher says:
October 8, 2017It’s been over a year, and I don’t see this fixed in version 2017.2. Any update and when this will be supported for the “ES6 extends React.Component” style?
Ekaterina Prigara says:
October 10, 2017Hello Michael! The issue has been fixed over a year ago. I have double-checked it in WebStorm 2017.2 and all seems fine – the lifecycle properties are not marked as unused. What JS language level do you have in your project (Preferences | Languages & Frameworks | JavaScript) – ES6 or React JSX?
Ori Avraham says:
September 7, 2016Hey,
We try to create a large react project, using es6 style ‘extends’ components,
Unfortunately it seems like all coding assistance only works for React.CreateClass() style, but no for es6 style:
import React from “react”;
class MyClass extends React.Component {
render() {
return
{
hi
}
}
}
export default MyClass
Inside the class scope declaration I don’t get any code assistance (I do get only when usinging ‘this.’ prefix or inside methods), I cant use command+P for class methods etc..
Is this a known issue or not supported yet?
Ekaterina Prigara says:
September 7, 2016Completion for lifecycle methods is not yet supported when using
extends React.Component
, here’s a related issue: https://youtrack.jetbrains.com/issue/WEB-22052 We are planning to work on that soon.The React Component methods that you can override in your class are available via Generate… – Override methods (when react.d.ts is added as a JavaScript library).
zhangl says:
July 1, 2016I already switch javascript type to jsx harmony .And in jsx file,there was no error.But still no type assistant of react appear.what’s the problem?
Ekaterina Prigara says:
July 4, 2016Do you have React installed in node_modules or anywhere else in the project?
Michael Caputo says:
July 13, 2016One peeve I have with writing Jsx with Webstorm, is (I know it can be changed) when typing JSX attributes, it defaults to double quotes. Would be awesome if webstorm could automatically recognize that it’s JSX and use curly braces instead.
Ekaterina Prigara says:
July 13, 2016That’s been fixed in WebStorm 2016.2: for React events curly braces are now added instead of quotes.
Tred Reprak says:
August 14, 2016This doesn’t appear to be true, or it was a regression in 2016.2.1. Curly braces are not populated for className, double-quotes are.
JavaScript language version: React JSX
Ekaterina Prigara says:
August 16, 2016In React className by default is a string attribute and className=“” is a valid code, that’s why we add quotes for it. Here’s an example from official React documentation: https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components
Ruslan Prokopchuk says:
September 5, 2016Is it possible to switch to single quotes in settings? We have convention in team to use single quotes for string attributes in JSX, but from the quick scan I didn’t find relevant setting.
Ekaterina Prigara says:
September 5, 2016Yes, you can do that in WebStorm 2016.2 in Preferences | Editor | Code style | HTML – Generated quote marks.
Ruslan Prokopchuk says:
September 5, 2016Thank you!
Julian says:
October 20, 2016Is this also possible for auto imports inside a JSX file? Changed HTML & JavaScript Generated quote marks to Single, but still get double for imports.
Julian says:
October 20, 2016Well, I’ve found it directly after posting.. 😀
Had to check the ‘Enforce on format’ option under Code Style -> HTML
Ekaterina Prigara says:
October 20, 2016Good that it’s solved now.
Jonathan Moody says:
November 2, 2016Is it possible to use curly braces for className autocomplete instead? I use a React CSS library that requires className to be a JS object instead, so I never use the default string format.
(i.e. )
Ekaterina Prigara says:
November 2, 2016WebStorm automatically adds curly braces only for event attributes like onChange – React requires them to be JavaScript objects. className can be a string. You can disable auto adding quotes in Preferences | Editor | General | Smart keys – Add quotes for attribute value on typing “=” or attribute completion. Please comment on this issue if you think that default behaviour should be changed: https://youtrack.jetbrains.com/issue/WEB-17571
Dean Hristov says:
July 14, 2016Hi, everyone
I’ve one question about the support on ReactJS in Webstorm (in current version by date on this message). How can I debug ReactJS file/project same JavaScript? Sometime I have to attach somewhere break point, but I can’t do this? Тhere it has it as support?
Ekaterina Prigara says:
July 14, 2016Hi,
Unfortunately, WebStorm doesn’t provide any specific support for debugging JSX. Please vote for and follow this feature request: https://youtrack.jetbrains.com/issue/WEB-13986
Concerned Citizen says:
August 11, 2016Hi,
Is there a way to disable backtick auto-formatting in phpstorm? Phpstorm adds backticks randomly which comments parts of the file. This makes it hard to use ES6 template strings.
Thanks!
Ekaterina Prigara says:
August 12, 2016Hi! Sorry, what do you mean by backtick auto-formatting? If you’d like to disable adding a pair quote, uncheck this option in Preferences | Editor | General | Smart keys.
Peter says:
May 10, 2017all u need:
https://twitter.com/webstormide/status/705688309079654400
George Karanikas says:
August 26, 2016Hi my team and I are about to start a new large react project for which we are going to use flow as well.
As I started prototyping I first had the language level to “React JSX” but then since I wanted to introduce flow to the game, I changed it to flow. The problem now is that react autocomplete does not work with my components.
Is there is workaround to handle this or should I open an issue?
Dennis Ushakov says:
August 26, 2016Hi George,
it would be better to file an issue with a small code sample, because it seems to be working for me
TOM says:
November 30, 2016when i use React JSX and setting javaScript language version React.js . but it not work and /usr/local/bin/babel src/index.js –out-dir dist –source-maps –presets es2015
SyntaxError: src/index.js: Unexpected token (20:16) ….so what’s wrong?
Ekaterina Prigara says:
November 30, 2016You need babel-react-preset when using Babel with JSX: https://facebook.github.io/react/docs/installation.html#enabling-es6-and-jsx
Francis Kim says:
December 1, 2016I’ve FINALLY upgraded my WebStorm and I have to say I’m enjoying the React features a lot.
Ekaterina Prigara says:
December 1, 2016Great to hear that 🙂
Taylor says:
March 19, 2017> When you autocomplete component name, all its required properties will be added automatically. If the component usage misses some of the required properties, WebStorm will warn you about that.
I am using Redux with React, some of my required props will be provided by the connect HOC (https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options). Webstorm is not smart enough to understand this use case, so I have to entirely disable this warning via Preferences > Editor > Inspections > HTML > Missing Required Attributes
Ekaterina Prigara says:
March 20, 2017Sorry, WebStorm doesn’t support properties passed to the component using Redux. Please follow this issue for updates: https://youtrack.jetbrains.com/issue/WEB-22957
Marek says:
April 2, 2017Can I enable eslint-compliant code style for JSX? E.g. I currently use eslint rule jsx-curly-spacing”: [2, “always”] to have extra space inside curly braces, yet WebStorm doesn’t reformat my JSX code this way.
Ekaterina Prigara says:
April 3, 2017This code style option is not currently supported in WebStorm, but we plan to fix that. Here’s an issue you can follow: https://youtrack.jetbrains.com/issue/WEB-16776
As a workaround, since this ESLint rule is fixable, you can use ESLint: Fix current file action (hit Alt-Enter on the highlighted error from ESLint in the editor and select ESLint: Fix current file).
oana says:
April 18, 2017Hi! I have just reinstalled my webstorm and now it will not let me use expressions enclosed in curly braces {} as attribute values.
I works for some projects, but does not work with new projects.
I am writing react/JSX in all of the projects and they all appeat to have the same settings.
Any hints as to where to look?
I have an HTML file and a tag inside it. The problem arises when, in teh script, I have something like:
<element attr={…
it doesn't even matter what is next. I will not allow me to write anything, nor use the "backspace" key.
Ekaterina Prigara says:
April 18, 2017Sorry, I’m not sure I understand correctly: do you have this issue in your React code in JS files? What WebStorm version do you use?
Oana says:
April 19, 2017Thank you for replying.
I use the latest Webstorm (2017.1.1).
I have a project with one HTML file and a tag inside it. In here I write JSX.
At some point I need to write this:
Inside the curly braces I can not write a thing. I would just ignore my typing.
I checked my Settings (File>Settings>Language&Frameworks>Javascript) and I use ECMAScript6. I also tried with JSX, but I get the same.
The issue is that in some projects it works properly and others not. I tried comparing settings. I even exported settings from a project and importing to another and nothing. I don’t know where/what to look for
Oana says:
April 19, 2017Update:
I thought about what I changed and that is: I updated Webstorm to 2017.1.1
I just uninstalled that and reinstalled 2017.1 and it works as expected. I am not 100% sure that this was the problem, but this was my solution. later today I wil try to update again and see if I get the issue back.
Ekaterina Prigara says:
April 19, 2017Please send us the content of your IDE log folder (menu Help – Show log) to https://youtrack.jetbrains.com/issues/WEB as well as an example of the HTML file with JSX in it. Thank you!
Update: it seems that your issue is similar to this one: https://youtrack.jetbrains.com/issue/WEB-26445
The fix will be available in WebStorm 2017.1.3 bug-fix update.
Oana says:
April 19, 2017Thank you!
blaze says:
May 25, 2017Hi,
I’m using Webstorm (version 2017.1.3) on a React project. I currently get a warning from the IDE to convert React component render function to a static function. Here is my code:
class App extends React.Component {
render () { // warning: can be static
return React & Application
}
}
Is there a way to configure WebStorm to prevent this warning message? Thanks.
lena_spb says:
May 25, 2017Known issue, please follow WEB-19028 for updates. I can suggest to either disable this inspection or suppress it for current method: hit
Alt+Enter
onrender()
, then hitRight
, choose Disable Inspection or Suppress for statementAmrish says:
June 7, 2017Can we debug whole react.js application including route.js and all in webstrom? I am currently working webstrom 2016.2.4. Please help me out.
Ekaterina Prigara says:
June 7, 2017By route.js do you mean react-router? If possible provide a sample project. WebStorm JavaScript debugger should be able to debug the whole app running in the browser. Note that we highly recommended using the latest WebStorm version, it’s 2017.1.3.
Brice says:
June 14, 2017Hi, good post, but there is a broken link:
(Developing mobile apps with React Native) http://https//blog.jetbrains.com/webstorm/2016/12/developing-mobile-apps-with-react-native-in-webstorm/
Thank you.
Brice
Ekaterina Prigara says:
June 14, 2017Thanks for noticing. Fixed that.
David says:
June 20, 2017Hey!
Thanks for this great feature!
I have a question about inheritance of propTypes. To be clear about that I give you an example.
I have a component Text and LabeledText.
LabeledText is suppossed to have all propTypes of Text. I write this like:
class LabeledText extends React.Compoment {
propTypes: { …Text.propTypes, label: PropTypes.string }
}
Unfortunately, autocompletion doesnt work for this. Is anything planned in this direction or is there a better way to achieve this behavior?
Thanks in advance and best regards,
David
Ekaterina Prigara says:
June 20, 2017Hello,
unfortunately, WebStorm doesn’t support this case now. Here’s a related issue on our tracker: https://youtrack.jetbrains.com/issue/WEB-24773 Please vote for it and follow the updates. We’ll try to add the support in the future, but there is not ETA.
Bunja says:
August 18, 2017The feature is pretty cool
Todd Corley says:
October 9, 2017In 2017.2.4 and now 2017.3
All react attributes are defaulting to {} braces and it is driving me crazy. The above animated example with className now ends up as className={}. Working with a an input field is doing the same that makes no sense at all.
Is there a way to turn this off? Or how far back to I have to revert the installation to get it to work like it did before? (meaning just adding quotes)
Ekaterina Prigara says:
October 10, 2017In the latest WebStorm 2017.3 EAP for
className
we don’t add either {} or “”, so that you can type what you need in this particular case. We think that it’s the best solution for everyone: for those who often use {} for className, those who use quotes and those who use both. What do you think?Todd says:
October 10, 2017that only address className. why is every other JSX/HTML attribute now using {} now?
again with my input example.. If I type input then hit tab it creates the input tag and type attribute with quotes, but when I add the next attribute, label in this case, if I tab to select it from the pop up list, it adds label={}. How can I turn off braces for ALL ATTRIBUTES. I need quotes more often than I need braces and replacing them is a pain. Or as previously asked what is the last release before this “feature” was added. I will just stick with that version.
Todd says:
October 16, 20172017.1.4 seems to be the most stable for me. Fixes the “” vs {} issue and another problem another problem where individual imports were not recognized. Does jetbrains have a QA team????
Ekaterina Prigara says:
October 17, 2017Can you please provide more details on the problems with the individual imports. We are not aware of it. Thank you!
Todd says:
October 17, 2017Java Script setting: JSX in ECMAScript 6
import {Link} from ‘react-router’;
Works in 2017.1.x but not in 2017.2+
My problem with “” vs {} well documented above.
2017.1.4 works like I expect and I will not be upgrading from there.
Ekaterina Prigara says:
October 17, 2017What react-router version do you have? Is it listed as a project dependency in package.json? I’ve tested it in WebStorm 2017.1 and 2017.2 and for me it’s resolved correctly with react-router 4.2. Thanks!
Ed says:
November 16, 2017This is driving mental. How do I turn this feature off?
Ekaterina Prigara says:
November 16, 2017In WebStorm 2017.3 (now available as a Release candidate) you can disable adding {} and “” in Preferences | Editor | Smart keys.
Rahul Rastogi says:
October 30, 2017React components like: , don’t work with Webstorm autocomplete. Infact, classes import and complent properties having autocomplete feature. Any suggestion?
Ekaterina Prigara says:
October 30, 2017Sorry, but I can’t see the code sample in your comment. Can you please wrap the code with the code tag? Or make a screenshot with the code sample and share a link. Please also let us know what WebStorm version do you use. Thanks!
Aksel says:
November 8, 2017I am using two packages, which both export two completely different Link components.
One is a router, the other is a draft.js wysiwyg.
For some reason, WebStorm always assumes the component used is the draft.js one, and will autocomplete with its props, and warn when its required props are not used.
This happens even when I import the correct Link component via autocompletion, both via import and the render function. When navigating to the component via ctrl-click, it opens the correct component, so it knows what component I am using.
Invalidating caches and restarting does not fix the issue.
Is there a way to specify which component to look at?
Ekaterina Prigara says:
November 9, 2017Hi!
Can you please provide a bit more details on the modules you’re using and the import statements you have in your file.
So far I tried to install “draft-js”: “^0.10.4”, but I haven’t found a Link component there.
And for react-router, the Link component is only available in the react-router-dom package. Is that what you have?
Aksel Tórgarð says:
November 9, 2017react-router v3 exports it directly. [It’s explained here in the docs]( https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#link)
The other package is called react-draft-wysiwyg. [Link](https://github.com/jpuri/react-draft-wysiwyg/tree/master/src/controls/Link)
I’m not sure what its Link component is used for, but it doesn’t seem to be exported through the main package.
Nonetheless, I get autocompletion for importing it, both from the package itself, and directly from from its folder, like so:
[code]import Link from ‘react-draft-wysiwyg/src/controls/Link’;[/code]
Aksel Tórgarð says:
November 9, 2017Whoops, thought this was markdown 🙂
But you get the idea
Ekaterina Prigara says:
November 9, 2017Thanks for the info.
For me, if I have
import {Link} from 'react-router-dom'
on the top of the file the completion for Link’s props works as expected (doesn’t show any props from the react-draft-wysiwyg module).If there’s no import statements, the Link is correctly highlighted as unimported and in my opinion the import suggestions both from react-router-dom and react-draft-wysiwyg are valid.
I wasn’t able to reproduce the case when wrong props are shown.
Can you please share the whole file? Or at least the list of import statements you have in it. Thank you!
If you want you can create an issue on our tracker or contact our tech support directly.
Aksel Tórgarð says:
November 9, 2017> If there’s no import statements, the Link is correctly highlighted as unimported and in my opinion the import suggestions both from react-router-dom and react-draft-wysiwyg are valid.
Oh absolutely, I agree.
This error doesn’t seem to be reproducible. I have created a new project for the example, but it doesn’t happen in it.
I’ll open an issue if I can figure out how to reproduce the issue.
Thank you for your help, by the way. It’s cool of you to follow the comments on this blog.
Ekaterina Prigara says:
November 9, 2017You’re welcome! Let us know if you stumble upon this issue again.
Brie says:
April 30, 2018Hello! First off, thanks for these great features that help developers be more productive with React. 🙂
The article mentions that “WebStorm 2016.2 can provide code completion and resolve for component properties defined using propTypes.”
Do you know if it would be possible to add support for code completion for TypeScript declaration files added via “JavaScript libraries”?
Here are some examples that show only getting completion when the component has propTypes. https://gist.github.com/brieb/97b3c993b0df904f6a75c48458fa4772
Would be great if there could also be completion for the props defined in the TypeScript interface.
Thank you,
Brie
IntelliJ IDEA 2018.1.2 (Ultimate Edition)
Build #IU-181.4668.68, built on April 24, 2018
JRE: 1.8.0_152-release-1136-b29 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
macOS 10.13.4
lena_spb says:
May 1, 2018Doesn’t currently work, please vote for https://youtrack.jetbrains.com/issue/WEB-31621 to be notified on any progress with it