TOP 10 VSCode Extensions for React/React Native Developers (2021)

what's up nudges developers in this video we're gonna speak about must-have extensions for visual studio code for react native developers these are extensions that will make you a better developer because they will help you code faster cleaner and with less bugs but more importantly it will make you the process of coding more enjoyable so that you can focus on building bubs of the future if you haven't already hit the like and subscribe button and without further ado let's jump into it i will start this list with extensions that will benefit all of you that in my opinion are must have extensions for react native developers but event as a bonus i will include some opinionated extensions themes and fonts that i love and i use every day so if you're also interested in that make sure to stick around till the end and the first one on my list is definitely the snippets extensions that probably save me so much time throughout the years so yeah i'm speaking about the uh extension extension called es7 react redux graphql react native snippets so basically these are snippets for a lot of technologies that we use in our react native development and they help us bootstrap and generate some very common code that you have to write over and over again so we all are lazy developers i don't know about you but i'm definitely one so i really hate writing all this boilerplate code and this library definitely helps helps me with that and especially during my live streams when i have to speed up a process i uh end up using them a lot so how does it work uh yeah here are the list of shortcuts that this the extension supports and yeah i'll definitely have to learn more of them because i use probably 10 of the shortcuts that are here but yeah let me show you with an example uh how how this extension can help you so for example i need to create a new component button let's say and i'm here i can write react native functional export component hit enter and this will generate the whole component for me it will include the react everything is done here and i can start implementing the component you can also import for example something from react or from react native such as import react native hit enter and here you'll say for example import a text or import a image and so on i'll not go through more of them because yeah there are a lot of them so learn the ones that you use the most and this will definitely improve the speed of uh the way you develop the next extension specifically build for react native by the microsoft team is called react native tools and if we search react native tools in the market extensions here it is and yeah what it offers it offers some easy tools to use to run your application on devices on simulators uh debug it and so on so when you are in um react native project you can open your command palette and write react native run ios simulator or publish to export reload application yeah there are a lot of commands that you would use a lot of time while developing an application for iraq native uh however most of the times i really stick to using the command line because all of those commands you can do it with just react native run ios for example but if you don't like using the terminal this extension will help you a lot okay on to the next one this one is really something that i wish i had discovered earlier and the extension is called a vs code react refactor and yeah here it is and what it does it will help you refactor gsx code is developed for react but it will also work with react native as well and this will help you refactor long components uh and extract some of the parts into separate components and what i mean by that uh yeah let me open a component that is pretty long here uh yeah this is was for our amazon clone and here i see a comment that this view represents the ratings of a product so if i uh highlight all the code here i press extract jsx to functional component i will give here the name ratings press enter and it will transform this to the ratings component and the cool thing is that it detects what data it needs so in this case it will need product and it sends the product as properties and if i scroll up here i see the newly created function functional component ratings with the same code as i had there and displaying the ratings of a product so the next time when you want to refactor a component and split it down into multiple smaller components which i always recommend then use this tool to make your life easier all right moving on so the next group of extensions are meant to help you write cleaner code and to prevent bugs in future so i'll start with the first one which is called eslint and this extension will integrate eslint into vs code and will give you a easy way to fix linting errors if you have never heard about linters these are what are linters alex if you have never heard about linters they help you define and control the style that you want to keep for a code base so these are very useful when you're working in a team because everyone has their own style of writing the code someone writes uh using tabs someone uses spaces someone prefers to add semicolons advanced someone prefers not to and in most of the cases these are perfectly working code however if you don't keep the same style in a project it can get really out of hand and for new people it's going to be very confusing when they will join the team so if you want to keep them code quality high i highly recommend you using linters and you can actually uh find some standards in the industry some of them are coming from google airbnb have some well-known standards for linters so you can just extend from them and use them as they are or you can also adjust them on your own preference so let me quickly show you how linters help and yeah the extension is called eslint you can find it lint you can find it here and yeah you can read how to to set it up in your vs code basically you will need also to have eslint installed in your project work globally using npm and this is very important file eslint rc dot eslint rc uh which defines the configuration of your uh linting like the rules that you want to enforce so if i open uh here in our project we can see that this is a very simple uh configuration which just extends from react native community it doesn't have any custom rules so for example if i am to write some code like i don't know let's say const label equal to something okay this is perfectly fine code like it will work nothing will crash however first of all uh in our linters we specify that we want our strings to be single quoted that's one issue the second issue is to have semi uh columns at the end that's another issue and the last issue here is uh saying that our label is defined but the value is never used and this is a very uh good indication in a lot of cases with uh you have a bug in the code so for example you forgot to to use the value or something like that where you deleted some code and you left some imported libraries in your code which will decrease the performance and can lead to later bugs one extra step that you can take is to reinforce that the linters are running just before people are committing their changes and in this case nobody will be able to commit their code unless they fix all the linting problems and this way you know that everyone is following the rules that you define the next extension is also here to help you maintain your code pretty and it's called pretier so here if we go into the extensions and search prettier we will find the library here it will help you format your code and keep it consistent uh so let me show you what uh exactly i mean by that uh yeah in our project it also uh needs um dot pre-trc file that defines them some settings for it for example if you need bracket spacing spaces around brackets or single quote or double quote trailing comma and so on so whenever your code i don't know for some reason gets out of style and is not pretty anymore let's say like this and you save it it will take care of everything and it will make sure that it's back to a pretty form and the last one from this category is a code spell checker this is a very general and very useful extension uh spell checker let me find it i've got used from webstorm to to this library and this will basically spell check your code and yeah it's not revolutionary but it's always better when you you spell correctly your variable names and so on especially for me that i'm not a native english speaker sometimes i don't know i make some mistakes and this will uh yeah if i do it like this my co-spell checker will say probably you do the mistake there so i'll go back and fix it and nobody will ever know that i don't know how to spell i no receive all right so moving on the next extension is really useful if you are using git but yeah i can bet that you are using it so let's get into it uh it's called git lens uh and here you can find it that's how it's called uh and what it does it will give you more visibility and control over your git repository so what i mean by that is uh for example let's open an file from our project and if i want to see what were the changes what were the previous changes i can easily press on this icon here on the top right corner called open changes with previous revision and it will uh open the difference between the previous revision and the current one and i can easily see that okay in the previous version we introduced here stripe provider and yeah that's what we did we implemented stripe if i go back one more time we can see that this was the code that was added um at that point in time that is one uh feature of git lance the next one that i really love is the git blame feature and this will show you who wrote each line of code and here in the vs code editor it shows you with like this great text that okay this line was written by you by me a month ago within the back and commit so if you want to see a better view of this git blame you can toggle the file blame here in the top right corner and this will actually show you the whole file and whoever wrote each line of code so when you see over engineered code in your project that is impossible to understand and you want to know who is the person that wrote that you can use this tool to to find out and most probably it was you that did that and you just forgot all right so the next group of extensions uh are small extensions that will help you visualize better your code and will potentially help you find easier bugs so let's get into that and the first one is called highlight matching tag here it is this is helpful especially in huge components uh to understand like where the tag is uh starting and if i hover over this one i see that it ends here if i do it on this one i see that this is the matching tag and and so on so yeah you get the idea the next one is actually very useful whenever you want to change a tag so this is uh called author rename tag and i i saw it right there autorename tag yeah this one so whenever you rename the opening tag it will automatically rename the closing tag uh in react native this is very useful whenever i want to move from a view to i don't know a safe area view i change it here and it automatically renames it uh the closing tag or from a view to a pressable let's say whenever i want to create a button out of a view the next one is called bracket pair colorizer and actually use the second version here and what it does it will show the pair of brackets with different colors so whenever you have uh like function with destructuring props with destructuring array and so on and for example you have a lot of brackets they will have different colors and it's going to be much easier uh to spot like the pairs of these brackets so here like with yellow we see this one and with purple we see this one as well like if we would have like a lot of brackets here they will all have like different colors and speaking about the colors the next extension is called color highlight and this will just render the color that you are writing with hexadecimal code and this is very very useful for me specifically that i'm coming from webstorm and yeah here you can see that okay this is a color and maybe i want a different one so if i put fff that's a white i see it here what i really wish that this library had is a way to actually press on the color and select it in a visual way that's how it was done in web storm and i was usually doing like fff because that's what i remember that is white when i was clicking on it selecting a color that i want like a gray or something like that but i couldn't find something similar in this code and if you have a recommendation please let me know down below because i really miss this feature okay so these were the extensions that helps me code faster and keep my code cleaner and now as i promised let me show you what fema use uh what font and so on because yeah i had a lot of questions during the the live stream let's start with the theme so i use this extension called community material theme it contains a lot of cool color schemes so in my case if i do command shift p and here if we write color theme we can open and here we can see all the options that we have for the colors yeah we can ignore the ones on top because these are not for humans and uh here yeah this is the default community material theme it's it's too much for me my choice is my community material darker this is really neutral it's very easy on the eye and it's really dark okay so moving on the next uh extension is called material theme icons and this is an icon pack that changes vikings of your files and folders in the editor so here you can see that all of them have very custom icons and it's much easier to uh to navigate and to understand like which one is what so here we can see that uh dot tsx files which contains react code have this react logo and it is very easy to understand where is the components where is the styles yeah source assets components and so on here specifically for settings file for pre-tier for example we can see the pre-tier logo right on the file name uh the same way it goes for the eslint for the git attributes uh babel and so on and lastly uh here is the settings.json file for myvs code and if you want to to see some extra things like tab size and so on you can see them here and the last thing that we can we can see here is the phone family that i use which is which is jetbrains mono and yeah i chose this font just to make my transition from uh jetbrains from webstorm to vs code easier and um yeah to to have a similar experience uh in both cases uh also an interesting part is that i have font ligatures to true this is very common and very useful because it will make your arrow functions like look like an arrow or that triple equal sign to look like triple equals um like the equal sign is this one and so on okay guys that's uh that's it from the most important part some of my vs code setup that i use for my react native environment if you have any other suggestions please let me know down below because i know that there are so many uh tools that exist and i don't know about them yet and i would really love to enhance my development experience with them if you enjoy this video please consider uh subscribing to my channel and turn on the notification bell not to miss any future videos because we go live every friday at 2 pm gmt where we develop live react native application such as instagram twitter youtube amazon and a lot of more cool applications that you don't want to miss so that's it for today guys take care stay hydrated and write clean code bye bye

Channel: notJust․dev

Views: 12,258

Keywords: vscode, vscode extensions, best vscode extensions, top 10 vscode extensions, vscode setup, best vscode extensions for react, best vscode extensions for react native, vs code, visual studio code, vadim savin, notjust developer, notjust development, vscode tutorial, top 10 extensions for vscode, visual studio code extensions, web development, mobile development, visual studio code tutorial, vs code extensions, vscode plugins, vscode javascript, visual studio code setup, vsc

Id: jCzJYyknKGg

Length: 19min 41sec (1181 seconds)

Published: Tue Jun 08 2021