Omlet for VS Code
Guide to help you get started with Omlet's VS Code extension.
Last updated
Guide to help you get started with Omlet's VS Code extension.
Last updated
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.
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.
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.
Click on a prop value to see exactly where the component is used with that specific prop-value combo.
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.
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:
Open the Command Palette (Cmd/Ctrl + Shift + P) and type “Preferences: Open Settings (UI)”.
In the top search bar, type “Omlet”.
Scroll to the Extension: Omlet section.
Adjust the Root Path and Ignored Paths fields as needed.
You can install the extension from VS Code marketplace: 🔗
Any issues or feedback? Reach us at , or ping us on .
If the issue persist after setting up .git
, ping us at .
If you’re still running into issues, we’d love to hear more about your setup. Feel free to ping us at with details such as how many components you’re working with or a screen recording.
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. .
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 .