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?

score 21 · Accepted Answer · answered Apr 03 '18 at 15:36

21

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

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

See here for more info about this setting

answered Apr 03 '18 at 15:36

Matt Bierner

58,117
21
175
206

This is exactly what I needed. Thank you for the info! – Fab313 Apr 04 '18 at 07:50
Thank you so much. – Minkesh Jain Dec 13 '18 at 10:00
If my files have an extension that isn't *.js or *.jsx (ie: *.es), is there a way to get VSCode to recognize it within jsconfig.json? The question's similar to: https://stackoverflow.com/questions/38046039/vs-code-es6-extensions-cant-find-module – Cornomaniac Feb 07 '20 at 20:43
Thanks. Things became much easier because of this. – Swetabja Hazra May 07 '20 at 23:31
1

This goes in your `jscofig.json`? This also didn't do it for me. Does it work if the components are in another file? – Sam Mar 25 '21 at 19:46
For me adding this worked "jsx": "react-jsx" in jsconfig.json – Learner Oct 13 '21 at 06:54

Visual studio code: navigate to jsx components

1 Answers1