Product Thumbnail

Omlet for VS Code

Get React component usage insights in VS Code

Developer Tools

Omlet is a component analytics tool for React. You can now use Omlet directly in VS Code and analyze how and where your React components (and their props) are used as you're coding — helping you confidently update, clean up and maintain your component library.

Top comment

Hey folks, Berk here from the Omlet crew. I'm one of the co-founders. 👋 Today, we're super excited to announce Omlet for VS Code — our biggest update since launch! You can now analyze how and where your React components (and their props) are used right inside your editor — helping you confidently update, clean up, and maintain your component library, reducing tech debt along the way. Get started at https://omlet.dev/extension and let us know what you think — we're just getting started so any feedback would be super helpful. Cheers!

Comment highlights

Does this extension work equally well with class-based components? More often developers will need this extension to look at legacy code, and most of the legacy code is written in class-based components. Also how does it handle dynamically imported components? Will Omlet be able to trace down usage of a component which is imported and used something like this:

  useEffect(() => {
      import(`./components${props.component}`).then((resp) => {
          setComponent(resp);
          setCompLoaded(true);
      });
  }, [props.component]);

I know this is not a typical React side-effect, and probably looks stupid. Trust me, this is production code written by my predecessors

More useful part of this extension is the sidebar and the children components. Because the usage of the component itself can be checked directly by cmd + click on the component definition. Yeah granted that filtering the usage by prop values can be a plus in extensive codebases. Overall, this is a very useful extension for React devs.

I've been wanting to clean up our components. This is going to make it so much faster! 🤩

The ability to analyze component usage seamlessly within the coding environment fosters confidence and efficiency, making it a must-have for any React developer looking to streamline their workflow.

This is a great way to streamline development—being able to track how and where components are used directly within the editor will save so much time and reduce the risk of errors. How does Omlet handle situations where components are used in complex or deeply nested structures—does it still provide clear visibility for those cases?

Omlet for VS Code looks like a huge productivity boost for React devs! 🔥 Being able to track component usage and props right inside the editor is a game-changer for maintaining a clean, efficient codebase. This will definitely help teams reduce tech debt and refactor with confidence. Congrats on the launch! 🚀 Looking forward to trying it out.

Congratulations on the launch of Omlet as a component analytics tool for React! Integrating it directly into VS Code sounds like a fantastic way to streamline development and maintain component libraries.
Could you share more details about how Omlet handles complex component hierarchies or dynamic props?