Code Faster With Custom VS Code Snippets

[Music] this video is sponsored by the ultimate freelancing bundle by study web development comm 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 to take a look at creating custom vyas code snippets and I'm gonna 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 vyas 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 JSON format we have the snippet name in this case it's a for loop we have the prefix which is gonna be whatever you type in for the snippet so we would do like for in this case and then enter or tab and then it would create the body now the body is gonna 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 gonna 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 gonna show you comes in 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 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 its at snippet - generator dot app 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 a snippet file for JavaScript now you can use any language you want just go ahead and open up the command pallet with command shift P on a Mac or ctrl shift P on Windows and just go ahead and type in or start to type and snip it and you'll see this Preferences configure user snippets okay once you hit that you'll see you can create a new global snippets file or for a specific language and you can see there's tons of languages here there's even like template engines like Jade or pug so we want JavaScript so we're gonna choose right here JavaScript and it's gonna open up a file called JavaScript Jason 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 alright 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 I don't create custom react snippets because I use this right here es 7 react Redux graph QL 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 prefix that some of your extensions use okay you might run into that issue so I'm just going to use CL here for console.log and then we're gonna put in our body now since it's a single line it's just a simple console.log I'm gonna 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 dot log now once we run CL and we get call so log printed out I want my cursor to end up within the parentheses because obviously we're gonna 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 gonna 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 when you start to type out the prefix so let's just say output I will 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 CL and not press anything and you'll see that 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 inside the parentheses okay if I were to move this money sign 1 to the end here and then try it CL now you can see my cursors 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 type out inside the body so this snippet generator it comes in very handy so the next one I want to create is just just a unnamed function okay so if I want to do like function some name 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 n FN okay and then for the snippet I'm gonna 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 a function name okay and then we'll put our parenthesis and let's go ahead and put our curly braces now the first tab stop has a placeholder however I want to add a couple more because once we're done naming the function we might want to add a parameter so let's put in money sign to to make that the second tab stop and then in the function body will do money sign three okay so let's copy the 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 n FN 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 parenthesis 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 gonna do okay so you can set those different tab stops which is very helpful you can also create default values so let's do one for arrow functions okay for a named arrow function so we'll go back in and I'm not going to do like I have 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 some of the capabilities of what we can do with snippets so let's do arrow function we'll just call this a rfn and let's say Const and we're gonna want some kind of name for our arrow functions 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 the third stop it'll copy that go back paste that in and now if I do a 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 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 a snippet for array method so high order array methods like for each map filter reduced there's there's tons of them those are some of the more common ones so I'm gonna call this let's say array method we'll use AR AR M th right now for a choice well basically what I want to be able to do let me just show you real quick let's say we have 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 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 for each let's do kama map kama filter reduce we'll do some and any other ones that you want alright and then after that we want to put in parentheses because it's gonna be you know something dot whether for each map or whatever and then inside here is a callback okay so I'm going to use an arrow function so I'll put in parentheses and I want this to be a named tab stop so I'm going to use money sign to colon and I'll just say per am alright 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 Jason and we'll go ahead and say let's pretend we have an array called people and we'll do dot hey are our 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 I'll hit tab let's say we want to use person here hit tab again brings us into here and we can do console.log and console.log person all right so that's how you can add choices so let's do another example one that I find handy is for Axios so Axios is an HTTP library that allows you to make you know get requests post request put requests so what I like to do is create a preset or I'm 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 a x 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 put and delete all right so once we do that we want to put in our parentheses and let's put in some quotes and then we'll put in 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 any URL and then Axios gives us a promise back so we'll do the dot then and let's do dot catch that over okay so this dot catch let's just take the error and we'll just do a console dot log error and then for the the data the response that comes back we'll just console dot log the res dot data 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 this is a pretty common snippet that I use so I'm gonna copy this and paste this into JavaScript Jason okay so let's say we want to make a request so we'll do a KX r EQ 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 slash users or something like that all right so the last one that I want to create is one that I use quite often not so much in tutorials but on my own is an express server just a basic Express server where we bring it in we initialize it we set a port things like that and we can use choices and placeholders and stuff so let's change this to Express server and if you're not familiar with Express don't worry about it you don't have to understand what the code actually does just just understand the placeholders and stuff like that so let's call this expe SRV and we want to bring in Express so I 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 gonna use a placeholder here are a choice here so I'm gonna do app dot and then let's do money sign curly braces and this is gonna 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 so be app dot one of those and then we'd want the the route so in here let's do put our quotes and then we'll do this is our tech in second tab stop and let's say route okay and then we want to put in 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 process dot E and V dot 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 five thousands some people use you know three thousand eight thousand so I'm gonna put in a choice so so before and let's do three thousand five thousand eight thousand and eighty eighty those are pretty common okay and then down here we want to take that out variable and listen on that port and let's just put a call back here and just do a console dot 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 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 gonna go ahead and copy the snippet and let's put it in our JavaScript jason and we'll save it and now if i want an express server i can just do exp SRV okay so its first going to it's going to ask what type of method HTTP method i want to handle here so i could say like get by hit tab it'll take me to the route let's say we want to handle API slash users hit tab again I could do something like res dot send whatever my user and then if I hit tab again it's gonna bring me to the ports and I can select a certain port okay so we'll say 8,000 alright and I could save it and I have my Express server instead of typing all this stuff out alright so hopefully you guys can see the value in creating custom snippets and again the 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 I actually have a video if I remember I'll put the link in the description where I show you how to create a custom vyas 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 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 web development comm slash 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 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

Channel: Traversy Media

Views: 140,312

Keywords: vscode, vs code, visual studio code, vscode snippets, code, code snippets, custom snippets

Id: JIqk9UxgKEc

Length: 20min 40sec (1240 seconds)

Published: Thu Feb 28 2019