How To Create Custom VSCode Snippets

Key Takeaways

in today's video I'm going to show you how to create a vs code snippet hook it up with a keyboard shortcut and do a bunch of advanced snippet features which are going to save you so much time welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and creating your own custom Snippets is one way to really accelerate your workflow so in order to create a snippet you can just click file scroll down to preferences and here you're going to see user Snippets click on this and you're going to get a popup with a bunch of different options you can create a global snippet file a snippet file specifically for the project you're in or you can create a snippet file for like any language you want I think a global snippet file is the best way to go so I'm just going to create a new Global snippet file you can call it whatever you want we'll just call it Snippets and we enter you can see we get essentially a bunch of information at the top here that kind of describes to you how to work with Snippets and if you want some more information on how to work with Snippets there's actually documentation for user to find Snippets that includes everything you would ever need to no we're going to come back to that in just a little bit and then down here we have an example of what a snippet looks like so if we uncomment this we essentially have a snippet called print to console the scope means it's going to run in either JavaScript or typescript the prefix is log so that's like what you actually type on your keyboard the body is the actual text that's going to be printed out here and the description is just a description of what's happening so let's modify this just a little bit we're just going to change the name here to console.log the description is going to be completely fine and we're going to change how this actual output is in a little bit and we're going to change the prefix here to CL so inside here what I want to do is I essentially want to just print out by default the text here so I just wanted to say console blog here so an easy way to do that is just come in here and we're going to say here perfect click save and we come over to our script if I type in CL and I hit enter you can see it creates that snippet it prints out all of our code and it just puts my cursor at the very end of the line and it's printing out here this is the most basic form of a snippet where it always generates the exact same code but often times you're going to want to do something different you want to like add your own variables in so in order to do that we need to use these dollar sign one 2 and so on that allows you to create what's called a tab stop so now instead of having the text here I can put dollar sign one like it was before now when I type in CL hit enter you can see that now my cursor is inside of that section and when I click tab it's going to bring me to the end of the line so now I can actually you know input my own code inside of there but you can go even a step further by using default variables so what I want to do is I want to wrap this inside of brackets and inide of brackets here I either want it to be one or if I put a colon I can put a default value which in my case is going to be here and I'm actually going to use back tis here just so I can store you know variables and such in here so now if I type in CL and I hit enter you can see by default it's here but it's highlighted so if I type something else you can see it replaces it with whatever else I type so it's going to be defaulted to this value of here otherwise it's going to fall back to this one value which is just whatever I type in this is my first tab stop now if I wanted to have multiple tab stops I could do that for example this log what if I wanted to do like console. dur or console.time or something like that well I can actually turn this into another tab stop I'm going to make this my second tab stop and you know I could default it to log so I can come in here with the default for log and now when I come over and I type in CL hit enter you can see I have this first section I hit tab it brings me to log and I could change it to like time for example or I could change it to dur if I wanted to but you'll know with console log there's only like so many options you can choose you know so instead of having to you manually remember what each of those is I want to make this a list so to create a list inside of this stimp it instead of this colon here you're going to put a essentially that pipe symbol and then what you want to do is you just want to list out everything with comma separated so we're going to have like log table count dur error and info it's just a bunch of different you know types of console that we have so now when I come back in here click CL hit enter and of course I have an error it looks like what I need to do is I need to make sure I put a closing vertical bracket over here so I have a starting one and a closing one that kind of defines your like section of your choosable options and log is my first option so it's going to be the one that it defaults too so now if I hit CL enter you can see I have here and I hit tab now you can see I have a list that's like hey choose one of these values so I could choose like error and there we go hit tab again it brings me to the end of the line this is a really kind of Handy function to create for doing console logging but I can even take it a step further if I wanted to cuz let's say I wanted to log out whatever I have highlighted let's say I highlighted this and I wanted to l log that based on a keyboard shortcut well there's a really easy way to use variables if I bring over this code again you can see that there's all these variables that are built in for example I could get the currently selected text and I could say you know what put that inside of my console log and that's just called TM selected text so in order to see how this would work what we want to do here is we want to use that TM selected text and then what I want to do is I want to fall back to the value of one so I'm going to wrap that inside of those brackets again and then that one value I want to fall back to here so essentially what's this is saying right now is it's saying hey first get the selected text and actually I want this to be outside of these uh quotes there we go so I'm saying Hey by default give me whatever the selected text is if I don't have any currently selected text then you know fall back to the value of here and overwrite it with the first tab stop so now if I save this I come over to my script obviously I can't say like CL enter well I could say C enter and you can see it's putting that slow function in there but it's kind of annoying where I have to highlight it type c hit enter and it's kind of annoying having to do that in my opinion so instead what you can do is you can create a keyboard shortcut that's going to allow you to essentially just highlight something like I could highlight this hit a keyboard shortcut and it's going to put that snippet in for me so in order to do that we need to go to our preferences again I want to open up our keyboard shortcuts and over on the top right here there's this button that allows you to actually modify the keyboard shortcut file and down in the right hand corner you can see defined key binding so I could say you know Control Alt Q that's going to be my key binding hit enter and you can see that our key right right here is control alt Q our Command is whatever command we want and then we say whenever our editor has text Focus this when Clause just kind of defines when you can actually use this keyboard shortcut so like if you wanted it to only be for the terminal you could say like when the terminal has focus and so on this is just for when you're in the text editor don't really worry about it the command that we want to run is called editor. action. insert snippet and then we can pass down a final thing called args and these args are just a variable that we're going to be passing and we care about the name name we're saying hey we want to call essentially our console log snippet that has the name of console log and over here we gave it the name of console log this key binding says run the snippet that has the name of console log when we hit Control Alt Q so now if I save this come over here I highlight this and I hit Control Alt Q you can see it automatically added that snippet in and we say you know what we're going to table whatever the results for slow function are that's super handy in my opinion so kind of let's look at another example of creating a snippet we're going to create another sip it very similar to this this one is going to be for console time so we're going to say console.time and inside of here our scope is going to be exactly the same it's going to be JavaScript our prefix here is going to be CT instead of Cl and inside of our body we're going to have a pretty similar body and I'm just going to console or copy down this uh description as well this one is just going to say log Benchmark to console and then our body is obviously quite a bit different we are going to be doing a console.time and then inside of this console.time I essentially want to have a tab stop for one we're just going to put that inside of quotes and then what I want to do is on another line I want to have that TM selected text variable otherwise I'll just default it to whatever I want to type in so essentially what I'm doing here is I'm saying hey run console.time and whatever I type in for my tab stop one is going to be this label then if I have selected text use that otherwise use my AB stop 2 to put in the text I want there and then finally on the next line I'm going to have a console.time end and this console Time end is going to have the exact same tab stop which is one and this is kind of to show you that first you can do multi-line statements like this by just having them inside your array and secondly you can actually pass multiple tab stops that are exactly the same and it'll change both of them at the same time so let me show you what this looks like if I come down here and I type in CT hit enter you can see it does all the new line stuff for us if I type in for example label here you can see both tab stops enter at the same time then I can enter code in the middle hit Tab and it brings me down to the very end this is super handy and again if I wanted to highlight something and click CT hit enter you can see that now I'm able to put that code right in the middle cuz that's what I had currently selected you can see that I have my tab stops all working fine and this is super handy the main thing to know about these keyboard shortcuts I'm not sorry these Snippets is that when you want to do things you need that dollar sign synx text and if you want to do something more complicated you need to wrap it inside of these curly brackets the colon is going to be for defining default values and as you can see here you can Nest them as many levels deep as you want and that's all it takes to create these vs code Snippets if you enjoyed this video you're definitely going to want to check out my vs code keyboard shortcuts they're all linked over here and with that said thank you very much for watching and have a good day