Code Insights Dashboard
Overview
Code Insights Dashboard is a VS Code extension that provides real-time code quality metrics with a modern, user-friendly interface. Built by Ismail Mouyahada, this extension helps developers maintain high code quality standards by providing instant feedback on various code metrics.
Features
Real-time Metrics
- Complexity Score: Analyzes cyclomatic complexity of your code
- Readability Index: Evaluates code readability based on line length and nesting
- Style Guide Compliance: Checks adherence to coding style guidelines
- Comment Coverage: Tracks comment percentage in your code
- Code Duplication: Identifies potential duplicate code blocks
- Lines of Code: Monitors code size and growth
Visual Dashboard
- Modern, responsive interface with Tailwind CSS
- Color-coded status indicators
- Clear metric descriptions
- Real-time updates as you code
Installation
- Open VS Code
- Press
Ctrl+P / Cmd+P
- Type
ext install code-insights-dashboard
- Press Enter
Usage
- Open any code file in VS Code
- Press
Ctrl+Shift+P / Cmd+Shift+P
- Type "Show Code Insights Dashboard"
- Press Enter
The dashboard will appear in a new panel, showing real-time metrics for your code.
Configuration
You can customize the extension's behavior through VS Code settings:
{
"codeInsights.complexityThreshold": 15,
"codeInsights.readabilityThreshold": 8
}
Available Settings
| Setting |
Default |
Description |
complexityThreshold |
15 |
Maximum acceptable cyclomatic complexity |
readabilityThreshold |
8 |
Minimum acceptable readability score (0-10) |
Metrics Explained
Complexity Score
Measures code complexity based on:
- Control flow statements (if, for, while, etc.)
- Logical operators
- Switch cases
- Exception handling
Readability Index
Evaluates code readability using:
- Line length
- Nesting depth
- Variable naming conventions
Style Guide Violations
Checks for common style issues:
- Trailing whitespace
- Tab characters
- Naming convention violations
- Missing newlines
Development
Prerequisites
- Node.js (>= 14.x)
- npm
- VS Code
Setup
git clone https://github.com/ismail-mouyahada/code-insights-dashboard
cd code-insights-dashboard
npm install
Build
npm run build
Debug
- Open in VS Code
- Press F5 to start debugging
Contributing
Contributions are welcome! Please read our Contributing Guide for details.
License
MIT License - see the LICENSE file for details.
Author
Ismail Mouyahada
Acknowledgments
- VS Code Extension API Documentation
- Tailwind CSS for the modern UI
- Amazigh art and culture for logo inspiration
Support
For bugs, feature requests, or support questions:
- Create an issue on GitHub
- Contact: [Your Contact Information]
Changelog
v1.0.0
- Initial release
- Basic metrics implementation
- Real-time dashboard
- Tailwind CSS integration
Made with ❤️ by Ismail MOUYAHADA
