Here’s a detailed and visually appealing README.md you can use for your VS Code extension that implements comment-based folding within functions using ts-morph. Feel free to copy and paste it directly into your project!
Function Comment Folding Extension
Function Comment Folding is a Visual Studio Code extension that automatically collapses code blocks based on comments inside function bodies. This extension works with both JavaScript and TypeScript, providing more organized and readable code by folding large sections of functions where comments are placed.
Function Comment Folding an example from 3Blue1Brown's Grant Sanderson's Sublime Setup
Features
Automatic Comment Folding: Detects comments (//) within function bodies and allows folding based on their positions.
Supports Multiple Function Types:
Regular Function Declarations
Arrow Functions (including async functions)
Exported Functions
Typescript Support: Properly handles TypeScript syntax, including parameter and return types.
Handles Complex Code: The extension uses ts-morph for Abstract Syntax Tree (AST) parsing, ensuring accurate folding in even the most complex codebases.
Example
In a JavaScript/TypeScript file like the one below, comments inside the function will be automatically detected for folding:
// Function declaration
export async function processTransaction(userId: number): Promise<void> {
// Comment A
const result = await performOperation(userId);
// Comment B
return result;
}
// Arrow function
const calculateSum = async (a: number, b: number) => {
// Comment C
return a + b;
};
Comment folding between // Comment A, // Comment B, and // Comment C is automatically handled.
Functions with complex TypeScript annotations, like async functions and those with types, are fully supported.
How It Works
Function Detection: The extension detects functions using the power of ts-morph to parse the source code into an AST (Abstract Syntax Tree).
Comment Detection: Inside function bodies, the extension scans for top-level comments and automatically creates folding ranges.
Flexible Parsing: Handles different styles of function declarations, including arrow functions and async functions.
Usage
Install the extension from the Visual Studio Marketplace.
Open any JavaScript or TypeScript file with function bodies and comments.
Folding: Hover over the left margin (next to the line numbers), and you'll see the folding arrows next to your comments. Click the arrow to fold/unfold the section.
Commands
The extension automatically activates when you open a .js or .ts file, and there are no additional commands to run.
Open your JavaScript/TypeScript files to start using the extension.
Extension Settings
This extension currently works out of the box with no configuration required. It automatically activates and handles both JavaScript and TypeScript files.
Release Notes
1.0.0
Initial release of Function Comment Folding.
Supports comment-based folding for JavaScript and TypeScript functions using ts-morph for AST parsing.
