Omlet for VS Code

Guide to help you get started with Omlet's VS Code extension.

Omlet for VS Code provides real-time insights into your React components directly within your editor—allowing you to monitor component usage, analyze prop values, visualize dependencies, and identify unused elements.

Quick demo

Installation

You can install the extension from VS Code marketplace: 🔗 Install Omlet for VS Code

Once the extension is installed, you can open a React project to get started. The extension will automatically run when it detects any .js, .ts, .jsx, or .tsx files.

Any issues or feedback? Reach us at [e-mail], or ping us on Discord.

Get started

1

See how many times a component is used directly in code

Omlet for VS Code displays how many times a component is used, directly above its definition. No need to search through your codebase — just glance at the usage count in your editor.

Component usage counts

2

Discover how many times each prop is used — and with which values

Select a line where a prop is defined to see how many times it’s used across the codebase. Hover over it to get a quick breakdown of the values passed.

Prop usage counts

Click on a prop value to see exactly where the component is used with that specific prop-value combo.

3

Visualize where components are used with the dependency tree

See where components are used in a interactive map. Refine components and props confidently — minimizing bugs and predicting the impact of updates.

Prop usage counts

4

View all components in your project and their usage details

The extension lists all your components in the sidebar, showing their usage counts at a glance. If you need to dive deeper, you can click a component to view its dependency tree.

5

Clean up unused props and components

Right below the component list in the sidebar, you’ll find two cleanup sections: One for unused props and one for unused components. Those will help you clean up your library and keep components simpler.

Need more data?

The extension analyze the usage only within the repo opened with VS Code. For advanced scanning capabilities beyond the extension, you can use Omlet CLI to scan multiple repositories and set up your Web dashboard. Get started with a tutorial.

What's next?

We plan to provide more insights in the editor, integrate it further with Omlet’s Dashboard, and introduce linter-like capabilities. Feel free to tell us more about your experience with the extension and share any feedback at [e-mail].