Coding / Programming Videos

Post your favorite coding videos and share them with others!

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

Source link

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.

Source link

Bookmark(0)
 

4
Leave a Reply

Please Login to comment
4 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
trackback

… [Trackback]

[…] Find More on|Find More|Find More Informations here|Here you can find 20943 more Informations|Infos to that Topic: codingvideos.net/enabling-vscodes-go-to-definition-for-jsx-imports/ […]

 
trackback

… [Trackback]

[…] Find More on|Find More|Read More Infos here|Here you will find 25089 more Infos|Infos to that Topic: codingvideos.net/enabling-vscodes-go-to-definition-for-jsx-imports/ […]

 
trackback

… [Trackback]

[…] Information to that Topic: codingvideos.net/enabling-vscodes-go-to-definition-for-jsx-imports/ […]

 
trackback

… [Trackback]

[…] There you will find 77140 additional Information to that Topic: codingvideos.net/enabling-vscodes-go-to-definition-for-jsx-imports/ […]

 
Translate »