VSCODE Jump to the JS file definition (not the .d.ts file)

user_2178112 0
Viewed 715

I'm sure thousands of other JS devs are feeling the pain I'm feeling. I love jumping to function definitions in .d.ts files while browsing code in VS Code.

However, sometimes instead of going to the .d.ts file, I'd like to jump to the raw JS code that is being hidden by the .d.ts file that sits in front of it.

Does anyone know how to optionally force a jump to the JS source code (if it exists) and not a TypeScript definition file.

Thanks!

EDIT: I am aware that this has been asked for to the VS Code team and will not be officially supported by them. I'm looking for some sort of hacky workaround (extension or otherwise) to get this to work.

visual-studio-code typescript javascript
2 Answers

Recently announced, VS Code Insiders (v1.67.2) supports a Go to Source Definition context menu option from right-clicking the symbol. This was committed 19-APR-2022.

This feature requires TypeScript 4.7:

Go To Source Definition

TypeScript 4.7 contains support for a new experimental editor command called Go To Source Definition. It’s similar to Go To Definition, but it never returns results inside declaration files. Instead, it tries to find corresponding implementation files (like .js or .ts files), and find definitions there — even if those files are normally shadowed by .d.ts files.

This comes in handy most often when you need to peek at the implementation of a function you’re importing from a library instead of its type declaration in a .d.ts file.

go to source definition screencast

You can try this new command in the latest versions of Visual Studio Code. Note, though, that this functionality is still in preview, and there are some known limitations. In some cases TypeScript uses heuristics to guess which .js file corresponds to the given result of a definition, so these results might be inaccurate. Visual Studio Code also doesn’t yet indicate whether a result was a guess, but it’s something we’re collaborating on.

You can leave feedback about the feature, read about known limitations, or learn more at our dedicated feedback issue.

user_62771510

Delete the .d.ts file (temporarily)

This is obviously a super-crappy workaround, but it should work. By deleting the file you don't want to see, VSC will only have one place to take you: the file you do want to see.

  1. When VSC takes you to the .d.ts file, right-click on the file tab and click "Copy Relative Path"
  2. Open the VSC terminal and enter rm [PATH] (or del [PATH] for Windows)
    • leave the (now-deleted) .d.ts file tab open
  3. Go back to the original file and try navigation again
    • if it doesn't work, you may need to reboot the TS server
  4. Once you've seen the code you want to see, go back to the .d.ts file and save it
    • this will put the file back exactly as it was, which will probably be invisible to your source-control
    • if not, you may need to use your SCM to undo the deletion operation

Again, an awful hack. And I share your frustration that the VSC maintainers & community have no interest in this feature. Just bear in mind that their goal is to make their propriety technology displace all technology they don't own, so you will occasionally discover that they will refuse to help you as a web developer because they want you to be a Microsoft developer.

user_8144630
Related