Code FASTER with User Snippets in VS Code!

hey guys how you going now if you use vs code and you haven't heard of user snippets trust me you're going to want to watch today's video i'm serious like genuinely you're going to want to watch today's video i'm serious mate anyway the point is user snippets have increased my productivity as a programmer so much it's ridiculous basically user snippets allow you to define your own custom blocks of code which you can then access by typing a few characters on the keyboard then pressing enter they also allow you to easily tab through your blocks of code and you can also provide things like autocomplete suggestions in the drop down and it makes it so much easier so now i'm going to show an example of what i'm talking about okay so right here we have an extremely familiar site a javascript file so i want to type out document.queryselector so i'm going to type qs then press enter and there we go document.queryselector so that right there is a user snippet i told vs code when i type out qs and press enter i want document.queryselector to appear i can also press tab and go straight into the double quotes for my query selector string and i can say something like dot table and i am done so that right there is a user snippet now i'm sure many of you guys have used similar things in the past for example many extensions in vs code come with their own set of snippets and also vs code has its own built-in you know set of snippets so the beauty of this right here is the ability to define your own custom user snippets like i said guys it's fantastic so now i'm going to show you how to do it okay so the first step in defining a user snippet is to go into the file menu then drop down to preferences then go inside user snippets okay so once you're inside here you're gonna need to specify which file type or extension you want these snippets to be applied to in my case i'm going to show you the exact same query selector example that i showed you earlier so i'm going to choose javascript and then once you're inside your json file you're going to see an example of how to define a user snippet as you can see you begin by specifying the name of that snippet so if i go down here i can now type out query selector as my snippet name i can now specify an object and inside this object here we're going to define a couple of things the first thing is what is the shortcut in order to make this snippet activate so i'm going to type out prefix and then say q s so now when i type out q s in a javascript file i want this snippet to be activated okay so in order to define which code is going to display we can drop down and then just say body so this is the body of your snippets aka the actual code so now we can type out something like document dot query selector and leave these brackets empty i can save this and go back inside the main.js file and now if i type out qs and press enter we get right there document.queryselector so this right here is of course pretty good but want to take it one step further and actually make something or make your cursor default to the middle of these brackets right here with the bonus double quotes okay so in order to achieve that if we go back inside the javascript.json we can head inside the brackets here and type out the double quotes and of course just escaping these two because of course we don't want these double quotes to interfere with our double quotes in the json so just escaping those two characters right there alternatively you can just use single quotes instead but it's up to you i'm going to use double quotes now inside these double quotes we can now type out dollar sign and then one so dollar sign one inside your body simply refers to the first tab position so now if i go back inside my javascript file i can type out qs then press enter and we get the cursor immediately inside the double quotes here and i can type out dot table as an example so it's that easy to define a user snippet and have that first text cursor in that position now we can of course take it a step further and we can define it to tab position so for example let's just say you know you know typically you call a query selector on the document but maybe you want to call it on a child element okay so for example we'll say dollar sign one then dollar sign two for the first and second tab position if i go back in the javascript file and i type out qs we get firstly the cursor in the first position i can say document then press tab and we go straight into the double quotes again and we can do table as an example so that is your two tab positions right there now you can also set up defaults for these positions so for example if i type out dollar sign then use a curly brace here i can now say colon after my 1 and i'll then say document this means by default in this position it's going to be document but i can easily change it because this whole section is going to be highlighted let's see how this works if i get back in main.js i can type out qs press enter as we can see document is fully highlighted i can now begin typing i'll say something like my parents elements and there we go it's easily done i press tab and we're back inside here perfect right cool so now let's take it one step further okay so i've gone ahead and i've created a second user snippet called add event listener prefixed by ael so this right here is very straightforward it's a simple snippet with three tab positions so i can say something like a e l press enter and we get something like this i can say document then i can say my event type something like click and my function body to be something like console.log then passing through e so let's make this snippet a lot more interesting let's provide drop down suggestions for the event type okay so to achieve this let's go back inside the json file and inside the double quotes here we're going to use once again those curly brackets but this time we'll say 2 then put the pipe character now we're going to specify a comma separated list of all the possible options for example i can say click i can say you know input i can say change blur and so on so these are all my javascript event types separated by a comma i can now finish this off by pressing a second pipe there at the end and now we are done so if i go back inside here i say ael then say document i press tab again and we get all of these suggestions i can now say something like change and it does it like that so that is a there's a different way to customize your snippets okay so there we go and that is all for today's video guys thank you so much for watching if you enjoyed today's video or you learned something drop a like and subscribe to the channel and i'll see you guys in the next video

Channel: dcode

Views: 1,253

Keywords: web development tips and tricks, coding tips and tricks, how to be a better programmer, vscode tips and tricks, vscode tips, vscode shortcuts, vscode snippets, javascript tips and tricks, web dev tricks, how to be a better developer, how to code better, how to code faster, how to be a more efficient programmer, coding tips, how to be a better coder, how to be a good programmer, how to improve your programming skills, how to improve your code

Id: cMNJJzKgtT8

Length: 8min 8sec (488 seconds)

Published: Mon Dec 13 2021