Code Faster With Custom VS Code Snippets

Key Takeaways

[Music] this video is sponsored by the ultimate freelancing bundle by study webd development.com which gives you everything you need to start your own freelancing business including 130 page in-depth guide invoicing and client proposal templates website templates an SEO checklist and much more visit the link in the description and use the code Brad 25 to get 25% off hey what's going on guys so in this video I want want to take a look at creating custom vs code Snippets and I'm going to show you a really nice tool a snippet generator that makes this easier for us so this is the documentation if you just search for VSS code Snippets this will be the first result and basically the way it works is you can create Snippets for a specific language or you can create Global Snippets that will basically work in every file now down here you can see the format of a snippet so basically it's in Jason format we have the snippet name in this case it's a for Loop we have the prefix which is going to be whatever you type in for the snippet so we would do like four in this case and then enter or Tab and then it would create the body now the body is going to be either a string or an array if it's a single line of code you can put in a string however if it's multiple lines such as this for Loop then you're going to have to have an array and then for each line have a string okay so you can see there's three lines here so there's three values in this array which can be kind of a pain in the ass to type out so that's where this snippet generator that I'm going to show you comes in um and you don't have to worry about creating the array you can just put in your code and it will generate it for you okay and then we just have the description now there's also things like T tab stops placeholders choices I'm going to show you guys this stuff as we move along but this is the generator that we'll be using it's at snippet generator. apppp and basically you can just put in whatever code you want and it will create your snippet for you and not only does it do vs code but it also does Sublime Text and atom so it's a really nice tool I'll put the link in the description so first thing we want to do is jump into vs code and and we're going to be creating uh a snippet file for JavaScript now you can use any language you want um just go ahead and open up the command pallet with command shift p on a Mac or control shift p on Windows and just go ahead and type in or start to type in snippet and you'll see this preferences configure user Snippets okay once you hit that you'll see uh you can create a new Global Snippets file or for a specific language you can see there's tons of languages here there's even like um template engines like Jade or pug so we want JavaScript so we're going to choose right here JavaScript and it's going to open up a file called javascript. Json we have our opening and closing curly braces with some comments in the middle that kind of tries to explain to us what to do but it's it's actually pretty confusing it's not enough information so let's get rid of all the comments here and before I jump into the tool the the generator I'm just going to create a simple console log snippet right in here all right so we want to put in a snippet name which I'm just going to call console log and we want to set that to an object and in this object we want to have our prefix so our prefix is what we actually want to type I'm going to use CL now you have to kind of be careful here if you have other extensions for instance I use this um I don't create custom react Snippets because I use this right here es7 react Redux graphql react native Snippets and it gives you a whole bunch of Snippets so you want to be careful that you don't use the same uh prefix that some of your extensions use okay you might run into that issue um so I'm just going to use CL here for console log and then we're going to put in our body now since it's a single line it's just a simple console log I'm going to put in a string we don't need an array because we don't have multiple lines so it's just going to do console.log now once we run CL and we get console log printed out I want my cursor to end up within the parenthesis because obviously we're going to want to put something in there to log so this is where tab stops come in so if we put a money sign in one that's going that that represents the first tab stop so that's automatically where it's going to go now you can have more than one and we'll do that in some of the other Snippets if we had another one like two it would go it would end up at the first tab stop and then we could do what we want here if we hit tab again it would automatically go to the next one and I'll give you an example of that in a little bit but that should do it for the console log we just need to add a description and this description will show in the intellisense uh when you start to type out the prefix so let's just say output or we'll just say console log you want to try to keep it short so that it actually shows the text so let's save that and we'll go back into our Javascript file and I'm just going to do c and not press anything and you'll see that it it's showing up right here so we have CL and then it shows the description okay so I can either select that with my mouse I can hit enter or Tab and it gives me a console log and it puts my cursor right inside of the um inside the parentheses okay if I were to move this money sign one to the end here and then try it CL now you can see my cursor is at the end which isn't what I want so let's put that back in there okay so simple enough and as you as your Snippets grow in code I mean it gets a little more complicated to to type out inside the body so this snippet generator comes in very handy so the next one I want to create is just uh just a named function okay so if I want to do like function some name uh and then like that so I want to snip it to just create that so let's go into the generator and the description is going to be placed for the the snippet name and the description and I'm just going to say named function and for the tab trigger this is the prefix so whatever we want to type let's just do nfn okay and then for the snippet I'm going to do function now here's where I'm going to use a placeholder so so this is going to be a tab stop but I'm also going to put some placeholder text so for that we want to do a money sign and then we want to open up some curly braces we want to put the number for the tab stop so this is the first tab stop and then colon and then we can put a placeholder so I'm just going to do function uh function name okay and then we'll put our parenthesis and let's go ahead and put our curly BRAC now the first tab stop has a placeholder however I want to add a couple more cuz once we're done naming the function we might want to add a parameter so let's put in money sign 2 to make that the second tab stop and then in the function body we'll do money sign 3 okay so let's copy this snippet and let's go to our javascript. Json file put a comma here and then paste that in okay so we'll save that and now if I do nfn you'll see we get named function hit enter and now we get function name as a placeholder however it's highlighted so I can just simply delete it and I could do like get user and if I hit tab it goes right into the parentheses so I could put like ID if I hit tab one more time it goes into the function body and I could return ID or whatever it is that I'm going to do okay so you can set those different tab stops which is very helpful you can also um create default values so let's do one for Arrow functions okay for a named Arrow function so we'll go back in uh and I'm not going to do like I have a a a a common Javascript file that I use I'm not going to do every single thing I'm just going to do a couple different ones to show you um some of the capabilities of what we can do with Snippets so let's do Arrow function we'll just call this AR FN and let's say const and and we're going to want some kind of name for our Arrow function so let's just do again curly braces one colon and then we'll say function name and let's set an equal sign we want our parameters and this will be the second tab stop and then our arrow and then we'll put in some curly braces and we'll make this third stop we'll copy that go back paste that in and now if I do AR rfn and hit enter we get our function name which I could just easily change hit tab takes us to the parameters we could put ID tab again goes into the body and it's simple as that all right so the next thing I want to look at is choices okay so we can actually have a drop down of choices so what I want to do is create uh a snippet for array methods so high order array methods like for each map filter reduce there's there's tons of them those are some of the more common ones so I'm going to call this let's say array method we'll use a r r MTH all right now for a choice what basically what I want to be able to do let me just show you real quick quick let's say we have U an array called people I want to be able to do dot array method and then hit tab or enter and have it give us choices of for each map filter things like that um so let's let's create that so we'll say money sign because it's going to be the very first thing is going to be whatever the method is and the way that we have choices is we first put our tab stop which is one and then double pipe character okay and then in here we can have different choices so we'll do four each uh let's do comma map comma filter um reduce we'll do sum and any other ones that you want all right and then after that we want to put in our parentheses because it's going to be you know something dot whether for each map or whatever and then inside here is a call back okay so I'm going to use an arrow function so I'll put in parentheses and I want this to be a named uh tab stop so I'm going to use money sign to colon and I'll just say param all right or actually let's do item that makes more sense so we'll say item and then let's put an arrow open some curly braces and we'll put in our third tab stop okay so let's copy this snippet and let's go back paste it into our javascript. Json and we'll go ahead and say let's pretend we have an array called people and we'll do ARR you can see it pops up right here array method we'll hit that and now we have a choice of all these different methods okay so I'll choose map we'll hit tab let's say we want to use person here hit tab again brings us into here and we can do uh console log oops and console log person all right so that's how you can add choices so let's do another example um one that I find Handy is for axios so axios is an HTTP library that allows you to make you know get requests post requests put requests so what I like to do is create um uh a preset or not a preset a snippet that will give me the choice of the different methods to use so let's do axios request I'll call it ax req and the way if you haven't used axios before we just do axios Dot and then whatever the method is so if we want to make a get request post request and so on so what we can do is put in our tab stop with some choices of get post post put and delete all right so once we do that we want to put in our um parentheses and let's put in some quotes and then we'll put in a a label here or a placeholder so this will be the second tab stop and we're going to do colon and then URL okay because this is going to take in a URL and then axios gives us a promise back so we'll do the dot then uh and let's do do catch move that over okay so this. catch let's just take the error and we'll just do a console.log error and then for the the data the the response that comes back we'll just console.log the res. DAT and you could do whatever you want here if you want to put another tab stop here you could do that but I'll usually check and see what it gives me back anyway so uh this is a pretty common snippet that I use so I'm going to copy this and paste this into our JavaScript Json okay so let's say we want to make a request so we'll do um ax req and now I can select get post put or delete okay so if I say get and then hit tab it'll highlight the URL so then I could change it to like API SL users or something like that all right so the last one that I want to create is one that I use quite often um not so much in tutorials but on my own um is an Express server just a a basic Express server where we bring it in we initialize it we set a port things like that um and we can use choices and placeholders and stuff so let's change this to express server and if you're not familiar with with Express don't worry about it you don't have to understand what the code actually does um just just understand the the placeholders and stuff like that so let's call this exp SRV and we want to bring in Express so we want to require Express and let's initialize our app variable to express and then I'll create a route and this route it could be you know handling a get request post or whatever so I'm going to use a placeholder here or a choice here so I'm going to do app Dot and then let's do money sign curly braces and this is going to be the first tab stop and then we'll put in we want to put in double pipes and let's do get so this could be get post put delete there's others as well but these are the most common um so it' be app. one of those and then we'd want the the route so in here let's do um we'll put our quotes and then we'll do this is our te second tab stop and let's say route okay and then um we want to put in a arrow function here or a regular function whatever you want to do and we need a request response and then I'll make this the function body or the route body I'll make this the third tab stop okay and then we need a port to listen on so I'm going to create a variable called port and what I'll usually do is set it to uh process. env. Port because we want to check for a global Port first or then we need to pick a port now here I'm going to use a choice as well because some people like to use 5,000 some people use you know 3,000 8,000 so I'm going to put in a choice so this will be four and let's do 3,000 5,000 8,000 and 8080 those are pretty common okay and then down here we want to take that app variable and listen on that port and let's just put a call back here and just do a console.log with some back ticks and say server running on Port and then we'll put in our Port variable so that's a pretty common snippet that I use uh and you can see over here if we were to to put this all in the body like this it's kind of a pain in the ass to use all these quotes and inside this array so that's I really like this tool so I'm going to go ahead and copy the snippet and let's put it in our javascript. Json and we'll save it and now if I want an Express server I can just do exp SRV okay so it's first going to it's going to ask what type of uh method HTTP method I want to handle here so I could say like get if I hit tab it'll take me to the route let's say we want to handle API users hit tab again I could do something like res. send uh whatever my user and then if I hit tab again it's going to bring me to the ports and I can select a certain Port okay so I'll say 8,000 all right and then I could save it and I have my Express server instead of typing all this stuff out all right so hopefully you guys can see the value in creating custom Snippets uh and again there are there's tons of extensions that have Snippets as well if you want to look into that and it's pretty easy to create your own extension if you want actually I have a video if I remember I'll put the link in the description where I show you how to create um a custom vs code extension with some bootstrap Snippets okay so that's it guys hopefully you enjoyed this I do want to do some other videos on on uh productivity and and you know speeding things up I want to do a video on shortcuts so that you don't have to use your mouse as much just things that can help you help you guys become better and faster developers but that's it guys if you like this video please leave a like and I'll see you next time hey guys one of the best if not the best resource I can refer you to for starting a freelance business is at study webdevelopment tocom freelancing the Creator Kyle shared it with me and I can personally vouch that this bundle is well worth it you get 130 page guide to freelancing and it comes with things like invoice templates client prop proposals HTML and CSS templates a portfolio website access to a private Facebook community and much more so use the code Brad 25 to get 25% off today