VS File Manager

Advanced structured file editor with file synchronization capabilities for Visual Studio Code.

Easily edit complex JSON, YAML, XML, and TOML files using a hierarchical block editor, synchronize changes across multiple files, and perform batch updates efficiently.

Features

Block Editor: Edit structured files in a hierarchical block view using dot notation (e.g., config.db.host)
File Synchronization: Automatically detect and synchronize changes across multiple files with same name in your project
Batch Updates: Apply the same changes to multiple structured files simultaneously
Multi-format Support: Works seamlessly with JSON, YAML, XML, and TOML file formats
Smart Detection: Automatic detection of same-named files with configurable sync prompts
Extensible Architecture: Easily extendable to support additional structured file formats

Structured Block Editor

The Block Editor provides a user-friendly interface for editing structured files with a hierarchical view:

JSON Block Editor

Key features of the Block Editor:

View file contents organized by depth levels
Edit values in place with type preservation
Add new blocks at any depth level
Delete unwanted blocks
Search functionality to find specific keys
Save or reload the document as needed

Installation

From VS Code Marketplace

Search for "VS File Manager" in the Extensions view (Ctrl+Shift+X or Cmd+Shift+X)
Click Install

From VSIX (Manual Installation)

Download the .vsix file from the latest release
In VS Code, open the Extensions view (Ctrl+Shift+X or Cmd+Shift+X)
Click the "..." menu in the top right
Select "Install from VSIX..."
Choose the downloaded .vsix file

Commands

Edit Structured Blocks: Open the block editor with a custom webview UI for structured files
Sync Files: Manually trigger file synchronization for structured files
Batch Update Structured Files: Apply the same changes to multiple selected structured files

Usage

Editing Structured Blocks (Block Editor)

The Block Editor opens a visual webview that renders your file as a hierarchy of editable key-value blocks, organized by depth level.

Open a supported file (.json, .yaml, .yml, .xml, or .toml) in the editor
Launch the Block Editor via one of:
- Command Palette (Ctrl+Shift+P / Cmd+Shift+P) → type Edit Structured Blocks
- Right-click context menu → Edit Structured Blocks (available only for supported file types)
In the webview you can:
- Edit values in place — type directly in the value field and the original type (string, number, boolean, object, array) is preserved
- Add new blocks at any depth level using the Add Block controls
- Delete blocks by clicking the trash icon next to a key (nested objects are fully removed)
- Search for a specific key using the search bar at the top
- Change depth level to collapse or expand the hierarchy view
Click Save Changes to write modifications back to the file
After saving, you will be prompted whether to synchronize the changes to other same-named files in your workspace (see File Synchronization)

Tip: Only one Block Editor can be open per file at a time. Re-running the command on the same file will focus the existing editor.

File Synchronization

When you have multiple files with the same name across different directories (e.g., config/app.json in several modules), the extension can propagate block-level changes to all of them.

Automatic sync prompt (after saving in Block Editor)

Edit and save changes through the Block Editor
If same-named files are detected, a prompt appears asking whether to sync the changes
Select the target files from the list and confirm — only the changed blocks are written to the selected files

Manual sync command

Open the file whose content you want to propagate
Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) → Sync Structured Files
A multi-select list of same-named files appears — toggle selections with Space, then press Enter
The current file's block values are synchronized to all selected files

Note: Sync operates at the block level, not by replacing entire file contents. Only the blocks you edited are applied to the target files, preserving their existing structure.

To disable automatic sync prompts, set vsfilemanager.syncPrompt to false in your settings.

Batch Updates

Batch Update lets you apply the same key-value change to multiple structured files at once — useful for updating a shared configuration value (e.g., a database host or API endpoint) across many files.

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) → Batch Update Structured Files
Select files: a multi-select list of all supported structured files in your workspace appears — pick the files you want to update and press Enter
Enter the block key: type the dot-notation path of the key to update (e.g., config.db.host)
Enter the new value: type the replacement value — the extension auto-detects the type:
- Numbers (e.g., 5432) → stored as number
- true / false → stored as boolean
- Valid JSON (e.g., {"port": 3000}) → stored as object/array
- Anything else → stored as string
The change is applied to all selected files simultaneously

Example: To change the database port in every config/app.json in your workspace:

Run Batch Update Structured Files

Select all app.json files

Enter key: config.db.port

Enter value: 5432

Supported File Formats

Format	Extensions	Notes
JSON	`.json`	Full support for nested objects and arrays
YAML	`.yaml`, `.yml`	Preserves comments and structure
XML	`.xml`	Uses `fast-xml-parser` for round-trip parsing
TOML	`.toml`	Supports tables and primitive values

Development & Debugging

Prerequisites

Node.js (v16 or later recommended)
Visual Studio Code v1.75.0 or later

Setup

# Clone the repository
git clone https://github.com/aaronpliu/vsfilemanager.git
cd vsfilemanager

# Install dependencies
npm install

Running the Extension in Development Mode

Open the project folder in VS Code
Press F5 (or go to Run → Start Debugging)
- This launches a new Extension Development Host window with the extension loaded
- A pre-configured launch.json is included in .vscode/
In the new window, open a supported file (.json, .yaml, .xml, .toml)
Run a command from the Command Palette (e.g., Edit Structured Blocks) to exercise the extension

Debugging Tips

Breakpoints: Click the gutter next to any line in extension.js or files under src/ to set a breakpoint. The debugger will pause execution when that code runs in the Extension Development Host.
Debug Console: Use the Debug Console panel in VS Code to inspect variables, evaluate expressions, and view console.log / console.error output from the extension.
Reload the Extension: While debugging, press Ctrl+R (Cmd+R on macOS) in the Extension Development Host window to reload without restarting the debugger.
Watch mode for tests: Run npm run test:unit -- --watch to automatically re-run unit tests when source files change.

Running Tests

# Run unit tests with Jest
npm run test:unit

# Run lint
npm run lint

Packaging a Local VSIX

# Install vsce globally if not already present
npm install -g @vscode/vsce

# Package the extension
vsce package

# Install the generated .vsix file via Extensions → "..." → Install from VSIX...

Extension Settings

This extension contributes the following settings:

vsfilemanager.enable: Enable/disable this extension
vsfilemanager.syncPrompt: Enable/disable automatic sync prompts