🧪 VS Code HookGuard Extension

HookGuard is a powerful developer tool for React developers, designed to catch complex, often invisible bugs related to useEffect, useCallback, and custom hooks — before they reach production.

This extension brings HookGuard's analysis directly into your editor, with real-time diagnostics, inline suggestions, and actionable feedback.

🚀 What It Catches

HookGuard is more than a linter. It detects structural issues that ESLint often misses, such as:

• ❌ Forgotten cleanups inside useEffect
• ⚠️ Unsafe async logic inside hook callbacks
• 🔁 Excessive or missing dependencies
• 🔍 Custom hooks with hidden or unsafe side effects In Progress
• 📦 Patterns that can cause stale closures or memory leaks

Each detection includes:

• a clear description
• a relevant code highlight
• suggestions you can act on immediately

🧠 Why HookGuard?

Most linters operate at the syntax level — HookGuard works at the reactive structure level.

Its rules are:

• 🎯 Focused on real-world React pain points
• 🔌 Extensible via config and plugins
• 🤖 Designed with long-term maintainability in mind

HookGuard rules are based on developer experience in real production codebases (games, AI tools, multi-user dashboards), and go beyond the obvious.

📸 Screenshots

⚙️ Features

• ✅ Run HookGuard analysis automatically on file save and changes
• 🧠 Live diagnostics with problem explanations
• 🧪 Hover over violations to see detailed messages
• 📁 Dashboard with hook hygiene synthesis
• 📊 Score feedback on hook hygiene In Progress
• 📦 Integrated with the published hookguard CLI

🔄 Live Inline Highlighting

• Risky hooks are now underlined in real time as you type.
• No need to save the file to see issues.
• Hover to see which rule is violated and why.

📦 Installation

Search for HookGuard in the VS Code Marketplace, or install manually:

ext install hookguard.vscode-hookguard

You’ll also want to install the CLI globally or locally in your repo:

npm install hookguard --save-dev

🔧 Configuration

By default, the extension uses the CLI with its built-in rules.
To customize behavior:

1. Create a hookguard.config.ts in your project root.
2. Export your rules or adjust built-in ones.

Example:

export default {
  rules: {
    "async-effect": true,
    "no-cleanup": false,
  },
};

🛡️ Telemetry & Privacy

HookGuard is designed to be privacy-conscious.
No telemetry is sent without your explicit opt-in.

Coming soon: a --optInTelemetry flag and dashboard access to track issues and hygiene score trends.

🛣️ Roadmap

HookGuard is evolving beyond simple linting. Here’s what’s coming next:

✅ Project Dashboard (In Progress)

• Visualize hook hygiene across the whole codebase
• Sort and filter files by score, errors, and rules violated
• Quick access to files with issues
• Rule breakdown and future fix suggestion UI

🔄 1. Inline Highlighting While Typing

Highlight risky hooks directly as you type, not just on save.

• Live diagnostics powered by onDidChangeTextDocument
• More precise Range detection for diagnostics
• Enable real-time feedback loop (stale closure, missing deps, etc.)

📈 Improves developer awareness and reduces context-switching

🛠️ 2. Smart Auto-Fix Suggestions

Auto-suggest proven patterns to avoid common pitfalls.

• useEffect() without cleanup → propose return () => { ... }
• Fetch calls without AbortController → suggest controller usage
• Implemented via CodeActionProvider tied to HookGuard rules

📈 Improves code quality with minimal manual effort

💡 3. Rich Tooltips for Custom Hooks In Progress

Provide context-aware tooltips for custom hooks across your project.

• Show file of origin, effect footprint, and rule violations
• Works like "Go to Definition" + "Docs" + "Safety rating"
• Implemented via HoverProvider

📈 Enables safer reuse of internal abstractions

🧭 4. Advanced Filtering & Exploration Panel Incoming

Let developers inspect their hook hygiene in powerful new ways.

• Filter issues by rule, severity, or filename
• Tag ignored rules or mark as intentional
• Optional export as JSON/Markdown report

📈 Makes HookGuard a true architecture observability tool

📊 5. Auditable Reports and CI Integration Incoming

Hookguard dashboard is in beta, and we're working on integrating with CI/CD and pull requests.

Generate audits for teams and automated workflows.

• Export hooks usage analysis as Markdown or JSON
• Integrate with pull requests or CI/CD
• Track hygiene score over time

📈 Great for tech debt tracking, onboarding, and engineering audits

📈 Adoption

🧪 HookGuard has already been downloaded 1000+ times on npm in just a few days — even before any public launch.

This suggests a real need for better guardrails in complex React codebases.

🤝 Feedback Welcome

This started as a personal project and is evolving into a robust tool.
If you're using it and have suggestions, ideas, or bugs to report:

• Open an issue
• Reach out via kodereview.com
• Join the beta for the upcoming visual dashboard

🧠 Author

Built with care by a full-stack engineer focused on React, DX, tooling, and system design — previously in game development (LiveOps, backend, analytics), now building tools at the intersection of dev and AI.

🧭 Roadmap Highlights

• 🛠️ More structural rules (custom hook composition, reactive data patterns)
• 🚦 Inline autocorrection suggestions
• 📊 Visual dashboard with hygiene trends over time

✅ License

MIT