Enabling VSCode's "Go to Definition" for JSX imports

I have recently been trialling using Microsoft’s VSCode editor as my primary code editor, and so far I’ve been very happy with it. One feature that I’ve particularly enjoyed is “Go to Definition”. This lets you hover over any variable/class/object/etc and be taken to the place where it is defined, even if it’s in another file.

This is particularly useful for me in JavaScript imports. If I have this line:

import Foo from './foo'

I can right click on Foo (or hit the shortcut, F12 by default), and click “Go to Definition”, and be taken to foo.js.

One problem I found though is that by default, if the file is foo.jsx, not foo.js (at work we put React components in .jsx to differentiate them easily from plain JS files), this won’t work. We have Webpack configured to look for both .js and .jsx files, but need to tell VSCode to do the same.

The solution here is to define a jsconfig.json, which is a file that you can define to configure how VSCode understands your projects. We can tell VSCode that we’re working with JSX by adding "jsx": "react" to our jsconfig.json:

  "compilerOptions": {
    "baseUrl": ".",
    "jsx": "react"
  "exclude": ["node_modules", "build"]

Note that exclude is important: here I’ve defined node_modules and also build, which is the directory that Webpack builds to. I’m doing this to stop VSCode wasting time trying to parse files in these directories.

Once you’ve updated this, you’ll find that “Go to Definition” works just fine on imports from .jsx files, as well as .js files.

Don't miss my latest course, React in Five! This course will help you level up your React skills by covering lesser known parts of the React API. Each video is less than five minutes long, and the first four are free to watch. Get started now.

Subscribe to keep up to date with the latest content.

Join the JS Playground mailing list to be kept up to date with the latest tutorials, screencasts and more. You won't be spammed and you can unsubscribe at any time.

Headshot of Jack Franklin

Jack is JavaScript and React developer in London. He's also a keen Elm enthusiast, conference speaker and tweets far too often.