DEV Community

Cover image for Building API Lens: AST-Powered API Analysis for VS Code, VSCodium & Open VSX
Shobhit Kumar
Shobhit Kumar

Posted on

Building API Lens: AST-Powered API Analysis for VS Code, VSCodium & Open VSX

#vscode #extensions #webdev #javascript

🔍 Meet API Lens: AST-Powered API Security & Health Analysis for VS Code & Open VSX

As backend developers working with Express.js and Next.js App Router, catching security gaps, unvalidated request bodies, and bad status codes usually happens during code reviews or after deploying to production.

What if your editor could inspect your API code AST (Abstract Syntax Tree) in real-time, compute a 0–100 API Health Score, and suggest fixes before you even commit?

That’s why I built API Lens — a 100% local, AST-powered extension available on both Visual Studio Marketplace and Open VSX Registry (for VSCodium, Gitpod, Code-Server & Eclipse Theia).

💥 The Problem with Traditional API Linting

Most linter extensions either:

  1. Rely on generic syntax rules without understanding API semantics.
  2. Require live server execution or network interception.
  3. Fail to distinguish client-side HTTP calls (axios.get, fetch) from real backend route declarations.

API Lens solves this by analyzing your code's Abstract Syntax Tree (AST) using Babel parser right inside your editor. It doesn't run your server or touch external APIs. Everything stays 100% private on your machine.

✨ Key Features of API Lens

1. 🚀 Next.js App Router & Express.js Route Discovery

API Lens automatically maps endpoints across Express (app.get, router.post) and Next.js App Router (app/api/**/route.ts), correctly parsing dynamic route params like /api/users/[id] $\rightarrow$ /api/users/:id.

It intelligently ignores frontend client calls (api.patch, axios.get, React components) so you get zero false routes.

2. 🛡️ 3-Tier Input Validation Engine

API Lens evaluates how your API handles incoming request body data:

  • NONE (Warning): Request body (request.json() or req.body) is consumed without any validation.
  • BASIC (Suggestion): Manual presence checks detected (if (!email), typeof, Array.isArray, .length, .includes).
  • STRONG (Passed): Schema-based validation detected (Zod, Joi, Yup, express-validator, or custom validation helpers).

3. 🔐 Smart Authentication Analysis

API Lens detects both Express middleware (protect, passport) and Next.js inline custom authentication helpers (verifyAdminPermission(), requireAuth(), auth(), getServerSession()). It flags unprotected sensitive endpoints (/admin, /user, /settings) with zero false positives.

4. 💡 Inline Editor Diagnostics & Dashboard

Every finding comes with an actionable Recommendation displayed directly inside your editor's Problems panel (Ctrl+Shift+M) and the Interactive Webview Dashboard.

5. 📑 1-Click Documentation & Postman Export

Generate production-ready Markdown API Documentation and Postman v2.1 Collections directly from your workspace!

🌐 Now Available on Open VSX (VSCodium, Gitpod & More)

Whether you use standard VS Code, open-source VSCodium, cloud IDEs like Gitpod and Code-Server, or Eclipse Theia, API Lens is fully available across both registries!

📦 How to Install API Lens

🔹 Option 1: VS Code Marketplace

Search for API Lens in the Extensions sidebar (Ctrl+Shift+X) or install via terminal:

code --install-extension kumarshobhit.apilens
Enter fullscreen mode Exit fullscreen mode

🔹Option 2: Open VSX Registry (VSCodium / Gitpod / Code-Server)

Search for API Lens in your Open VSX-compatible editor or install via terminal:

codium --install-extension kumarshobhit.apilens
Enter fullscreen mode Exit fullscreen mode

🔗 Links & Contribution

If you find API Lens helpful, consider leaving a ⭐ on GitHub or a review on Open VSX / Marketplace!

Feedback and pull requests are always welcome. Happy coding! 🚀

Top comments (0)