How To Code Faster in VSCode | Productivity Tool

hey guys how's it going i'm back here with another video and today i decided to bring this video where i'm going to be talking to you guys about three different methods that i use to be able to code faster it doesn't matter what language you use or what you're you're coding it can be games it can be web dev it can be apps whatever i'm just going to talk about all the different methods and ways i found throughout my my coding journey that helped me improve productivity and also allow me to code a lot faster than people who don't use those methods my hope is that um you guys probably know some of the the things i'm going to talk about but also we'll be able to learn um something new that you can implement whenever you're going to be coding in the future so that it can help you as well and you can gain value from this video so with that in mind if you guys could leave a like and subscribe i would massively appreciate it because it would help my channel grow we're hitting 25k subs uh really quick and i'm really grateful for that so if you could leave a like and subscribe if you're not subscribed i would massively appreciate it so yeah let's get into the video [Music] [Applause] [Music] so the first thing i really want to talk about and just get it out of the way is how to properly use shortcuts and i'm not going to be talking about code editors like if you want to really write code a lot faster you can use something like vim which is very popular but i feel like the learning curve for that is pretty high so i won't be mentioning that what i will be mentioning is getting used to all the different shortcuts and kind of things you can do with your keyboard that try to keep you away from your mouse as much as possible this is something very common in programming you don't really want to be using your mouse a lot because it just wastes more time i know it seems like it's it doesn't seem like it wastes that much time but it eventually does you want to keep your hand in your keyboard you want to do most of what you can with your keyboard so that you can increase your productivity and write code faster so i'm gonna go over two or three um shortcuts that i feel are very important and that i feel that are essential for you to know so i'll go over some of the shortcuts that i think are really useful and the first one that i really want to go over is the fact that a lot of people don't know that you can actually navigate throughout files without actually needing to use your mouse so what i mean by that is take into account a sample project like this one right here if i open the explorer you'll see i have a couple files which obviously they're just for uh as an example but um imagine they are useful and we want to navigate throughout them instead of having to come over here um searching for through my project to find the file maybe i have like a bunch of folders and everything um i can actually do this without even touching my my hand in the mouse i can just come over here to my vs code imagine i'm coding over here and i just press ctrl p you'll see that it will start searching for files and if i want to search for file two i can just say file to and just press enter and it will automatically open for me i find this very useful especially when you're working in a project that is huge like in a job it will be very useful for you and um it will just save you a lot of time especially because you won't be needing to try to search for the file which is something that i find very useful and i use it probably every day when i code so this were the shortcuts that i really wanted to show you guys and now let's get into the second advice that i want to give to you guys okay so now that we went over all the shortcuts that i find are are pretty good there there's a lot more obviously but um those are the ones that i feel like i wanted to talk about let's get into the second piece of advice that i can give to you guys so number two in my list would be um using extensions in your favor um and i'm kind of being very specific here with something like vs code which is the most popular code editor out there because it will improve your performance and it will definitely increase the amount of code you can write and some sort of range of time right um and when i talk about extensions i'm going to try to stay away from the most like obvious ones like pretty or prettier is an amazing extension that definitely helps your time um like saving stuff maybe like editing and formatting stuff but i'm not going to talk about that i want to talk about one specific one which a lot of you guys have been asking me in my previous videos what's the name of the extension the extension that i'm talking about is github copilot and i know some of you guys might not be able to get it uh like instantly because i think there's a waitlist but the waitlist for me went pretty fast um like less than a week i was able to get the extension and believe it or not it is one of the best extensions i have on vs code i'm playing out clips over here of me basically just i'm using the extension on my day-to-day work um you can see that it helps a lot because it not only memorizes what you you write it gives you so many suggestions um and you can just click tab like keep pressing tab on your keyboard and just autofilling a lot of stuff especially if you use a framework or your code in a language that is uh pretty widely reused um there's already the ai that supports and powers github co-pilot already knows a lot of the commonly written pieces of code so it will definitely um suggest something that is applicable for your case and i know some people are scared of an ai helping you to code but don't be i feel like the purpose of github co-pilot is to help you and not replace you so um i feel like using the extension will definitely improve you a lot um i'm not sure if you can use it for jobs um i'm just not sure about that but um if you're coding side projects or you're just learning how to code um use that because it will help you a lot and now let's get into the last thing that i want to talk about which is something that i i always wanted to create a tutorial on um but i never did because i feel like it is too small of a topic to make a tutorial on so i'll just include it right here which is creating your own snippets so if you've coded um and let's say react in the past you've probably used this snippet which is like you write one or two letters an acronym for something you press enter and it will autofill a bunch of code for you there's a bunch of extensions out there that already have pre-built snippets for you but my recommendation is if you have a certain way to write code and you wanna like customize it for yourself just create your own snippet because it isn't hard at all especially if you're using vs code um just code has an amazing system for writing snippets and i'll show you guys exactly how you can do it right now okay so i'm gonna use this part as a tutorial on how to create your own um snippet um i'm using the same file we used in the previous examples but basically uh when you have a vs code open up into your project what you can do is you can just click on this thing over here which is the the manage button and then go to user snippets and this should appear um in your screen right you should see um you probably shouldn't see these things over here because i think i created those snippets um or some were also downloaded from extensions but you should probably see a bunch of these names over here and you should see that you can create a new global snippet file which is what we want to click when you click on this it will ask you for a name so a name of your snippet and technically what i want is in our case as an example i want to create a snippet that literally just creates a function i'm using the arrow syntax like this one over here and at the end it will return something like it will return the string hello world um this is a pretty dumb snippet but um you will be like it will help to show you guys how to customize and how to make it look like a good snippet for you so um let's the first thing we need to do is type a name i'll just type it uh function return hello world something like this uh it looks kind of dumb but let me just name it like this and you should see that when i press enter it creates a json file which will be the the way we make our snippet work this is how you actually create the snippet so you can see it gives you some instructions over here and what i want to do is i want to just uncomment this over here because this will be how we're going to write it and the first thing i want to do is i want to delete this scope thing over here so the scope is basically think about it this way if you list out the technologies it will only allow the snippet to be in those technologies but um i really don't really care about that um let's just delete it technically this like this snippet is just for javascript but i don't want to i don't want to care a lot about this so i just usually remove it then i give it a name in our case is a return hello world function or create a return hello function something like that right just a name for you to kind of know what it is this doesn't affect anything it just gives you an idea of what the snippet is and then this is the important part this is a prefix that is going to be used so instead of writing the whole function we need to write an acronym that when we write that acronym it will automatically generate the snippet so i'm going to say something like create hello world function so chwf when we type this and press enter it should create all of the function and it should be a lot faster right then we have the body the body is exactly what you might imagine it's the like the code that you want to write so the way this works is it is an array and instead of it um each element should be a string and the string should be divided in in a way such that um every element you add will generate a new line in in your code so for example for us we want to create a function and we'll just start writing the how a function is usually created in javascript so let's say const then the name of the function since it's like we're not like we don't know yet so we'll just give it a general name like function name like this is what we're gonna write then we're gonna set it equal to whatever you want just to generate the first line of an actual javascript function then we'll just um jump to the next line and the next line will be what you return so i'll just write return um the string saying hello world but returning a string here is kind of weird because this is already a string so i would use um if you're trying to generate a string inside of here i'll just use something that is not this kind of quotes so for example the single quote is different from the double quote so you can just say you're generating a hello world string by using the single quote and at the end we need to put a new line to close our function like this so this is kind of the code that we're writing the name of the function inside of it we're returning hello world and at the end we're putting the the like the brackets right the the square brackets uh no the curly braces but um then we can write a description we'll just say this creates a function in javascript something like this in javascript and then we can just save it and now it's it's basically done it's use it's useful i can come to my index.js um i'll just delete this over here and if i write the acronym that we created over here which is chwf um you can see that it disappears and when i press enter it should generate the function for us automatically the same function that we wrote so that means that if we keep writing this we can keep generating the function for us which is which is honestly amazing there are some things you can even do to to make this look better for example the name of this file over here it's called index.js um i can grab the name um and use it inside of my instead of my snippet um and customize it for the file you're you're inside which is how they use to create snippets and react components for example it's it's that's exactly how they do it for example if we want to make this work uh what we can do is uh let's just come over here to our return statement and instead of returning hello world let's make it so that it will return a message saying the name of the file you are in is and then we want to put the name of the file so how do we get the name of the file that we're currently using and not only the name of the file but i don't want to have the extension the dot js i just want to have the name index right how do i do that well it already has a bunch of built-in um ways to make something like this work for example if we want to get the base name for our file name so like the base part which is the index part we can just use snippet variables inside of here by using the money sign like this over here and opening and closing curly braces and inside of it we can say that we want to grab for the file the file name and we want to grab the base part of it if you want to check out all the variables you can access in vs code snippets you can just go to the documentation but this is a very useful one because you can see that if i save this right now and i come over here and i just put the command which is um i think it's c um f no it's c h w f now it says the name of the file you're in is index if i did this on i don't know file for um you would see that it would say the name of the file is file for so it's working perfectly now this is basically it for how to create snippets and i really hope you guys start doing it because it is very useful it allows you to customize a lot of things and allows you to write code a lot faster so yeah guys that's that's the video i really hope you guys enjoyed it if you enjoyed it please leave a like down below and comment what you want to see next um give me suggestions um let me know let's have a discussion in the description about what snippets or or what what what kind of different approaches you would take to this video um what helps you when you're coding and if you find any of the advices that i gave valuable i really appreciate you watching and yeah that's basically it really hope you guys enjoyed it and i see you guys next time [Music]

Channel: PedroTech

Views: 2,002

Rating: 4.9254661 out of 5

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs tutorial, typescript, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, coding, how to write better code, code faster, vscode extensions, vscode snippets, visual studio code, vs code, app development, feynman technique, how to code, learn to code, how to learn to code

Id: H4Etn1Qj9SI

Length: 13min 57sec (837 seconds)

Published: Mon Sep 20 2021