Opticode Analyzer 🚀

Detect React performance issues, missing dependencies, hooks violations, and visualize package size impact — directly inside VS Code.

⚡ Features

🔍 Real-time Analysis - Automatic analysis as you type
📊 Performance Scoring - File scores (0-100) based on issue severity
🎯 Smart Dependency Detection - Find missing deps in hooks
⚠️ Hooks Rules Enforcement - Catch conditional/loop hooks
📦 Bundle Awareness - See package sizes inline
🛠️ Auto-Fixes - Quick fixes via lightbulb menu
⚙️ Configurable - Customize rules via .opticode.json

What It Detects

Issue Type	Priority	Example
Unstable Props	🔴 Error	Objects/arrays passed to memoized components
Missing Dependencies	🔴 Error	`useEffect` without required deps
Hooks Violations	🔴 Error	Conditional hooks, hooks in loops
useEffect without deps	⚠️ Warning	Effects that should have dependencies
Missing Keys	⚠️ Warning	Lists without `key` prop
Heavy Computation	ℹ️ Info	Expensive ops on every render
Console Statements	ℹ️ Info	`console.log` in components

🚀 Quick Start

Installation

Download the .vsix file from releases
In VS Code: Extensions → ⋯ → Install from VSIX...
Select the downloaded file

Or install from VS Code Marketplace (coming soon).

Usage

Keyboard Shortcuts:

Ctrl+Shift+O (Win/Linux) or Cmd+Shift+O (Mac) - Analyze current file
F8 - Go to next issue

Commands:

Ctrl+Shift+P → Opticode: Analyze Current File
Opticode: Go to Next Issue
Opticode: Toggle Low Confidence

Status Bar:

Click ⚡ Opticode to analyze
Shows issue count and performance score

📋 Configuration

Project-Level (`.opticode.json`)

Create .opticode.json in your project root:

{
  "showLowConfidence": false,
  "maxIssues": 10,
  "enabledRules": {
    "useEffect": true,
    "useMemo": true,
    "unstableProps": true,
    "missingDeps": true,
    "hooksRules": true,
    "jsxKeys": true,
    "consoleStatements": true
  }
}

VS Code Settings (`settings.json`)

{
  "opticode.showLowConfidence": false,
  "opticode.maxIssues": 10,
  "opticode.enabledRules.useEffect": true,
  "opticode.enabledRules.useMemo": true,
  "opticode.enabledRules.unstableProps": true,
  "opticode.enabledRules.missingDeps": true,
  "opticode.enabledRules.hooksRules": true,
  "opticode.enabledRules.jsxKeys": true,
  "opticode.enabledRules.consoleStatements": true
}

🎯 Examples

❌ Unstable Props (Triggers Re-renders)

const MemoChild = React.memo(({ config }) => <div>{config.value}</div>);

// Bad: New object every render
<MemoChild config={{ value: count }} />

// Good: Stable reference
const config = useMemo(() => ({ value: count }), [count]);
<MemoChild config={config} />

❌ Missing Dependencies

// Bad: Stale closure
useEffect(() => {
  fetchData(userId);
}, []);

// Good: Proper dependency
useEffect(() => {
  fetchData(userId);
}, [userId]);

❌ Hooks Violations

// Bad: Conditional hook
if (condition) {
  useState(false);
}

// Bad: Hook in loop
items.forEach(() => {
  useEffect(() => {});
});

// Good: Hooks at top level
const [value, setValue] = useState(false);
useEffect(() => { /* ... */ }, [deps]);

📊 Performance Score

Files are scored 0-100 based on issue severity:

🟢 80-100: Good - Minor or no issues
🟡 60-79: Needs Improvement - Some optimization needed
🔴 0-59: Critical - Significant performance issues

Score calculation considers:

Number of issues
Severity weights (Error > Warning > Info)
File complexity

🛠️ Development

Prerequisites

Node.js >= 16.x
VS Code >= 1.80.0

Setup

# Install dependencies
npm install

# Run tests
npm test

# Debug extension
F5 (in VS Code)

# Build for production
npm run build

# Package extension
npm run package

Project Structure

udbhav-opticode-analyzer/
├── src/
│   ├── extensionservice.js    # Main extension entry point
│   └── config/                # Configuration utilities
├── test/                      # Test files
├── samples/                   # Sample code for testing
├── docs/                      # Documentation
├── scripts/                   # Build & utility scripts
├── dist/                      # Compiled output
└── reports/                   # Test coverage & analysis

📈 Roadmap

[ ] TypeScript support (.tsx, .ts)
[ ] Workspace-wide analysis dashboard
[ ] CLI mode for CI/CD integration
[ ] Cross-file prop drilling detection
[ ] Performance trend tracking
[ ] Custom rule definitions
[ ] GitHub PR comments integration

🐛 Known Limitations

BundlePhobia API may be rate-limited for popular packages
Complex dynamic imports may not resolve correctly
Very large files (>10k lines) may have slower analysis

🤝 Contributing

Contributions welcome! Please:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit changes (git commit -m 'Add amazing feature')
Push to branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

MIT License - see LICENSE file for details.

🔗 Links

Repository: https://github.com/Udbhav-regadamilli/opticode-analyzer
Issues: https://github.com/Udbhav-regadamilli/opticode-analyzer/issues
Changelog: CHANGELOG.md

Write faster, cleaner, and more efficient React code. 🚀

Made with ❤️ by Udbhav

Opticode Analyzer

Udbhav