VSCode extensions for react-native
I’ve been working on react-native for past 4 years, here are a list of VSCode extensions I found over time without which my life would have been a tad more complicated. I’ll try to avoid the most common one’s since probably you might have already been using it like React Native Tools, ESLint, Prettier.
Let’s get started!
- GitLens —
When you are working in a team, this is a must have extension.
The reason I love this extension is that when you highlight a line it shows the the commit which changed the line and the time when it was changed. Which is just so important when you are trying to debug an issue.
There are so many other features available in this extension, I’ll let you explore the rest.
2. Bracket Pair Colorizer —
This extension highlights the starting and ending brackets with same color, which makes it so easy to debug huge file or a huge json response.
3. Color Highlight —
It is one of those extension which would be super helpful when you are working with the designers, imagine you are sharing your screen and trying to show the color which you have used in your VSCode, it highlights the hexcode or rgba code with its actual color. Something like
4. Code Spell Checker —
If you are like me, one of those guys when concentrating on the logic his/her word sense goes to toss, this extension is for you. In the spree of finishing up your logic block you end up making typos like below which gets highlighted in blue as soon as you type it.
This extension has helped me not look down upon my past self. If you know what I mean. 🤷♂
5. Code snapshot —
You might have seen some code samples online from other developers which look fancy of social media and might have wondered like me — “This must have been created in Photoshop, damn these guys are putting so much effort on just a post.”
Nope, that’s not how it’s done. It’s done using the above library. You can just highlight the lines of code and take a snap of your code which would look something like this —
There is an option to change the background color as well. It’s a cool extension to have if you are into posting your code in social media.
6. VSCode React Refactor —
Last but not least this one of the best and functional extension which saved a lot of time for me. Using it you can convert a block of code to a component or move it to a function which cleans up the code. The best part is it helps you convert the code into both a functional component or class component.
When you highlight the code you want to convert it into a function or class, just highlight the text and click on the bulb next to the text, you’ll see the above options using which it creates a function or component for you instead of you moving the code manually.
Hope you liked the above extensions, if yes do share the link with your fellow developers and I wouldn’t mind some claps. #shamelessplug
Do let me know if I’m missing any extensions which I should take a look at.
Cheers! 🍻
