<p>While working on React files in VSCode the most annoying thing is the lack of symbols &amp; outlines support.</p>
<p>🎉 So I created an extension that can finally support that for your React files!🎉
Links below!</p>
<p>Here are the before and after screenshots:</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1638578318646/mQqcc9dmi.png" alt="with.png" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1638578313783/mrVx5YR-2.png" alt="without.png" /></p>
<h2 id="heading-contributing">Contributing</h2>
<p>I am open for contributions.Feel free to raise features requests or PRS!</p>
<p>Head over to the <a target="_blank" href="https://github.com/ShubhamVerma1811/vscode-react-outline">Github repo</a> and make a pull request or raise features requests or issues.</p>
<h3 id="heading-running-locally">Running Locally</h3>
<p>Clone this <a target="_blank" href="https://github.com/ShubhamVerma1811/vscode-react-outline">repo</a> and start the "Debug: Start Debugging" command</p>
<hr />
<h2 id="heading-support">Support</h2>
<p>If you liked this extensions then check out my other <a target="_blank" href="https://marketplace.visualstudio.com/publishers/ShubhamVerma18">extensions</a> and <a target="_blank" href="https://shbm.fyi/tw">follow me on twitter</a>.</p>
<p>You can also Buy Me a Coffee</p>
<p><a href="https://www.buymeacoffee.com/shubhamverma" target="_blank"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&amp;emoji=&amp;slug=shubhamverma&amp;button_colour=55acee&amp;font_colour=000000&amp;font_family=Cookie&amp;outline_colour=000000&amp;coffee_colour=ffffff" /></a></p>
<hr />
<p>Made with ❤️ by <a target="_blank" href="https://shbm.fyi/">Shubham Verma</a></p>


While working on React files in VSCode the most annoying thing is the lack of symbols & outlines support.

🎉 So I created an extension that can finally support that for your React files!🎉
Links below!

Here are the before and after screenshots:

![with.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638578318646/mQqcc9dmi.png)

![without.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638578313783/mrVx5YR-2.png)


## Contributing

I am open for contributions.Feel free to raise features requests or PRS!

Head over to the [Github repo](https://github.com/ShubhamVerma1811/vscode-react-outline) and make a pull request or raise features requests or issues.

### Running Locally

Clone this [repo](https://github.com/ShubhamVerma1811/vscode-react-outline) and start the "Debug: Start Debugging" command

---

## Support

If you liked this extensions then check out my other [extensions](https://marketplace.visualstudio.com/publishers/ShubhamVerma18) and [follow me on twitter](https://shbm.fyi/tw).

You can also Buy Me a Coffee

<a href="https://www.buymeacoffee.com/shubhamverma" target="_blank" rel="nooperner noreferrer"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=shubhamverma&button_colour=55acee&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff"></a>

---

Made with ❤️ by [Shubham Verma](https://shbm.fyi/)




This is a simple extension that shows the symbols and outlines for a React file.

It can detect custom components and also HTML tags.

VSCode Extension that enable symbols and outlines support for your React files!

Hi 👋
I am Shubham Verma, a Frontend Developer from India.


Shubham Verma | Blogs

Shubham Verma | Blogs

VSCode Extension that enable symbols and outlines support for your React files!

This is a simple extension that shows the symbols and outlines for a React file. It can detect custom components and also HTML tags.

Contributing

Running Locally

Support