Web Metrics AI - VS Code Extension

AI-powered web performance metrics and inline improvements with real-time analysis for HTML, CSS, JavaScript, TypeScript, and React files.

Features

🚀 Real-time Performance Analysis

HTML Analysis: Missing alt tags, lazy loading, render-blocking scripts, viewport meta
CSS Analysis: Expensive properties, !important usage, vendor prefixes
JavaScript/TypeScript Analysis: Console logs, wildcard imports, inefficient DOM queries
React Analysis: Missing keys, inefficient re-renders, styled-components optimization

🤖 AI-Powered Suggestions

Multi-provider Support: OpenAI, Anthropic, and local AI models
Context-aware Recommendations: Analyzes code context for specific improvements
Code Examples: Provides actionable code snippets with explanations
Impact Assessment: Shows expected performance improvements

💡 Inline Hints

Real-time Feedback: Performance hints appear as you type
Visual Indicators: Icons and tooltips for different issue types
Severity Levels: Error, warning, and info classifications
Quick Actions: Click hints to get AI suggestions

⚙️ Configuration

Enable/Disable: Toggle extension features
AI Provider Selection: Choose your preferred AI service
API Key Management: Secure storage of API credentials
Inline Hints Control: Customize hint display preferences

Installation

From VS Code Marketplace

Open VS Code
Go to Extensions (Ctrl+Shift+X)
Search for "Web Metrics AI"
Click Install

Manual Installation

Download the .vsix file from releases
In VS Code, go to Extensions
Click the "..." menu and select "Install from VSIX..."
Choose the downloaded file

Quick Start

Open a web file (HTML, CSS, JS, TS, React)
See inline hints appear automatically
Click on hints to get AI suggestions
Use commands from Command Palette:
- Web Metrics AI: Analyze Performance
- Web Metrics AI: Toggle Inline Hints
- Web Metrics AI: Get AI Suggestion

Configuration

AI Provider Setup

OpenAI

Get an API key from OpenAI
Set webMetricsAI.apiKey in settings
Set webMetricsAI.aiProvider to "openai"

Anthropic

Get an API key from Anthropic
Set webMetricsAI.apiKey in settings
Set webMetricsAI.aiProvider to "anthropic"

Settings

{
  "webMetricsAI.enabled": true,
  "webMetricsAI.aiProvider": "openai",
  "webMetricsAI.apiKey": "your-api-key-here",
  "webMetricsAI.showInlineHints": true
}

Supported File Types

HTML (.html, .htm)
CSS (.css, .scss, .sass, .less)
JavaScript (.js, .mjs)
TypeScript (.ts, .tsx)
React (.jsx, .tsx)

Analysis Types

Performance Issues

Render-blocking resources
Missing lazy loading
Expensive CSS properties
Inefficient DOM queries

Accessibility Issues

Missing alt attributes
Missing viewport meta tags
Semantic HTML violations

Code Quality Issues

Console.log statements
Wildcard imports
!important usage
Unnecessary vendor prefixes

React-Specific Issues

Missing key props
Inefficient re-renders
Styled-components optimization
Hook dependencies

Commands

Command	Description
`webMetricsAI.analyzePerformance`	Run full performance analysis
`webMetricsAI.toggleInlineHints`	Toggle inline hint display
`webMetricsAI.getAISuggestion`	Get AI suggestion for selected issue

Status Bar

The extension adds a status bar item with a pulse icon that:

Shows extension status
Provides quick access to analysis
Displays current configuration

Webview Panel

The AI Suggestions panel provides:

Detailed issue information
AI-generated improvement recommendations
Code examples with explanations
One-click fix application
Links to relevant documentation

Development

Prerequisites

Node.js 16+
VS Code Extension Development Tools

Setup

git clone https://github.com/your-username/ai-web-metric-tool.git
cd ai-web-metric-tool
npm install
npm run compile

Testing

Press F5 in VS Code to launch Extension Development Host
Open a web file to test the extension
Check the Output panel for extension logs

Building

npm run package  # Creates .vsix file
npm run publish  # Publishes to marketplace (requires publisher account)

Contributing

Fork the repository
Create a feature branch
Make your changes
Add tests if applicable
Submit a pull request

License

MIT License - see LICENSE file for details

Support

Issues: GitHub Issues
Documentation: GitHub Wiki
Discussions: GitHub Discussions

Changelog

v0.0.1

Initial release
Real-time performance analysis
AI-powered suggestions
Inline hints for web files
Multi-language support (HTML, CSS, JS, TS, React)
Configurable AI providers

Web Metrics AI

Ankur Singh