JSX and Salsa: Intellisense for ReactComponents does not work

[egamma]

From @nwehrle on February 10, 2016 11:52

Salsa is enabled:

But intellisense fails to offer proper React Elements:

System:
OSX 10.11.2
vscode 0.10.8
db71ac615ddf9f33b133ff2536f5d33a77d4774e

jsconfig.json:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "system",
    "experimentalDecorators": true
  },

  "exclude": [
    "node_modules"
  ]
}

User settings:

{
  "javascript.validate.enable": false,
  "editor.tabSize": 2,
  "files.trimTrailingWhitespace": true,
  // Migrated from previous "File | Auto Save" setting:
  "files.autoSave": "onFocusChange"
}

Partial eslintrc:

 "rules": {
    "func-names": 0,
    "no-unused-expressions": 0,
    "id-length": 0,
    "no-multi-spaces": 0,
    "no-mixed-spaces-and-tabs": 2,

    "no-unused-vars": [1, {"vars": "all", "args": "none"}],
    "react/jsx-uses-react": 1,
    "react/prop-types": 0,
    "no-console": 0
  },
  "plugins": [
    "react"
  ]

Copied from original issue: microsoft/vscode#2886

[egamma]

Did you install the corresponding .d.ts files?

To get IntelliSense for React/JSX, install the typings for react-global by running tsd install react-global from the terminal.

[egamma]

Does it work in this simple hello world example:

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});

ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

[egamma]

From @nwehrle on February 10, 2016 12:13

You are right, I forgot to install the .d.ts file for the screenshot (but I tried before).

It does not offer the React-Component as the best option in your minimal example:

[egamma]

I see in your screenshot that you are using ES7 bind operator which is not yet supported by TypeScript which powers Salsa. As a consequence you get syntax errors and red squiggles which can make Intellisense fail.

In the second screenshot you are correct that the React-Component could be proposed first, but the React-Component is proposed so Intellisense is working but the sorting isn't optimal.

Moving over to TypeScript as an FYI.

[billti]

I've discussed this internally before with @RyanCavanaugh . The challenge is with things like stateless functional components, any function really could be a valid React element, not just those types which derive from React classes/components.

I assume the identifier you require is in the list and starts filtering down when you type?

Arguably we could do a better job of filtering out things like interface names from the list, but that is a general issue with the global identifier list, and orthogonal to React.

Assigning to Ryan to see if he has any further input, else I believe this is by design.

[nwehrle]

I assume the identifier you require is in the list and starts filtering down when you type?
Yes it does, but it does not look like your screenshot, https://code.visualstudio.com/images/January_jsx-salsa.png - it looks like any other available var.

[prashaantt]

I'm new to TypeScript so please excuse me if this is silly. I do get IntelliSense for React via typings if I try accessing typings statically or inside the React.createClass() syntax, but not inside a component if I have declared an ES6 class the class Test extends React.Component way.

Is this rather an issue with the react.d.ts definition or some limitation of typings with the ES6 class syntax itself?

[mhegazy]

There are two issues going on here:

1. the completion inside the class doe not show inherited properties at the moment, this is a feature that the TS language service does not support. but it is a fair request to add. added issue for it:Populate inheritied properties and methods in completion list inside a class #7158
2. the completion on React. the problem is that the react module does not rely have a default export, the importing code uses the default import import React from "react" instead of the namespace import import * as React from "react". Transpilers like Babel fudge this difference by a runtime check, but it is really a lie, and the module does not have a default export, and would not work without a transpiler.
   Ideally you should see a helpful message about this, and that is what we should fix.

[mhegazy]

This issue is tracking item 2 above, i.e. showing appropriate error message.

[prashaantt]

@mhegazy As I mentioned in my last comment, auto-complete on React. does work well for me if I have the typings in place.

For this to work, though, like I posted over on microsoft/vscode#2898 (comment) I have had to change the module in my jsconfig.json to system. I discovered that accidentally, because if I now switch back to commonjs this only works for the commonjs requires and no longer for the ES6 imports, like you say in point 2 above.

[billti]

this only works for the commonjs requires and no longer for the ES6 imports, like you say in point 2 above

This sounds like the same issue as #7076 . I'm looking into that.

[billti]

I have a fix out for the ES6-style imports, and confirmed it works in this scenario. See #7249 (comment)

[patsissons]

I'm running into a similar issue, but I'm not sure if it is the same as what has been discussed here. Most of the comments here appear to be with intellisense in a code block. My issue is that my react components are not showing up in the intellisense only for JSX blocks. Once I create the JSX element, the intellisense works for the attributes on the JSX element, just not for the initial creation of the element.

Hopefully these screenshots provide some insight into what I'm speaking of.

[mhegazy]

@patsissons what version of VSCode / TypeScript are you using?

[patsissons]

[mhegazy]

this issue is fixed in #7326. so should be available in the nightly builds (see https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Nightly%20Builds.md#visual-studio-code) or in the next release.

[billti]

I believe all the issues discussed above are either fixed or explained, with the exception of @mhegazy 's comment that the error message should be improved when trying to use a default import that doesn't exist (and without allowSyntheticDefaultImports).

@mhegazy, did you have any thoughts on how this should behave? This is for JavaScript, so it may well be that you have no definitions for the imported module, and that is not an error. Seems that if: a) There is a definition we can use for the imported module, and b) That definition does not contain a default property, and c) You do not have allowSyntheticDefaultImports set - then if you try to use a default import from the module perhaps a message like The module referenced does not export a default property. Did you mean to import an identifier list or a namespace, or set "allowSyntheticDefaultImports" to true?.

Even then, this is a little weird, as this is still a 'type system' error on a JavaScript file, and users may not be aware of the "synthetic default" and how different module systems interact with it.

[mhegazy]

@billti would this be handled by #10895?