Skip to content

VS Code Extension – Monitor your system’s performance in real time with sleek, animated CPU usage graphics displayed right inside your editor.

License

Notifications You must be signed in to change notification settings

bubablue/system-performance-extension

Repository files navigation

System Performance Monitor
System Performance Monitor

📊 Real-time system performance monitoring with animated CPU, memory, and resource usage graphs in VS Code

Demo

📊 Monitor Your System Performance Instantly

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)

  1. Open VS Code
  2. Press Ctrl+Shift+X (or Cmd+Shift+X on macOS)
  3. Search for "System Performance"
  4. 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

  1. Install the extension from the VS Code Marketplace
  2. Open any workspace in VS Code
  3. View system metrics in the status bar at the bottom
  4. Open the System Resources panel in the Explorer sidebar for detailed graphs
  5. 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

  1. Press F5 to launch the Extension Development Host
  2. Open a test project in the new window
  3. Test the extension functionality

Building for Release

npm run package
🤝 How to Contribute

We welcome contributions! Here's how you can help:

  1. 🐛 Report Bugs - Found an issue? Open an issue
  2. 💡 Suggest Features - Have an idea? We'd love to hear it!
  3. 📝 Improve Documentation - Help make the docs even better
  4. 🔧 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

💡 Have an idea? Suggest a feature🐛 Found a bug? Report it


💝 Support

Love this extension? Help us grow!

Star on GitHub Rate on Marketplace Share on Twitter

📄 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

About

VS Code Extension – Monitor your system’s performance in real time with sleek, animated CPU usage graphics displayed right inside your editor.

Resources

License

Stars

Watchers

Forks

Packages

No packages published