DEV Community

Cover image for Introducing auto-doc-gen: A VS Code Extension for Auto-Generating TypeScript Docs
SAURABH DOKE
SAURABH DOKE

Posted on

Introducing auto-doc-gen: A VS Code Extension for Auto-Generating TypeScript Docs

Hey devs! πŸ‘‹
I recently built and published my first VS Code extension called auto-doc-gen, a tool designed to automatically generate documentation from your TypeScript code using Abstract Syntax Tree (AST) parsing via ts-morph.

It’s now live on the GitHub Marketplace with version 1.1.3, and while it's still early (12 downloads so far!), I’d love for more folks to try it and share feedback. πŸ™Œ

🧠 The Why Behind auto-doc-gen
Writing docs can be tedious, especially for internal tools, utility functions, or quickly evolving codebases. I often found myself re-explaining the same logic in multiple places or digging through files just to remember what a method did.

That’s when I thought: why not auto-generate documentation directly from the source?
That’s where AST + VS Code + TypeScript came into play.

πŸ” What auto-doc-gen Does
This extension analyzes your TypeScript code, extracts meaningful information using the AST, and outputs clean, readable documentation in Markdown and HTML formats.

βœ… Supported Elements:
Functions (regular & arrow)

Classes (including constructors, methods, and properties)

Interfaces

Enums

Type Aliases

πŸ“š Input:
A single .ts or .tsx file, or an entire folder

πŸ“¦ Output:
DOCS.md (with Markdown code fences)

docs.html (styled HTML with syntax highlighting)

πŸ’‘ Key Features
πŸ”§ AST-Powered Analysis
Utilizes ts-morph to deeply parse source code, extract JSDocs, function signatures, parameters, return types, etc.

πŸ“ Recursive File Processor
Traverses entire directories (ignoring node_modules & hidden folders), parsing .ts/.tsx files intelligently.

πŸ§‘β€πŸ’» VS Code UI Integration

File/folder picker

TypeScript-only filters

Path validation

Documentation preview via external file opening

πŸ›‘ Robust Edge Case Handling
Handles:

Empty file/folder selections

Non-TypeScript files

Parse errors

Hidden/system folders

πŸ›  Tech Stack
Language: TypeScript

Editor APIs: VS Code API

AST Parsing: ts-morph

File Ops: Node.js fs

UI & Output Styling: HTML/CSS + Markdown

πŸ“₯ Try It Out
Clone/download the extension repo: github.com/SaurabhDoke/auto-doc-gen

Install it in your VS Code as an extension from the GitHub Marketplace

Hit Ctrl+Shift+P β†’ Run Auto Doc Gen: Generate Docs

Select your TypeScript file/folder

Done! πŸ“„ It’ll auto-generate the DOCS.md and docs.html files.

πŸ”­ What's Next?
I plan to add:

JSON output support

Live preview panel within VS Code

Better support for complex generics and overloads

GUI interface for configuration options

πŸ—£ Feedback & Contributions Welcome!
If you’re someone who wants to streamline docs, loves clean code, or just wants to support a solo dev project β€” give auto-doc-gen a try and leave a ⭐️ on GitHub!

If you read so far feel free to share suggestions, raise issues, or contribute directly via PRs.

Thanks for reading!
β€” Saurabh Doke

Top comments (0)