VS Code Todos Extension

This is an example VS Code extension that demonstrates how to create a sidebar webview using Svelte and TypeScript.

Overview

This extension showcases:

• Creating a VS Code sidebar webview
• Using Svelte for the frontend UI
• TypeScript for the extension backend
• Rollup for bundling the webview assets
• Tailwind CSS for styling

Features

• Sidebar Integration: Adds a "TODO parser" view to the VS Code activity bar
• Modern UI: Built with Svelte components and styled with Tailwind CSS
• TypeScript: Fully typed extension code for better development experience
• Hot Reload: Development setup with watch mode for rapid iteration

Development Setup

1. Install dependencies:

   npm install
   

2. Start development mode:

   npm run watch
   

3. Test the extension:

   • Press F5 in VS Code to launch the Extension Development Host
   • Look for the "TODO parser" icon in the activity bar
   • Click to open the sidebar

Project Structure

├── src/                    # Extension TypeScript source
│   ├── extension.ts        # Main extension entry point
│   ├── SidebarProvider.ts # Webview provider implementation
│   └── getNonce.ts        # Security utility
├── webviews/              # Frontend Svelte application
│   ├── components/        # Svelte components
│   ├── pages/            # Entry points
│   └── app.css           # Global styles
├── out/                   # Compiled extension files
└── out/compiled/         # Bundled webview assets

Technologies Used

• VS Code Extension API: Core extension functionality
• Svelte: Reactive frontend framework
• TypeScript: Type-safe development
• Rollup: Module bundler for webview assets
• Tailwind CSS: Utility-first CSS framework
• PostCSS: CSS processing

Extension Configuration

The extension contributes:

• A sidebar view container with the ID vscode-todos-sidebar-view
• A webview with the ID vscode-todos-sidebar
• Various commands for interaction

Development Notes

This example demonstrates best practices for:

• Webview security with Content Security Policy (CSP)
• Proper extension lifecycle management
• Modern frontend build tooling integration
• TypeScript configuration for VS Code extensions

Getting Started

This is a learning example. To build your own extension:

1. Study the code structure
2. Modify the Svelte components in webviews/components/
3. Update the extension logic in src/extension.ts
4. Customize the styling in webviews/app.css

Note: This is an educational example demonstrating VS Code extension development patterns.