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.

この issue では、ソースファイル、テスト、または具体的なエントリポイントが指定されていません。React/JSX の 4 つの prop ケースを再現し、TypeScript language server における JSX 属性の補完を追跡してから、現在の動作と要求された挿入テキストを比較してください。指定されたケース全体で、必須の props がカーソル位置付きで挿入され、オプションの props が省略されれば完了です。