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:

  1. In your project root, run npx ts-print-tree.
  2. You get a neat tree of your TypeScript files, as you would with unix’s tree
  3. Each .ts file shows its exports - functions, classes, etc.
  4. 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.


grrowl/ts-print-tree: Print a tree-like view of your project and accessible imports (good for documentation and LLMs!)