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.