Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

VSCode - Lerna - Typescript - Monorepo Code Navigation

We have a monorepo for all our Javascript related SDKs here at Sentry. https://github.com/getsentry/sentry-javascript

If you clone this repo, set it up properly with yarn install and then open any file like packages/node/src/backend.ts and try to jump to the implementation of another package like the function limitObjectDepthToSize that lives in the utils package.

First of all, if you did not build the project before (have all type definitions in place) this error pops up:

enter image description here

But even if you built everything before, CMD+Click on the function now always jumps to the built object.d.ts instead of what I really want is that it jumps to the implementation source file which can be found in packages/utils/src/object.ts instead of /packages/utils/object.d.ts.

enter image description here

My question now is, is our setup wrong, is there any option in VSCode or maybe tsconfig.json that fixes this code navigation?

Or is this a currently known limitation of VSCode in monorepo environments?

Any help is appreciated and I hope it's nothing really obvious I just missed, thanks!

like image 364
HazA Avatar asked Jan 31 '19 11:01

HazA


People also ask

What is lerna Monorepo?

Introduction. Lerna is a tool for managing JavaScript projects with multiple packages. Lerna manages monorepos, which can hold projects containing multiple packages within itself. Monorepos can be challenging to manage because sequential builds and publishing individual packages take a long time.

Can I use lerna with NPM?

Lerna is a popular and widely used tool written in JavaScript for setting and managing multi-package repositories for Node. js projects with npm and Git.

How does lerna detect changes?

Lerna detects by itself which packages have changed since the last release and publishes only the new versions. But this feature only works for publishing, not testing. While Lerna doesn't support change-based testing, Semaphore does. And it's pretty easy to configure.


1 Answers

Set declarationMap to true to generates a sourcemap for each corresponding '.d.ts' file. It will allow IDE to jump to correct line at implementation file.

TS Documentation:

We’ve also added support for declaration source maps. If you enable --declarationMap, you’ll be able to use editor features like “Go to Definition” and Rename to transparently navigate and edit code across project boundaries in supported editors.

like image 51
Akuukis Avatar answered Oct 19 '22 17:10

Akuukis