Search code examples
javascriptreactjsvisual-studio-code

JavaScript IntelliSense on React component sub-functions does not work

PS: yes, I already tested many configurations and things I found here, like this topic: VSCode Intellisense, snippets, suggestions are not working in JSX, TSX files

None of them are reporting exactly my case, and also nothing I tried solved the issue (not even sure if IS an issue or just a limitation)

The "issue"

I noted that no matter what, the IntelliSense only works on some particular places inside a React file (JS or JSX, doesn't matter) Check the image below:

enter image description here

As you can see, it seems that IntelliSense only engages when it detects the JS properly, inside a return. But for some reason the exact same method inside a function declaration at the top has no widget/tooltip, and neither the autocomplete/autosuggests work.

  • I checked the built-in extension, it's enabled. I restarted it for good measure, no change.
  • I tested multiple configurations and extensions, most are related to full file support from years ago (nowadays, the support is native)
  • I tested restarting VS Code in "safe mode" and reset all my settings.json, same behavior.

Hopefully anyone has any tips on how to get this working - maybe a config I don't know, maybe a custom extension, not sure.

Thanks

Solution

  • Look at the 'e' type in onChange handler (mouse over it)

    Then put that type in the function that you created

    const textChange: (e: /* here paste the type */) => {

...

    Typescript can't infer where your function will be used so you need to define the type of your params

    The types or (inference/intellisense) that you are getting are there because there are some TS files that are checked under the hood

    enter image description here

    enter image description here

    In this case for onChange React prop it finds that in

    node_modules/@types/react/index.d.ts

    And for event values that are declared in onChange (inline)

    node_modules/typescript/lib/lib.dom.d.ts