madge VS emerge

something like https://github.com/sverweij/dependency-cruiser maybe https://github.com/pahen/madge or https://github.com/antoine-coulon/skott

You can render dependency graphs with Madge [0] (works with both TS and JS).

[0] https://github.com/pahen/madge

It would be interesting to somehow overlay this graph on top of the typescript import graph (generated by something like madge). I suspect it might highlight some poorly organized regions of the codebase, because it would be obvious which component trees depend on multiple clusters of files.

So far, I've always used a tool called madge, which saved my ass countless times.

I've also noticed that eslint cycle checking is slow for large projects, we currently use madge (https://github.com/pahen/madge) for cycle checking and its very fast and is working pretty well.

There's no VS Code extension for it AFAIK, but it's the best (and almost only) tool that I know which can do it for JavaScript code. There's also madge and emerge, in case the first one doesn't fit your needs.

Emerge-viz seems to have multiple languages and cool visuals.

https://github.com/glato/emerge

Slightly off topic & very resource intensive diy approach without using an IDE:

Take advantage of an editor's use of on disk file as a buffer[0]. Monitor the editor file buffer for changes[1]. Trigger regeneration of a map/graph update & redisplay changes[2] in different window.

[0] : https://stackoverflow.com/questions/71822798/what-exactly-ar...

[1] : watchdog : https://pypi.org/project/watchdog/

[2] : emerge-vis : https://github.com/glato/emerge

Module inter-dependencies diagram(s).

There's no VS Code extension for it AFAIK, but it's the best (and almost only) tool that I know which can do it for JavaScript code. There's also madge and emerge, in case the first one doesn't fit your needs.