System Performance Monitor
📊 Real-time system performance monitoring with animated CPU, memory, and resource usage graphs in VS Code
⚡ Essential for developers who want to monitor system resources without leaving VS Code ⚡
This extension is your system performance dashboard right inside VS Code. It provides real-time monitoring of CPU, memory, and system resources with beautiful animated graphs, ensuring you stay aware of your system's health while coding.
📑 Table of Contents
✨ Why You'll Love This Extension
📊 Real-time System Monitoring
Keep track of your system's health without leaving VS Code:
- CPU Usage - Real-time CPU utilization monitoring
- Memory Usage - System and VS Code memory consumption
- VS Code Performance - Specific VS Code CPU and memory usage
- Network I/O - Network activity monitoring
⚡ Zero Configuration
Just install and go! Works seamlessly with:
- Any Operating System - Windows, macOS, and Linux support
- All VS Code Workspaces - Automatic activation on startup
- Lightweight Monitoring - Minimal performance impact
- Customizable Updates - Adjustable refresh intervals
🔧 Developer Friendly
- Status Bar Integration - Quick glance at system metrics
- Visual Graphs - Beautiful animated charts in the sidebar
- Configurable Display - Show/hide specific metrics
- Performance Optimized - Efficient resource usage
🎨 Beautiful Visual Interface
Designed for modern development workflows:
- 📊 Animated Charts - Real-time visual feedback
- 🎯 Clean Design - Integrates seamlessly with VS Code
- 📱 Responsive Layout - Works in any sidebar size
- 🎨 Color-coded Metrics - Easy to read at a glance
🚀 Quick Start
📦 Installation (Click to expand)
Method 1: VS Code Marketplace (Recommended)
- Open VS Code
- Press
Ctrl+Shift+X
(or Cmd+Shift+X
on macOS)
- Search for "System Performance"
- Click Install ✨
Method 2: Command Line
code --install-extension bubablue00.system-performance
Method 3: VSIX File
Download the latest .vsix
file from releases and install manually.
🎯 How to Use
- Install the extension from the VS Code Marketplace
- Open any workspace in VS Code
- View system metrics in the status bar at the bottom
- Open the System Resources panel in the Explorer sidebar for detailed graphs
- Configure settings via VS Code preferences to customize what metrics to show
Pro Tip: Click on any status bar item to quickly open the detailed system resources panel!
📋 Features & Metrics
Metric |
Status Bar |
Graph View |
Configurable |
System CPU |
✅ |
✅ |
✅ |
System Memory |
✅ |
✅ |
✅ |
VS Code CPU |
✅ |
✅ |
✅ |
VS Code Memory |
✅ |
✅ |
✅ |
Network I/O |
✅ |
✅ |
✅ |
📊 Monitored Resources
- System CPU Usage - Overall system CPU utilization percentage
- System Memory - Total system memory usage with available/used breakdown
- VS Code CPU - CPU usage specifically by the VS Code process
- VS Code Memory - Memory consumption by VS Code and its extensions
- Network Activity - Upload/download network I/O statistics
⚙️ Available Commands
System Performance: Show System Graph
- Open the system resources panel
System Performance: Toggle System Graph
- Toggle the panel visibility
System Performance: Refresh
- Manually refresh all metrics
System Performance: Toggle Monitoring
- Enable/disable real-time monitoring
⚙️ Configuration
Customize the extension behavior through VS Code settings:
{
"systemGraph.showCpu": true, // Show CPU usage bar
"systemGraph.showMemory": true, // Show memory usage bar
"systemGraph.showVscodeCpu": true, // Show VS Code CPU usage bar
"systemGraph.showVscodeMemory": true, // Show VS Code memory usage bar
"systemGraph.showNetwork": true, // Show network I/O bar
"systemGraph.statusBarEnabled": true, // Enable/disable status bar monitoring
"systemGraph.updateInterval": 2000 // Update interval in milliseconds (500-10000)
}
🎛️ Configuration Options
- Individual Metrics Control - Toggle specific metrics on/off
- Status Bar Display - Enable/disable status bar integration
- Update Frequency - Customize refresh interval (0.5-10 seconds)
- Visual Customization - Control which graphs and bars are displayed
🛠️ Development & Contributing
🚀 Local Development Setup
Prerequisites
Node.js 16+, npm and VS Code 1.60+
Getting Started
# Clone the repository
git clone https://github.com/bubablue/system-performance-extension.git
cd system-performance-extension
# Install dependencies
npm install
# Open in VS Code
code .
# Start development
npm run watch
Running Tests
# Run all tests
npm test
Debugging
- Press
F5
to launch the Extension Development Host
- Open a test project in the new window
- Test the extension functionality
Building for Release
npm run package
🤝 How to Contribute
We welcome contributions! Here's how you can help:
- 🐛 Report Bugs - Found an issue? Open an issue
- 💡 Suggest Features - Have an idea? We'd love to hear it!
- 📝 Improve Documentation - Help make the docs even better
- 🔧 Submit Code - Fix bugs or add features with a PR
Contribution Guidelines
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature
)
- Commit your changes (
git commit -m 'Add amazing feature'
)
- Push to the branch (
git push origin feature/amazing-feature
)
- Open a Pull Request
📊 Core Features
- � System CPU monitoring - Real-time tracking
- 🧠 Memory usage tracking - System & VS Code
- � Animated graphs - Beautiful visualizations
- � Status bar integration - Quick metrics view
|
🔮 Future Enhancements
- 🔥 Disk I/O monitoring - Coming soon
- 🌡️ Temperature sensors - Under consideration
- 📱 Mobile development metrics - Planned
- 🚀 Performance alerts - In development
|
💝 Support
Love this extension? Help us grow!

📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ by developers, for developers
Monitor your system resources without leaving your favorite editor