Top 3 VSCode Extensions for React
For this week’s blog I’ll be going over the top 3 VSCode extensions that I use or at least think are very helpful for React. Now these 3 extensions I believe will definitely make your life a lot easier writing out your projects so you can speed up your process but at the same time make sure your code comes out clean 😂.
1. ES7 React/Redux/GraphQL/React-Native snippets
I know we all most likely know about this one especially that us coders are lazy in certain ways (Yes, we are lazy you know that). ES7 snippets is an extension that generates common code in React by typing in shortcuts or prefix that will layout or should I say import the method you are trying to use. For example typing in “rfce” will import an empty function ready for you to use in a new file.
There’s a whole bunch of different prefix’s and commands you can type in to give you different methods (Don’t remember all of them from the top of my head) the extension will have the reference for all the commands you can type in.
2. React Native Tools
React Native tools is simple and pretty straight forward, it will take your React native apps and run them on simulators or mobile devices to show you how your app would look on those mobile devices. It will also quickly debug your code if you made any mistakes so it can run on the simulation. It works similar to most extensions but what you write in is “React Native: Run on IOS simulator” or switch IOS for Android or any other simulator it offers in the command palette.
3. VSCode React Refactor
Lastly we have an extension that I wish I been found out about to help me fix up my code and make it a lot more easier to find or at least to connect to each other whenever I feel like I’m writing too much. This extension refactors the long codes you have in a component to make it more readable. It also extracts certain code to put it in a new class or an existing one that should have that code in it to be more understandable. This extension is a little different to use, you just highlight the code you want to be refactored, click on a little blue light bulb that pops up on the left side of the code and click on “Extract JSX to functional component” or class component; name it and it’ll refactor the code for you.
