I'm importing various items from a file in vscode. The module exists, but seems to be missing some of the items. I can see the module definitely exists on the filesystem, and vscode even shows me the file name:

I'd like to open the file directly from where it's imported, using the same logic VScode itself uses to import the module. I would have thought right clicking would allow me to do this ('Go to implementation') sounds like it would open the file, but it doesn't do anything.

Obviously I could open a shell and start code pointing to that file, but that's a workaround rather than an actual solution.

How do I open a file being imported in vscode?

I'm importing various items from a file in vscode. The module exists, but seems to be missing some of the items. I can see the module definitely exists on the filesystem, and vscode even shows me the file name:

I'd like to open the file directly from where it's imported, using the same logic VScode itself uses to import the module. I would have thought right clicking would allow me to do this ('Go to implementation') sounds like it would open the file, but it doesn't do anything.

Obviously I could open a shell and start code pointing to that file, but that's a workaround rather than an actual solution.

How do I open a file being imported in vscode?

• javascript
• typescript
• visual-studio-code

Share Improve this question Follow asked Apr 1, 2020 at 10:46 mikemaccanamikemaccana 124k110110 gold badges432432 silver badges534534 bronze badges 2

• 3 Ctrl+Click? But I'd expect "Go to definition" to work as well. – Bergi Commented Apr 1, 2020 at 10:50
• Ah @bergi you're right. I thought 'implementation' was where something was implemented (ie, written as code) and 'definition' was where it was being used as a variable. Ie seems where the code is made is actually the actually not the 'implementation' but the 'definition'. If you add an answer I'll mark it as correct. – mikemaccana Commented Apr 1, 2020 at 10:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

There are multiple ways.

• Right Click and then select "Go to Definition" (not 'go to implementation' as you were using)
• Select type and then press F12
• Ctrl (cmd on Mac) + left mouse click

I like the last shortcut. It's easy and reachable.

There is a chance that the module you are viewing is a monJS module. You could create or add the following settings in .jsonconfig file.

Set/add entry "module": "CommonJS" or set "module": "Node16"

{
  "pilerOptions": {
    "baseUrl": "src",
    "module": "Node16"
  },
  "include": [
    "src"
, "public/src"  ]
}

OR

{
  "pilerOptions": {
    "baseUrl": "src",
    "module": "CommonJS"
  },
  "include": [
    "src"
, "public/src"  ]
}

Hope this helps