TS Language Server: JSX Attribute types autocompletion

Search Terms

• autocomplete

• autocomplete proptypes

• autocomplete jsx attribute types

• proptypes

• jsx intellisense

Suggestion

The TS Language Server should have proper insert text mechanisms to handle react props.

There are maybe 4 Scenarios in which we can type PropTypes in React/JSX

Use Cases

This would be used to make editing experiences much quicker, especially in react/JSX markup. Webstorm has this feature by default. I would like this feature added to VSCode so I can continue to use a snappier editor, while having just as important intellisense features in it. That and almost 100% of my coworkers also use VSCode, so I want to use the same tools they are.

Shortcomings with current Approach:

The current way would be to have auto complete suggest prop types as you type them, or with the ctrl + space key shortcut. You would have to do this for every required prop type, which is a significant slow down. If every required prop type is auto inserted I never have to worry about it (and won't have to worry about required props, even during compile time!)

Examples

1. const Component = (props: PropDefinition) => <JSX />

2. const Component: React.FC<PropDefinition> = (props) => <JSX />

3. class MyComponent extends React.Component<PropDefinition>

4. MyComponent.propTypes = PropTypesObject

even though the fourth case would only ever occur in Vanilla JS files, I would expect the following behavior to be the same.

I would like the expected behavior to do the following

• types: <MyCompo...

• Auto Completes with a suggestion from the completion list

• Completion Inserts: <MyComponent requiredProp1={<cursor placed here>} requiredProp2={} while omitting optional props.

Checklist

My suggestion meets these guidelines:

• [ X ] This wouldn't be a breaking change in existing TypeScript/JavaScript code
• [ X ] This wouldn't change the runtime behavior of existing JavaScript code
• [ X ] This could be implemented without emitting different JS based on the types of the expressions
• [ X ] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• [ X ] This feature would agree with the rest of TypeScript's Design Goals.

The issue names no source file, test, or specific entry point. Reproduce the four React/JSX prop cases, then trace JSX attribute completion in the TypeScript language server and compare the current behavior with the requested insert text. Done means required props are inserted with cursor placement while optional props are omitted across the stated cases.