-
Notifications
You must be signed in to change notification settings - Fork 13.1k
Description
Does this issue occur when all extensions are disabled?: Yes
- VS Code Version: 1.73.1
- OS Version: MacOS 13.0
Steps to Reproduce:
- Setup typescript
- Create a
tsxfile with the following code inside:
function Person(props: {age: "old" | "middle" | "young", height: "short" | "medium" | "tall"}) {
return <div></div>
}
function Example(props: {}) {
return <Person
age='middle'
/>
}- Go to empty line after
ageprop of thePersoncomponent. - press
ctrl+spaceto see the intellisense suggestions.
Here is the screenshot of the intellisense suggestion:

Explanation:
This problem happens when you have a React component in Typescript (have only used functional components against this) that has a prop whose type is a literal string.
When you add the first prop with literal string type and move to enter the second prop and enter ctrl + space, intellisense lists the literal types of prop that was entered on the line above rather than other props.
In this example, instead of showing height on the top of the list, it shows middle, old, and young which are the literal types of age prop which is already entered.
This problem is specially annoying when the entered prop has a long list of literal string types.
For reference, I have no special extension installed (in fact, the Typescript playground displays the same behavior. The following is the ts config of the current example, but have witnessed this problem in all projects:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}