Copilot DocsSync

Enhance GitHub Copilot's understanding of your project by automatically syncing documentation from any website. This VS Code extension intelligently scrapes framework and library documentation, making Copilot more knowledgeable about your specific tech stack and coding patterns.

Features

• Universal Documentation Scraping: Extract documentation from any website with intelligent parsing
• Seamless Copilot Integration: Automatically generates .github/copilot-instructions.md to improve code suggestions
• Smart Caching System: Avoids redundant scraping with intelligent cache management
• Framework Presets: Pre-configured settings for popular frameworks like React, Vue, Angular, and more
• Organized File Structure: Maintains clean directory organization in .github/docs/[framework-name]/
• Intuitive User Interface: Step-by-step wizard that guides you through the documentation sync process

Getting Started

1. Install the Extension: Search for "Copilot DocsSync" in the VS Code Extensions marketplace
2. Open Your Project: Ensure you have a folder or workspace open in VS Code

How to Use

Documentation Sites

For documentation not covered by our presets:

1. Select "Enter Custom URL" from the wizard
2. Provide the documentation website URL
3. Choose a descriptive name for organization purposes

Generated Files

After syncing documentation, the extension creates the following structure in your project:

your-project/
├── .github/
│   ├── copilot-instructions.md  # Copilot enhancement file
│   └── docs/
│       └── [framework-name]/    # Organized documentation files
│           ├── page1.md
│           ├── page2.md
│           └── ...
└── ...

The copilot-instructions.md file serves as a knowledge base that GitHub Copilot references when providing code suggestions for your project.

Configuration

You can customize the extension's behavior through VS Code settings:

{
  "copilot-docssync.defaultOutputDirectory": ".github/docs",
  "copilot-docssync.cacheExpiration": 24,
  "copilot-docssync.maxPagesPerSite": 100,
  "copilot-docssync.defaultFrameworks": [
    "react",
    "vue",
    "angular",
    "nextjs",
    "nuxt",
    "svelte"
  ]
}

Settings Explained

Available Commands

How It Enhances GitHub Copilot

This extension creates a comprehensive knowledge base that GitHub Copilot can reference when working on your project. The generated copilot-instructions.md file helps Copilot:

• Understand Your Tech Stack: Learn about the specific frameworks, libraries, and versions you're using
• Follow Best Practices: Suggest code that aligns with the official documentation patterns and conventions
• Provide Contextual Suggestions: Offer more relevant completions based on your project's documentation
• Stay Current: Reference the latest API methods, features, and recommended approaches from your chosen frameworks

This results in more accurate, helpful, and project-appropriate code suggestions throughout your development process.

Development Setup

If you're interested in contributing to the project or customizing the extension:

# Clone the repository
git clone https://github.com/shahabsalehi/DocsSync.git
cd DocsSync

# Install dependencies
npm install

# Start development mode (auto-recompile on changes)
npm run watch

# Compile once
npm run compile

# Run linting
npm run lint

# Test in VS Code
# Press F5 to open a new Extension Development Host window

Architecture

Core Components

• extension.ts: Main entry point with command registration and user interface wizard
• docsSyncService.ts: Orchestrates the documentation syncing workflow
• scraperService.ts: Handles web scraping using modern HTTP clients and HTML parsing
• cacheService.ts: Manages intelligent caching with time-to-live (TTL) functionality
• instructionsGenerator.ts: Creates GitHub Copilot instruction files from scraped content

Technology Stack

• TypeScript: Provides type safety and enhanced developer experience
• VS Code Extension API: Enables native integration with Visual Studio Code
• Axios: Robust HTTP client for reliable web scraping
• Cheerio: Server-side HTML parsing and manipulation
• Turndown: Converts HTML content to clean, readable Markdown format

Troubleshooting

"No workspace folder found" Error

This error occurs when VS Code doesn't have a project folder open. To resolve:

• Open a folder using File → Open Folder before running the extension

Documentation Not Scraping Properly

If you're having trouble scraping documentation:

• Verify URL Access: Ensure the documentation URL is publicly accessible
• Try Specific Sections: Some websites work better when targeting specific documentation sections rather than the main page
• Clear Cache: Use the "Clear Cache" command and attempt the sync again
• Check Network: Verify your internet connection and any corporate firewall settings

Extension Not Activating

If the extension isn't responding:

• Reload VS Code: Press Ctrl+Shift+P and run "Developer: Reload Window"
• Verify Installation: Check that the extension is properly installed and enabled in the Extensions panel
• Check Output Panel: Look for error messages in the Output panel (select "Copilot DocsSync" from the dropdown)

Contributing

We welcome contributions from the community! Whether you're fixing bugs, adding features, or improving documentation, your help is appreciated.

Getting Started

1. Fork the Repository on GitHub
2. Clone Your Fork: git clone https://github.com/yourusername/DocsSync.git
3. Install Dependencies: Run npm install to set up the development environment
4. Make Your Changes: Edit the source code in the src/ directory
5. Test Locally: Press F5 in VS Code to launch the extension in a development host window
6. Submit a Pull Request: Share your improvements with the community

Development Guidelines

• Follow the existing code style and TypeScript conventions
• Add tests for new functionality when possible
• Update documentation for any user-facing changes
• Ensure your changes don't break existing functionality

License

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

Acknowledgments

This extension builds upon several excellent open-source projects:

• VS Code Extension API for seamless editor integration
• Cheerio for powerful HTML parsing capabilities
• Turndown for clean HTML to Markdown conversion
• VS Code Codicons for consistent iconography

Built for developers who want more intelligent AI assistance in their daily coding workflow.