🚀 Activity Bar Icon: Dedicated DevKit Studio icon for easy access
🛠️ Built-in Developer Tools: Ready-to-use tools organized by category
Images: QR Code generator, White color palette
String: Base64 encoder/decoder, JWT token parser
🎯 On-Demand: Tools panel only appears when you need it
🎨 Native Integration: Follows VS Code's design patterns
⚡ Lightweight: Minimal impact on VS Code performancedevelopment toolkit for VS Code featuring integrated developer tools accessible via Activity Bar.
🎯 Layout Overview
DevKit Studio adds a dedicated section to VS Code's Activity Bar:
� Activity Bar Integration
DevKit Studio Icon: Rocket (🚀) icon in VS Code's Activity Bar (left sidebar)
Click to Open: Tools panel only appears when you click the icon
Developer Tools Panel: Organized tools by category (Images/String)
Non-intrusive: Doesn't interfere with existing VS Code workflow
📝 Editor Area
Unchanged: Keep your current editor and workflow
Tool Windows: Click tools to open specialized interfaces in new editor tabs
Non-intrusive: Extension doesn't replace or interfere with existing editors
✨ Features
� Integrated Tools: Developer tools organized in Explorer panel
📁 Non-Intrusive: Doesn't replace VS Code's default file explorer
🛠️ Built-in Developer Tools: Ready-to-use tools organized by category
Images: QR Code generator, White color palette
String: Base64 encoder/decoder, JWT token parser
🎨 Native Integration: Follows VS Code's design patterns
⚡ Lightweight: Minimal impact on VS Code performance
🚀 Quick Start
Install: Run ./install.sh or npm run build-and-install
Reload VS Code: Press Cmd+R (Mac) or Ctrl+R (Windows/Linux) to reload window
Find DevKit Studio: Look for 🚀 DevKit Studio icon in Activity Bar (left sidebar)
Open Tools: Click the DevKit Studio icon to open the tools panel
Explore Tools:
Expand Images category: QR Code, White Palette
Expand String category: Base64, JWT Parser
Use Tools: Click any tool name to open it in a new editor tab
📋 Available Commands
DevKit Studio: Open DevKit Editor - Open the general DevKit interface
DevKit Studio: Refresh Projects - Refresh tools list
DevKit Studio: Open Tool - Launch a specific developer tool
DevKit Studio: Hello World - Test command
🛠️ Developer Tools
Images Category
QR Code Generator: Create QR codes from any text or URL
White Palette: Collection of white and off-white color codes
String Category
Base64 Encoder/Decoder: Encode and decode Base64 strings
JWT Parser: Parse and analyze JWT tokens with header, payload, and signature info
🔧 Development
# Install dependencies
npm install
# Development watch mode
npm run watch
# Build and install locally
npm run build-and-install
# ⚠️ Remember to reload VS Code: Cmd+R (Mac) or Ctrl+R (Windows/Linux)
# Quick development workflow
npm run dev
# Then reload VS Code
# Package only
npm run package
Package only
npm run package
## 🎮 Usage Tips
1. **Activity Bar Access**:
- Look for 🚀 **DevKit Studio** icon in Activity Bar (left sidebar)
- **Click icon** to open/close the tools panel
- Panel only appears when you need it (on-demand)
2. **Tool Usage**:
- Tools open in **new editor tabs** (non-intrusive)
- **QR Code**: Generate QR codes from text
- **White Palette**: Copy color codes to clipboard
- **Base64**: Encode/decode text
- **JWT Parser**: Analyze JWT tokens
3. **Workflow**:
- Normal file editing continues unchanged
- Access tools when needed via DevKit Studio icon
- Tools integrate seamlessly with VS Code's tab system
## 🏗️ Tech Stack
- **TypeScript** - Main development language
- **VS Code API** - TreeView + WebviewPanel integration
- **esbuild** - Fast bundler
- **HTML/CSS/JS** - Custom editor interface
## 📁 Project Structure
src/
├── extension.ts # Main extension logic with dual-pane setup
└── test/
└── extension.test.ts # Test suite
## 🎨 Interface Components
- **FileExplorerProvider**: Left pane file navigation
- **ProjectsProvider**: Left pane project management
- **DevKitEditorProvider**: Right pane custom editor
- **Webview Integration**: Interactive dashboard
## 📜 License
Personal use only - not for distribution.
