Repository: TypeScript
Issue: TS Language Server: JSX Attribute types autocompletion
Labels: Suggestion,Domain: JSX/TSX,Domain: Completion Lists,Awaiting More Feedback

<!-- 🚨 STOP 🚨 𝗦𝗧𝗢𝗣 🚨 𝑺𝑻𝑶𝑷 🚨

Half of all issues filed here are duplicates, answered in the FAQ, or not appropriate for the bug tracker. Please read the FAQ first, especially the "Common Feature Requests" section.

-->

## Search Terms

<!-- List of keywords you searched for before creating this issue. Write them down here so that others can find this suggestion more easily -->

- autocomplete

- autocomplete proptypes

- autocomplete jsx attribute types

- proptypes

- jsx intellisense

## Suggestion

<!-- A summary of what you'd like to see added or changed -->

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

<!--
What do you want to use this for?
What shortcomings exist with current approaches?
-->

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

<!-- Show how this would be used and what the behavior would be -->

1. `const Component = (props: PropDefinition) => <JSX />`

1. `const Component: React.FC<PropDefinition> = (props) => <JSX />`

1. `class MyComponent extends React.Component<PropDefinition>`

1. `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.

![ExpectedBehaviorTS](https://user-images.githubusercontent.com/12608723/62279439-f7aebd80-b3fe-11e9-8164-5f3925fda822.gif)


## 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](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals).