Visual studio code: navigate to jsx components

Question

In visual studio code, I would like to be able to navigate to an imported file using ctrl + click.

So far I'm able to do it for javascript files (.js), but it's not working for react files (.jsx)

Here is what my directory structure looks like :

Here are the imports (relative and absolute) in my TestImport.jsx Component :

import DummyTwo from 'components/common/dummy-two/DummyTwo.jsx';
import something from 'components/common/my-file/myFile.js';

import DummyOne from '../common/dummy-one/DummyOne.jsx';
import somethingElse from '../common/my-file/myFile2.js';

And here is my jsconfig.json for vscode

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "baseUrl": "src"
  }
}

Code can be retrieved here: https://github.com/fthebaud/react-boilerplate

Am I missing something in the jsconfig file? regarding the extensions maybe?

Answer 1

You need to add "jsx": "react" to use jsx:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "baseUrl": "src",
    "jsx": "react"
  }
}

See here for more info about this setting