Folder Formatter VS Code Extension

This extension allows you to perform various actions on selected files or all files in a selected folder and its subfolders. You can choose which actions to perform on which file types.

⚠️ Disclaimer ⚠️

This extension is NOT an official Microsoft or Visual Studio Code extension. It is a third-party extension developed independently to enhance your VS Code experience.

Features

• Format individual files or multiple selected files
• Process all files in a selected folder and its subfolders
• Select specific actions to perform:
  • Format Document (Shift + Alt + F)
  • Organize Imports (Shift + Alt + O)
  • Fold All code blocks
  • Unfold All code blocks
• Shows progress notifications with file count and current file being processed
• Handles large files automatically
• Supports selective file type processing
• Available through both Command Palette and Context Menu
• Shows relative paths in notifications
• Supports separate handling of .spec.ts files
• Stop button to cancel the formatting process at any time
• Right-click context menu support for both files and folders

File Extension Behavior

The extension intelligently handles file extensions to provide precise control over which files are processed:

Smart Extension Filtering

• When selecting .ts files: All .ts files are processed, but .spec.ts files are automatically excluded
• When selecting .js files: All .js files are processed, but .spec.js files are automatically excluded
• When selecting .spec.ts files: Only .spec.ts files are processed
• When selecting .spec.js files: Only .spec.js files are processed

Examples

• Selecting .ts will process: component.ts, service.ts, module.ts, environment.prod.ts
• Selecting .ts will NOT process: component.spec.ts, service.spec.ts, app.component.spec.ts
• Selecting .js will process: component.js, service.js, module.js, config.js
• Selecting .js will NOT process: component.spec.js, service.spec.js, app.component.spec.js

This ensures that test files are kept separate from source files, giving you precise control over your formatting workflow.

Supported File Types

All Files

• All Files (*)

Common Web Files

• HTML (.html)
• CSS (.css)
• SCSS (.scss)

JavaScript/TypeScript

• TypeScript (.ts)
• TypeScript Spec (.spec.ts)
• JavaScript (.js)
• TypeScript React (.tsx)
• JavaScript React (.jsx)

React Specific

• React Component (.jsx)
• React Component (.tsx)
• React Test (.test.jsx)
• React Test (.test.tsx)

Vue Specific

• Vue Single File Component (.vue)
• Vue Test (.spec.vue)

Laravel Specific

• PHP (.php)
• Blade Template (.blade.php)
• Laravel Test (.test.php)
• Laravel Feature Test (.feature.php)

Node.js Specific

• Node.js (.node)
• Node.js Test (.test.js)
• Node.js Config (.config.js)

Additional Styling

• SASS (.sass)
• LESS (.less)
• Stylus (.styl)

Templates

• EJS (.ejs)
• Pug (.pug)
• Handlebars (.hbs)

Configuration

• JSON (.json)
• YAML (.yml)
• YAML (.yaml)
• Environment (.env)

Documentation

• Markdown (.md)
• Text (.txt)

Action Selection

You can select multiple actions to perform on the selected files:

All Actions

• All Actions: Apply all available formatting actions at once

Basic Formatting

• Format Document: Formats the document according to the language's formatting rules (Shift + Alt + F)
• Organize Imports: Organizes and sorts imports, removes unused imports (Shift + Alt + O)
• Fold All: Folds all code blocks in the file (Ctrl + K, Ctrl + 0)
• Unfold All: Unfolds all code blocks in the file (Ctrl + K, Ctrl + J)

Code Cleanup

• Remove Trailing Whitespace: Removes trailing whitespace from all lines (Ctrl + K, Ctrl + X)
• Insert Final Newline: Ensures the file ends with a newline character (Ctrl + S)

Code Style

• Convert to Single Quotes: Converts double quotes to single quotes using Quick Fix (Alt + Shift + ')
• Convert to Double Quotes: Converts single quotes to double quotes using Quick Fix (Alt + Shift + ")
• Convert to Template Literals: Converts string concatenation to template literals using Quick Fix (Alt + Shift + T)

How to Use

Method 1: Using Command Palette

1. Open the Command Palette (Ctrl+Shift+P)
2. Type "Format Folder" or "Format Files" and select the command
3. For folders: Select the folder you want to process For files: Select one or more files you want to process
4. For folders: Select the file extensions you want to process
5. Select the actions you want to perform
6. Wait for the process to complete

Method 2: Using Context Menu

1. Right-click on any file, multiple selected files, or folder in the Explorer
2. Select "Format Files" (for files) or "Format Folder" (for folders) from the context menu
3. For folders: Select the file extensions you want to process
4. Select the actions you want to perform
5. Wait for the process to complete

Supported Selection Methods

• Single file: Right-click on a file and select "Format Files"
• Multiple files: Select multiple files, right-click, and select "Format Files"
• Folder: Right-click on a folder and select "Format Folder"
• Command Palette: Use "Format Files" or "Format Folder" command to select files or folder

Progress Tracking

The extension shows a progress bar with:

• Total number of files to be processed
• Current file number being processed
• Percentage complete
• Name of the current file being processed
• Stop button (X) to cancel the process

Cancelling the Process

You can stop the formatting process at any time by:

1. Clicking the stop button (X) in the progress notification
2. The extension will:
   • Complete processing the current file
   • Save any changes made to the current file
   • Show a summary of how many files were processed
   • Stop before moving to the next file
   • Close the current editor
   • Clean up any temporary resources

Note: The stop button provides a graceful cancellation that ensures no files are left in an inconsistent state.

Large File Handling

The extension automatically handles large files (over 1MB) by:

1. Detecting file size before processing
2. Applying a longer delay (500ms) for large files to prevent performance issues
3. Performing the selected actions
4. Saving the file after all operations are complete
5. This helps prevent issues with very large files and ensures stable processing

Troubleshooting

If you encounter any issues:

1. Check the VS Code Developer Tools (Help > Toggle Developer Tools)
2. Look for error messages in the Output panel (View > Output)
3. Make sure you have the necessary permissions to modify the files
4. For large files, the extension will save them first before processing
5. If you need to stop the process, use the stop button in the progress notification

License

MIT License

Acknowledgments

• Thanks to the VS Code team for providing excellent extension development tools and documentation
• Special thanks to the VS Code Extension API community for their valuable insights and examples
• Icons made by Freepik from www.flaticon.com
• This extension was inspired by the needs of developers who work with large codebases and require efficient bulk formatting solutions

Support

If you find this extension helpful, please consider:

• Report any issues you encounter
• Share it with your colleagues
• Providing feedback to improve functionality