VSCode react props suggestions for modules

Question

I have been using Webstorm for react development for a long time. Now I decided to give VSCode a try.

I am struggeling with an issue where VSCode does not suggest props for modules, for example material-ui.

Take a look at this screenshot:

In this case it should suggest sx and component props according to the docs https://mui.com/components/box/, but it only happens when I start typing specific prop name. Otherwise it is not even in the list.

This is my tsconfig.json

  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "alwaysStrict": true,
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": "./src",
    "paths": {
      "components/*": ["components/*"],
      "pages/*": ["pages/*"],
      "styles/*": ["styles/*"],
      "themes/*": ["themes/*"],
      "types/*": ["types/*"],
      "utils/*": ["utils/*"],
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Now this is a typescript project, I don't want to use propTypes nor jsDoc. This worked in webstorm for sure, is there a way to make it work in VSCode as well?

You can generally see the list of available options using `Ctrl`+`Space` (without having to type anything). Is that achieving the result you are looking for? — Kyriakos Bekas, Aug 18 '23 at 06:47
@KyriakosBekas No. As mentioned in the question, it should suggest `sx` and `component` props at the top, as they are the component's custom props. Instead the behaviour we see is that it lists all possible props for the component in an alphatical order. please check out this issue for more details: https://github.com/microsoft/TypeScript/issues/52080#issue-1517685893 — Adnan, Aug 18 '23 at 10:07
This question has been answered here: https://stackoverflow.com/a/76938845/12555423 — Adnan, Aug 22 '23 at 09:51
Adnan, is the answer I wrote that you linked to above really an answer to this question? In this question here, it says "_but it only happens when I start typing specific prop name. Otherwise it is not even in the list._", which I don't think my answer there covers. I wonder if that's really true, or if the person who wrote this question just didn't scroll down and look. I assume they did, but maybe they didn't... But unless what's stated in this question is false, then this is not a duplicate of the Q&A you just linked. — starball, Aug 24 '23 at 08:54
@starball yes you're correct. `Otherwise it is not even in the list` in my case, I had these properties listed but they were alphabetically sorted so your answer worked for that case. — Adnan, Aug 24 '23 at 12:48

score -1 · Answer 1 · answered Aug 20 '23 at 07:46

Make sure you have "TypeScript and JavaScript Language Features" and "ES7+ React/Redux/React-Native snippets", then try updating your tsconfig.json file like this:

"compilerOptions": {
  "jsx": "react",
}

Sometimes it might also be VSCode settings, try opening VSCode settings at settings.json, and check if these are present and valid:

"typescript.suggest.autoImports": true,
"typescript.suggest.paths": true

Based on past experience, it would be better to use TypeScript since it can provide more accurate suggestions as it has an interface to refer to already. Or it might be just VSCode IntelliSense being a bit slow.

Hope this helps!

Hi, unfortunately this does not solve my problem. please check out https://github.com/microsoft/TypeScript/issues/52080#issue-1517685893 for more details — Adnan, Aug 20 '23 at 08:31

VSCode react props suggestions for modules

1 Answers1