ts-print-tree: Mapping Your TypeScript Jungle
29th Jun 2024
ts-print-tree: Your TypeScript Project’s Aerial View
There’s heaps of reasons you might want a 10-foot view of all available exports in your projects, but for some reason there wasn’t an easy way to do this, IDE or otherwise. Now, there is.
Enter ts-print-tree): the CLI tool I whipped up because, well, sometimes you just need to see the forest for the trees. Or in this case, the exports for the files.
Here’s how it works:
- In your project root, run
npx ts-print-tree
. - You get a neat tree of your TypeScript files, as you would with unix’s
tree
- Each .ts file shows its exports - functions, classes, etc.
- It skips the fluff - empty directories and node_modules are ignored.
The real kicker? Feed this output to your favorite LLM (hello, Claude), and suddenly your AI coding buddy knows your project’s layout better than you do after a long weekend.
Running on the project itself, output looks like this:
└─ src/
├─ cli.ts
├─ defaults.ts
└─ index.ts
└─ function readTsConfig(rootDir: string): ParsedCommandLine
└─ function createProgram(rootDir: string): Program
└─ function analyzeFile(sourceFile: SourceFile, typeChecker: TypeChecker): string
└─ function traverseDirectory(dir: string, program: Program, shouldIgnore: (path: string) => boolean, prefix: string): string
└─ function shouldIgnore(ignoredPatterns: (string | RegExp)[], pathToCheck: string): boolean
└─ function tree(rootDir: string, ignored: (string | RegExp)[]): void
Whether you’re diving into a new codebase, refactoring, or just trying to remember where you put that one function, ts-print-tree gives you the birds-eye view you need. Give it a spin and see how it fits into your workflow.