Filez VSCode Extension

A VSCode extension to manage and view spec documents in .Filez/specs directory. Filez helps you organize and navigate your project specifications with a dedicated sidebar panel and tabbed document viewer.

Features

• Dedicated Sidebar Panel: Display spec folders in a dedicated SPECS panel in the explorer view
• Tabbed Document Viewer: Open spec documents with a tabbed interface for Requirements, Design, and Task list
• Auto-Refresh: Automatically refresh when directory structure or files change
• Spec Document Support: Specialized support for requirements.md, design.md, and tasks.md files
• Performance Optimized: Caching mechanism and async operations for smooth performance
• Error Handling: Comprehensive error handling with recovery suggestions

Getting Started

Installation

1. Install the extension from the VSCode Marketplace
2. Open your project workspace in VSCode
3. Create a .Filez/specs directory in your workspace root
4. Create spec folders inside the .Filez/specs directory
5. Add requirements.md, design.md, and tasks.md files to your spec folders

Directory Structure

workspace/
├── .Filez/
│   └── specs/
│       ├── feature-a/
│       │   ├── requirements.md
│       │   ├── design.md
│       │   └── tasks.md
│       └── feature-b/
│           ├── requirements.md
│           ├── design.md
│           └── tasks.md
└── ...

Usage

1. View Specs: Open the Explorer view and look for the SPECS panel
2. Browse Specs: Click on a spec folder to open its documents in the editor
3. Switch Documents: Use the tabs at the top of the editor to switch between Requirements, Design, and Task list
4. Refresh: Click the refresh button in the SPECS panel to manually refresh the view
5. Create Specs: Right-click in the SPECS panel to create a new spec folder or files

Commands

Filez provides several commands that can be accessed via the Command Palette (Ctrl+Shift+P or Cmd+Shift+P):

• Filez: Refresh Specs - Refresh the SPECS panel
• Filez: Create Specs Directory - Create the .Filez/specs directory if it doesn't exist
• Filez: Open Specs Directory - Open the .Filez/specs directory in the explorer
• Filez: Create Sample Spec - Create a sample spec folder with template files
• Filez: Show Commands - Show all available Filez commands
• Filez: Show Help - Show help information

Keyboard Shortcuts

• Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac) - Refresh the SPECS panel
• Ctrl+Shift+F (Windows/Linux) or Cmd+Shift+F (Mac) - Show Filez commands

Configuration

Filez can be configured through the VSCode settings:

• filez.specsDirectory: Directory to scan for spec folders (default: .Filez/specs)
• filez.autoRefresh: Automatically refresh when files change (default: true)
• filez.showEmptyFolders: Show folders that don't contain spec files (default: true)
• filez.fileOrder: Preferred order for spec file tabs (default: ["requirements", "design", "tasks"])
• filez.enableFileWatcher: Enable file system watcher for automatic updates (default: true)

Development

This extension is built with TypeScript and uses the VSCode Extension API.

Building

# Install dependencies
npm install

# Compile
npm run compile

# Watch for changes
npm run watch

Testing

# Run all tests
npm test

# Run unit tests
npm run test:unit

# Run integration tests
npm run test:integration

# Run tests with coverage
npm run test:coverage

Packaging

# Package the extension
npm run package

# Package as pre-release
npm run package:pre-release

Running

Press F5 in VSCode to launch the extension in a new Extension Development Host window.

Requirements

• VSCode 1.74.0 or higher
• A workspace with .Filez/specs directory structure

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This extension is licensed under the MIT License. See the LICENSE file for details.