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.

El issue no nombra ningún archivo fuente, prueba ni punto de entrada específico. Reproduce los cuatro casos de props de React/JSX, luego sigue la finalización de atributos JSX en el servidor de lenguaje de TypeScript y compara el comportamiento actual con el texto de inserción solicitado. Se considera terminado cuando las props requeridas se insertan con la colocación del cursor, mientras que las props opcionales se omiten en los casos indicados.