VSCode Prefer Go to Source definition

Tags:
  • VSCode
  • JavaScript
  • TypeScript

Published


When writing JavaScript/TypeScript, I often want to inspect the definition of a function or a class. In VSCode, I do it with cmd+click, this is what VSCode calls "Go to definition". Most of the times, this works as expected, but when inspecting third party imports this is somewhat annoying as it often will bring up the type definitions.

For example, I have this file that imports a function from @astrojs/rss.

import rss from "@astrojs/rss";

If I cmd+click on it, this is what I'll see:

export default function getRssResponse(
  rssOptions: RSSOptions,
): Promise<Response>;

This is fairly useless, as I can see the function signature directly in my editor. What I actually want to see is what the function does.

I have always been somewhat annoyed by this, but until recently I didn't know there was a solution.

There are two settings: typescript.preferGoToSourceDefinition and javascript.preferGoToSourceDefinition that can be enabled.

Prefer Go To Source Definition makes `Got to Definition` avoid type declaration files when possible

After enabling these settings, ctrl+click will bring me to this function definition, which is really what I wanted all along.

async function getRssResponse(rssOptions) {
  const rssString = await getRssString(rssOptions);
  return new Response(rssString, {
    headers: {
      "Content-Type": "application/xml",
    },
  });
}