These 5 VsCode Extensions Will Skyrocket Your React Productivity

hey guys how's it going I'm back here with another video and today I'm gonna be introducing to you guys five vs code extensions that are going to drastically improve your code performance and react I bundled up five extensions that I think are extremely important and useful in my day-to-day Life as a react developer and the Only Rule I added to this list is that all of these extensions have to be react specific they might be used for other stuff but their main purpose needs to be react before we get into the video if you could leave a like And subscribe I would massively appreciate it it will help push my videos more people and I would be really grateful if you could do so so with that in mind let's get into the video [Music] [Applause] [Music] [Applause] okay so the first two extensions I'm bundling two of them together that I want to talk about is actually extensions that are going to help you by providing you with Snippets Snippets are basically a type of abbreviation that you can input into a line of code and when you type that and press enter vs code will automatically transform that into some piece of code now this piece of code can be just a single line or it can actually be a whole file you can condense entire files into a single three or four letter abbreviation by using Snippets and it's really cool you can actually create them on your own and I do have a video where I do that however I believe that with stuff like react and and popular Frameworks and libraries out there there are already a lot of extensions of vs code that provides you with those Snippets using Snippets is fundamental in my opinion because it makes your developer experience way faster like whenever I create a component I just trade up right three or four letters into my line of code and it will create that functional component in react for me on its entirety without me having to do all the work on my own now the best two snippet libraries that I think exist in vs code is first of all the es7 react redex graphql react native Snippets this one is really good because it provides a lot of Snippets for a lot of different versions of react for example if you can see down here it has support for different languages but mainly its focus is on creating uh different things that you might need in a react application as you can see I came up with a couple examples of what you can do with this so you guys could see for example something you do a lot in react is importing the packages and files so if you instead of coming here and writing import I don't know react from react we can actually just straight up use the snippet i m r and then press enter and this will automatically generate that line of code for us now obviously this is just for endpoint and react from react which is I don't know you use it a lot but also you want to be able to customize this Command right so if you use the command IMD it will actually import a destructured value from a library that of your choosing and then you can just come over here and change the whatever things you're trying to import right now this makes your developer experience way faster because obviously you'll keep important stuff and not having to write all of this at once will just make it way quicker for you now there's two other things that I can do with this for example if I want to make this into a functional component what I can do is I can actually just come over here and write RFC I do this all the time and it will create a functional component and it not only will create the whole thing for us but it will also take into account the name of the file that we're using right over here we're using the test.js file so we created a component called test obviously if you want to make it capitalize make the name of the file capitalized as well but you can see how easy this is now if you don't want to export by default like this and have it actually separated you can actually just change this all into rfce and you'll see that it will work it will change the way it's formatted and you can just check out the list of commands they have they have a lot of them I recommend just taking a look at them and like I said it's it's just for the purpose of helping you write faster code so there's no downsides of actually using the Snippets this is also really good for testing they have a lot of test commands like if I can just write test over here and you'll see it will generate a testing block for me one that I find myself using a lot is the S test just like this generates a whole file for you and you can imagine how much time you can save by doing stuff like this now the other extension that I think is really useful for Snippets because remember not all Snippets are over here and I think more than one snippet Library can be good as long as they're not conflicting with each other and maybe even if they are you can just use the best out of each library but the second snippet extension that I wanted to introduce you guys is the react hooks snippet bit the reason for this is because like I said the previous extension was made a long time ago I believe and they don't have a lot of support for Hooks and I just found that this one actually makes it extremely simple um to just add Your Hooks and react by just following this um abbreviations over here now it's not as vast as as the other extension it doesn't have that many additions but to be honest this is simple and that's exactly how Snippets should be like if I wanted to create a used State hook over here I would just write U for use um State s for state and then H for hook and you'll see it will create the a template for a u-state hook same thing with the use effect U for use E4 effect and H for hook and you'll see that this is how it would generate now you just have to memorize a bunch of this but to be honest as you progress and you use more of the Snippets you'll get more used to it and it will automatically memorize inside of your head so the third extension I want to show you guys is the vs code react refactor extension so this extension what it does is it basically allows you to just extract pieces of code into react components really simply now remember all of these extensions are very simple because their main purpose is just to improve certain parts of your react developer experience this one is no different for example if I am over here working on a component like this right and I am currently working with this and I want to turn this into a com a different component now I can do this for a variety of the reasons like I can use this because for example over here I don't know if you like if you look at this component it is a component that has a book list and it is looping through a list of books and displaying each book individually so if we want to actually maintain best practices we'll imagine that the each book individually can be used as a component on itself so instead of coming over here and creating the component uh function book something like this and then we're using it over here I can just straight up select the part that I want to turn and extract into a component select This little light bulb over here and click on one of the options over here for example I can click on extract GSX into functional component give it a name like this and you'll see that this component which is generated and also passed over here now I find this to be really useful in a lot of use cases it's not a major change but it's definitely something that can speed up your process and I think it is extremely useful and you should download it now another cool thing you can do with this specific extension is that it has supports for typescript and together with all the other functionalities because not only just extracts components but you can do a lot of things individually with them too for example I could come over here if I wanted to turn this into like an inner function in Arrow so like obviously this wouldn't be that useful for this use case but uh extract to function in modules cope yeah so if I wanted to do something like this where it's just that I turn this into a function that actually is being called over here now I wouldn't do this but there's use case is where you might want to do this so if you wanted to do something like this you can see it also has support for that but not only that but you see I'm on a typescript file now and it actually followed all my typescript Necessities Right Use the correct types it used the correct return types and everything like that if I did the same thing over here [Music] so I'll just remove this this is the JavaScript file and I came over here and I straight up just did the the same command I just did which was extract into in module scope you'll see that it doesn't actually add any typescript because it is not a typescript file so I really like this Library I've been using it for a couple months now and I don't think it is that popular it has that 200 000 downloads that seems pretty good but I honestly I kind of enjoy it and that's why I'm recommending it to you guys okay so this is the fourth extension that I want to talk about and it's one of my favorite ones it's also a very popular one so you might actually know it it's called paste Json as code and in this extension basically you're able to transform any kind of uh Json file into a strategic um code language so it works for any type of language you use in our case over here we're using typescript because I think it's the best use case for this imagine we have this Json over here that we got from somewhere and we want to extract its types and everything related to it into this touchscreen file well the way we can do it is we can just come over here I'm going to press command P to just open this up I'm using Mac I believe it's Ctrl p in Windows then I'm just gonna say paste Json as code and then put the name of the top level type so I'm going to call it books because this over here is a Json containing a bunch of books when I press enter you'll see that this will automatically generate um the type definitions in typescript for a specific book and for the list of books that we have over here so if we were to use this Json into this file over here this would all work perfectly because it was correctly generated by this file now in my opinion this would be actually more useful for com more complex Json files like this I just came up with here an example of a more complex thing with more different data types different um I don't know like sometimes maybe you need some enums like we have categories over here something that will require this uh this extension to actually think about what the type definitions are and it will actually work perfectly I'll just come over here and I'll press the same thing I'll go to paste jsons code um no I need to copy this and then I'll I'll open this up and say paste jsons code and then straight up say let's just call this Library and you can see it generated everything for us so I'll open this up a little bit more see like it has a lot of type definitions a lot of things everything was perfectly created to to actually match whatever we have inside of this Json now there's a lot of things that you can actually do with this especially because I believe it has something called quick type which allows you to all right make changes into your Json that will automatically be represented inside of your other files but I won't get into it I really enjoy this extension I use it a lot especially because I make these videos for you and I have to work with a lot of Json files so I find it really useful I think you guys will too so let me know in the comments if you guys tried it out and if you guys enjoyed it okay so the last one is actually one of the ones that I like the most but also I don't know how many of you guys will actually um find this that useful I find it useful because when you're working in a new company or whenever you're working with a group amount of people which use a lot of svgs it's kind of hard to deal with it because if you've ever tried opening a like an SVG file you'll obviously see that SVG is made up with a bunch of lines of code right now an SVG is a picture right when we put it inside of our project it comes out as a picture but when we just try to open it like this we won't obviously be able to see the picture which makes it hard for us to actually see what we're using now I made a bunch of svgs over here that are simple um examples as you can see they're actually um I think they're just like circles rectangles uh triangles stuff like that but I don't I'm not able to see it so that's where this extension over here SVG Gallery comes in so this extension is not that popular as you can see however it is really cool because what you can do is whenever you have a folder with assets that include svgs you can just right click on the folder and open in SVG gallery and it will automatically open this up and it will show you what each file that is an SVG file corresponds to which image you can obviously change toggle like this I always use light but you can open up the file whenever you want and you'll go directly to that one so if you're ever confused on which SVG to use because you can't really see the image um download this this extension and it will be really useful for you and that's basically it I really hope you guys enjoyed this video If you enjoyed it please leave a like down below and comment which one next like always check out my links in the description like I have links for uh all the gear that I use for this video those lights in the background which you guys been asking me about and um a lot more let me know what you guys want to see I'm making videos twice a week which means I have a lot more flexibility to make small videos like this one which you guys can request me to do and it won't take a lot of time to produce them so yeah that's that's basically it I really hope you guys enjoyed it and I see you guys next time [Music] [Applause] foreign [Music] [Applause] [Music] [Applause] [Music]

Channel: PedroTech

Views: 32,060

Keywords: computer science, crud, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, vscode, vscode extensions, vscode extensions for react, react vscode, vscode productivity, better code, code productivity

Id: UolaGb7tR38

Length: 13min 35sec (815 seconds)

Published: Tue Jun 06 2023