Go to the TypeScript source file instead of the type definition file in VS Code

Question

I created a custom npm library that is used in some root projects. This library is written in TypeScript. All sources are under a /src folder.

The tsconfig.json of the library contains those compiler options :

"sourceMap": true
"outDir": "dist"

The package.json file contains :

"main": "dist/src/index.js",
"typings": "dist/src",
"files": [
  "src",
  "dist"
],

In the end, the generated package contains the generated .js files, the d.ts files and the .ts source files :

- package.json
- /dist (`.js` and `d.ts` files)
- /src (`.ts` files)

In a root project where this custom library has been installed, I'm then able to add a breakpoint on a line calling a function imported from the library and stepping into it to debug its code, all in TypeScript. This is great!

But , in Visual Studio Code, when I CTRL-Click on a function imported from the library, without debugging, it leads me to the d.ts type definition file . I would prefere it to lead to the .ts source file ! The way it is currently, I have to browse by myself to the /src folder of the library, under /node_modules , if I need to see the actual source code.

Is there a way to go to the TypeScript source file directly in VSCode, instead of the type definition file?

Answer 1

Since Typescript 2.9 it is possible to compile your library with the declarationMap flag

./node_modules/typescript/bin/tsc -p . --declarationMap

Doing so creates a declaration map file ( dist/ActionApi.d.ts.map ) and a link to the map at the bottom of the corresponding d.ts file

//# sourceMappingURL=ActionApi.d.ts.map

When VSCodes encounters such a declarationMap it knows where to go to and leads you directly to the source code.

Answer 2

添加"typescript.disableAutomaticTypeAcquisition": true到设置。

Answer 3

Starting with TypeScript 4.7, there is a new Go to Source Definition command which does this. VS Code 1.68 (May 2022) includes it .

If you have an earlier VS Code version, you can still enable it by installing JavaScript and TypeScript Nightly and following its documentation:

To make sure you are using typescript@next :

1. Open a JavaScript or TypeScript file in VS Code.
2. In the VS Code command palette, run the TypeScript: Select TypeScript version command .
3. Make sure you have Use VS Code's version selected

Answer 4

When you debugging, you actually fall to actual js, that has source maps. So, you feel like falling to typescript sources.

But TypeScript and VSCode know nothing about sources of the library. When TypeScript looking for the imported library, it search for package.json, then looks for the field "typings", and uses file specified there.

There is a reason, why libraries provide d.ts and .js for TypeScript, but not sources itself. If the library would provide sources, then you will need to compile them. It is strange and not efficient because:

1. Every user of the library will burn their processor to compile all the libraries he depends on.
2. User will change the content of the node_modules during compilation
3. User will get a problem like this

That's why, all libraries shipped already compiled to js, with .d.ts declarations.

If you really want to see library sources (by the way, for what?), then just copy library sources to your src dir, and remove it from dependencies.