vscode, javascript - navgiate to function definition with CTRL + Click

Question

In VsCode, is there any way to navigate to function definition, to someFunction in this case, line 10, with ctrl + click.

Have already checked navigation docs for VS Code https://code.visualstudio.com/docs/editor/editingevolved but the answer is not there.

Rankins

Search in the command palette "go to implementation" or "go to definition", to the right of search result you should see a keyboard shortcut hint. I think the default is cmd+down, if I remember it right. – Educational

Already have binding for both of these. go to definition returns no implementation found and the other no implementation found. But thanks for helping anyway. – Rankins

Ah, i see. Try not to write code this way. TS engine is not that powerful to analyse everything. If this is not your code but a lib, then sorry can't help. Static analysis on a dynamic lang isn't easy. I'm not sure how well Webstorm handles it. Multiple-million business lives on it, doesn't come for free :-/ – Educational

press f12 to go the definition or right click to and select go to definition – Docent

@MurtazaHussain Did that. no definition found. – Rankins

then all you can do it ctrl + f to search in the same file or ctrl + shift + f to search for the complete source code – Docent

@MurtazaHussain Yes, I could get all the symbols in a few ways including ctrl + shift + o. That is working just fine. No problems with that whatsoever. Neither of them actually allows to simply use ctrl + click at the function name to navigate to function definition/implementation. – Rankins

Answer 1

You need to install and enable TypeScript and JavaScript Language Features extension in your VS Code for the JavaScript.

After installing this extension restart your VS Code, and try CTRL + Click to navigate into the function.

Apure

Answer 2

ctrl + click or F12 is the way to do this. However it only works if VS Code can properly understand your code, which it cannot do here

The specific bug you is this one: this does not have a known type inside ES5-style constructor functions. You can check this by hovering over self and seeing that its type is any.

In general, VS Code will have a more difficult time figuring out old, more dynamic JavaScript while class and modern constructs can be better analyzed and understood.

Rip

Answer 3

I had same issue: Ctrl + Click and Right Click "Go To Definition" wasn't working and F12.

The fix for me:

• Go to Extensions
• Click "Disable All Installed Extensions"
• Close and Reopen VS Code
• Back to Extensions and "Enable All Extensions"

Essentially enable/disable all extensions fixed the issue.

Strobilaceous

Answer 4

Remember that VSCode can only know the type of an object if you explicitly set it some way in the same scope (or use TypeScript). A classic example of this is this example where you have a class and a global variable that is supposed to be of this type but the variable is set inside another scope.

class Test { 
    foo() { return "bar"; }
}
    
let unknownTest;         // later set to instance of Test
let myTest = new Test(); // immediately set to instance of Test

function makeTest() {
    unknownTest = new Test();
}

makeTest();
unknownTest.foo(); // unable to navigate this using F12/Ctrl+Click in VSCode
myTest.foo();      // able to navigate this using F12/Ctrl+Click in VSCode
myTest = 0;
myTest.foo();      // will still navigate even though myTest is now a number

In this case VSCode will let you navigate foo() from myTest but not unknownTest because it has no idea what type it could be as it does not actually run the program to figure out that makeTest() made it of type Test.

Also note how easy it is to trick it as JS is untyped you can change the type of any variable like shown in the last two lines. VSCode will still think myTest is of type Test.

Norther