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:
|
1 2 3 4 5 6 7 |
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
This 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.jsis sitting in mynode_modulesfolder.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.jsactually 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.
Settings -> Languages&Frameworks -> Javascript -> Libraries maybe?
Like 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.
I 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: http://blog.jetbrains.com/webstorm/2014/07/how-webstorm-works-completion-for-javascript-libraries/
Hi 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 (
...
....
)
}
});
Sorry about the terrible formatting – I tried to format it well but the formatting got removed after posting.
Thanks for letting us know. I will look at that closer and will let you know what can be done.
Thanks!
Same 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
What WebStorm version do you use? node_modules folder is not excluded from the project, right?
same issue, the code assistance can’t work, the version of WebStorm is 2016.3.4 on macOS sierra 10.12.3
What exactly doesn’t work as you expect? Do you have react in your project’s package.json file?
sorry,i have not fount ‘react’ library in the TypeScript community stubs…
Please try typing “react” in the list of stubs to search for it, it should be there.
Hi,
I tried.. Could find react under TS community stubs.
Correction. Couldn’t find react.
Which WebStorm version do you use?
As 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
Can you please provide more details on what exactly should be fixed. Thank you!
I can confirm this is still not supported as of today:
import React, { Component } from ‘react’;
WebStorm gives the following warning:
Cannot resolve symbol ‘Component’
I’ve replied to you on the issue tracker. Please reply to me there what WebStorm and React versions you use.
Great, thanks.
Emmet in JSX doesn’t always work right, at least in PhpStorm 9.0.2. ‘label’ expands to ” – notice
forinstead ofhtmlFor. ‘img’ expands to ” – notice lack of/>at the end. All these is html5-isms, they aren’t valid in JSX.ah, shoot. comment engine discarded
andimg src="" alt=""because of wrong quotes.are you kidding me? :)
– will it post like this?ok, 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?
Thanks 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
I 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.
WebStorm 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.
ES6 imports also breaks autocompletion for me regardless of whether I have react and/or react.d.ts in my libraries.
CORRECTION:
It looks like this works if I create a new file but not with existing files.
Please disregard my last reply. The only valid case is the first comment. Sorry for the confusion
I’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.
Thank 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.
That 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:
Hi.
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.
There 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….
That issue has been addressed several months ago (https://youtrack.jetbrains.com/issue/WEB-17686), please use the latest version of PhpStorm.
Do 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.
Hello 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
Great 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?
Thanks! 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
Hi,
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
Hello, 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.
I can not find ‘react’ library in the TypeScript community stubs…
What WebStorm version do you use?
Please make sure that the library is not downloaded and listed in the library list yet.
Is 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
Thank you for your feedback! That are known issues that we hope to fix some time soon.
Not yet :(
Please try WebStorm 2016.2 Beta: https://www.jetbrains.com/webstorm/nextversion/#react
Seems like this is not solved in 2016.2?
Not yet in 2016.3
Please send a sample code to reproduce the problem to https://youtrack.jetbrains.com/issues/WEB
Thank you!
I would like to see this feature as well.
These issues have been addressed in WebStorm 2016.2: https://www.jetbrains.com/webstorm/whatsnew/#v2016-2-react
Please give it a try!
I 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.
Do you mean this.props.params from the react-router?
Yeah, 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.
jscs -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
Thanks for your comment. I’ve reported an issue: https://youtrack.jetbrains.com/issue/WEB-21151
Please follow it for the updates.
Hi,
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.
Hi, thank you! Here’s a related issue that you can vote for and follow for updates: https://youtrack.jetbrains.com/issue/WEB-20884
Is it possible to autocomplete React component methods, like: componentDidMount?
What component style are you using? ES5
React.createClassor ES6extends React.Component?I’m seeing related with the ES6 extends method.
import React,{Component,PropTypes} from ‘react’;
class MyClass extends Component {
componentDidMount() {}
}
componentDidMount is listed as unused
Sorry, it’s a known issue, we hope to get it fixed soon: https://youtrack.jetbrains.com/issue/WEB-14576
It’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?
Hello 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?
Hey,
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?
Completion 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).
I 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?
Do you have React installed in node_modules or anywhere else in the project?
One 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.
That’s been fixed in WebStorm 2016.2: for React events curly braces are now added instead of quotes.
This 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
In 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
Is 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.
Yes, you can do that in WebStorm 2016.2 in Preferences | Editor | Code style | HTML – Generated quote marks.
Thank you!
Is this also possible for auto imports inside a JSX file? Changed HTML & JavaScript Generated quote marks to Single, but still get double for imports.
Well, I’ve found it directly after posting.. :D
Had to check the ‘Enforce on format’ option under Code Style -> HTML
Good that it’s solved now.
Is 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. )
WebStorm 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
Hi, 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?
Hi,
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
Hi,
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!
Hi! 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.
all u need:
https://twitter.com/webstormide/status/705688309079654400
Hi 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?
Hi George,
it would be better to file an issue with a small code sample, because it seems to be working for me
when 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？
You need babel-react-preset when using Babel with JSX: https://facebook.github.io/react/docs/installation.html#enabling-es6-and-jsx
I’ve FINALLY upgraded my WebStorm and I have to say I’m enjoying the React features a lot.
Great to hear that :)
> 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
Sorry, WebStorm doesn’t support properties passed to the component using Redux. Please follow this issue for updates: https://youtrack.jetbrains.com/issue/WEB-22957
Can 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.
This 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).
Hi! 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.
Sorry, 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?
Thank 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
Update:
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.
Please 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.
Thank you!
Hi,
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.
Known issue, please follow WEB-19028 for updates. I can suggest to either disable this inspection or suppress it for current method: hit
Alt+Enteronrender(), then hitRight, choose Disable Inspection or Suppress for statementCan 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.
By 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.
Hi, 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
Thanks for noticing. Fixed that.
Hey!
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
Hello,
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.
The feature is pretty cool
In 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)
In the latest WebStorm 2017.3 EAP for
classNamewe 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?that 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.
2017.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????
Can you please provide more details on the problems with the individual imports. We are not aware of it. Thank you!
Java 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.
What 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!
This is driving mental. How do I turn this feature off?
In WebStorm 2017.3 (now available as a Release candidate) you can disable adding {} and “” in Preferences | Editor | Smart keys.
React components like: , don’t work with Webstorm autocomplete. Infact, classes import and complent properties having autocomplete feature. Any suggestion?
Sorry, 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!
I 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?
Hi!
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?
react-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]
Whoops, thought this was markdown :)
But you get the idea
Thanks 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.
> 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.
You’re welcome! Let us know if you stumble upon this issue again.
Hello! 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
Doesn’t currently work, please vote for https://youtrack.jetbrains.com/issue/WEB-31621 to be notified on any progress with it