Typescript: Auto import for React components (Feature request).

[mjbvz]

_From @giorgim on July 12, 2017 20:38_

Would be nice if you can add feature of "Auto import for React components".
When I type component name in JSX, then VS Code should be able to allow me to auto import the component.

Web storm does it: https://blog.jetbrains.com/webstorm/2017/02/webstorm-2017-1-eap-171-3566/
(top of the article).

_Copied from original issue: Microsoft/vscode#30545_

[ghost]

I thought this feature was IDE related (as with Web Storm).e.g. I don't use typescript with react.

[mjbvz]

In TS 2.4.1, for a simple tsx file:

const z = <div></div>

with jsx: "react", no errors are shown on div even if React is not in scope

[mjbvz]

@giorgim TypeScript powers js and ts language features in VSCode. They already provide add missing import quick fixes for custom components, but not for standard html jsx tags

[mhegazy]

If // @ts-check is set, we do have a similar experience to suggest adding a react e.g.:

that works because we have an error to anchor the quick fix to.

Without // @ts-check we have no errors reported. so for this to work as intended we need to add a new category of diagnostics, say "suggestions" that we would have a fix for.

[mjbvz]

Thanks @mhegazy. I confirmed that using TS 2.4.2 I see this quick fix suggestion if 'react' is installed.

I think that only showing the quick fix when checkJS is enabled makes sense and is consistent with our other quick fixes in JS files

[amcasey]

So, at this point, this issue is mostly tracking the opportunity to add a non-error diagnostic covering this case?

[mhegazy]

So, at this point, this issue is mostly tracking the opportunity to add a non-error diagnostic covering this case?

yes. We did think of this originally, and did not find many of these to report. If we accumulate a list of these we should reconsider our decision.

[alexanderby]

There should be an option to auto-import JSX pragma at compile time, something like this for babel. That would be useful when using React or any other library that uses JSX.

Example:

// component.ts
export default (props) => (
    <div class={props.active ? 'active': ''}>
        <span>{props.icon}</span>
        {props.text}
    </div>
);

--jsxFactory "React.createElement" --jsxFactoryImport "import React from 'react';"

// component.js
import React from 'react';

export default (props) => (
    React.createElement('div', {'class': props.active ? 'active': ''},
        React.createElement('span', null, props.icon),
        props.text
    )
);

--jsxFactory "whatever" --jsxFactoryImport "import {whatever} from 'whatever-library';"

// component.js
import {whatever} from 'whatever-library';

export default (props) => (
    whatever('div', {'class': props.active ? 'active': ''},
        whatever('span', null, props.icon)
        props.text
    )
);

[mhegazy]

@alexanderby mind filing a new issue for this.

[RyanCavanaugh]

Auto imports for arbitrary value identifiers is present now

[gsouf]

@RyanCavanaugh could you please link to the documentation for this feature?