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 [email protected], 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.

No React components found?

Omlet currently supports React and React Native components. If the extension isn’t detecting components in your React project, ensure your project has a .git file as Omlet relies on Git history to track components.

If your project doesn’t have a .git file, you can initialize Git using the below command sequence. This will set things up locally without requiring you to publish the project to a remote repository.

git init 
git add . 
git commit -m "Initial commit"

If the issue persist after setting up .git, ping us at [email protected].

Having performance issues?

If you’re working in a large project—such as a monorepo or a codebase with many microservices—scans may take longer than expected.

To improve performance, you can narrow the scan scope using the rootPath setting to specify where the scan should start, and the ignoredPaths setting to exclude folders you don’t need to be scanned. These options can help reduce scan time significantly by focusing only on directories with React components instead of scanning the entire workspace.

To update these settings in VS Code:

1. Open the Command Palette (Cmd/Ctrl + Shift + P) and type “Preferences: Open Settings (UI)”.

2. In the top search bar, type “Omlet”.

3. Scroll to the Extension: Omlet section.

4. Adjust the Root Path and Ignored Paths fields as needed.

If you’re still running into issues, we’d love to hear more about your setup. Feel free to ping us at [email protected] with details such as how many components you’re working with or a screen recording.

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 [email protected].