Creating a Snippet

[00:00:00]
>> Steve Kinney: Let's talk about snippets in which a previous iteration of myself felt the need to write the write out the advantages of using snippets. I don't know that you need a sales pitch on this. Do you write the same thing over and over again? Would you like to.

[00:00:19]
To not write the same thing over and over again. Yay, do you somehow need more cajoy into why snippets are good. Here you go. This is one of those things too where we'll see remnants of this popping out, which is text mate themes, work as VS code Themes, TextMate snippets are VS code snippets, so on and so forth.

[00:00:45]
And that's not just a like TextMate to VS code like, for some reason that's true of like Adam, I think maybe even sublime. I don't know how that worked out like that, but here it is. A snippet is basically you get a little shortcut. You type in that shortcut, you get more stuff, right?

[00:01:04]
This is useful for anything you might wanna do, if it is given patterns you repeat in your code base, or could just be the beginnings of React component. There are lots of extensions that have snippets. I don't use any of them cuz I am tightly wound, right? And like want the shortcuts the way I want them, want the formatting the way that I want it.

[00:01:31]
And a lot of times it's like, I like 25% of these snippets and don't want the rest of them in there. So there are, for most cases, do you need to write your own snippet for like a react component? Probably not, do you need to write your own snippet for React component the way you like it?

[00:01:48]
Maybe, [LAUGH]. So let's talk about that situation, cuz the other one just involves going and finding the extension, installing it. We've covered that. So we're going to do the second case here, which is there is a thing that you are doing all the time. Again, maybe it's just like your like whatever like client that you all wrote to hit the backend APIs or just patterns that you do in your code base that you do not want to do by hand anymore, you can make snippet.

[00:02:14]
We'll have some exercises. You'll get to play around with this in a second, but I might skip around a little bit through some of the advanced techniques before we head over to the exercises. But let's do the world's simplest version of this, which is, again, I just need a file at this point, so open that playground again.

[00:02:33]
Just give myself a nice empty file to play around with. And so one thing we can do is again, the command palette is our friend. What happens if we type in snippets? Well, we've got configure snippets. That one seems like the one that we want, but I open this for a reason.

[00:02:53]
Insert snippet, that's good. You can also do it with the keyword. Trigger that we saw before, where insert snippet is useful is we'll use it later if we want to actually have a snippet for a keystroke and then fill file with snippet is basically a way to instead of like, you just wanting maybe one method call or function this file you legit want to create a new file template.

[00:03:19]
So if it's like, I use the same boiler plate for every single component in our design system it's gonna import the same CSS file the same way. There's a bunch of different ways you can do that, one of them is Snippets. But for our purposes, lets go back, we're going to go configure Snippets.

[00:03:40]
As you can see, there are a whole bunch of snippets, either A, built in by VS code or B, they are added by extensions or C, I guess from you, I believe that I tried to clear most of them out beforehand. But yeah, you can see the ones for various different languages also useful if you just wanna actually see which ones were included.

[00:04:04]
So like, we can go into the CSS 1. There's not really anything in here. These are on the user level, so on and so forth. As you can see, you can also you can have a global snippets file. You can also make one for this project. Which one do you do?

[00:04:21]
It depends, do you want them for the project? Do you want them global? If it's the unique ergonomics of this project, obviously you want it from the project. If it is something you just like, if you just wanna type in CL tab instead of console.log and move the cursor instead of the parentheses, that would probably be a global one.

[00:04:39]
Whichever one you choose to do is up to you, I don't really care. So we can go ahead, I can do one in this file, we can call it
>> Steve Kinney: Very cool code snippets, right? And now we've got this file, and you can see that there is some amount of a placeholder in here, and I think that, why don't we just uncomment that placeholder to get a sense of how this works?

[00:05:16]
And then what we'll do is kind of like, tear it apart, and then change stuff and add more stuff, so on and so forth. So a snippets file is a giant JSON file, just like everything in VS code, it's JSON all the way down. All right, so what do we have in here?

[00:05:36]
So first of all, we've got this prefix, right? This is like, what you are going to type in order to trigger the snippet, right? So in this case, this one is a console log with some weird ceremony here that we will get through. We'll get by just typing in log, right?

[00:05:54]
And again, if you wanted that to be CL, fine. You can do various different things See a description, and then again, what scopes it should run in. Obviously you do not want this running in a Ruby file, cuz console log is not a thing in Ruby. You would want puts, or whatever.

[00:06:13]
I used to write Ruby, so now we've got this in here so we can go into a JavaScript file, ideally. And now we can see we've got this log that we print to the console, cool. And as you can see, it put my cursor right in the middle here.

[00:06:34]
>> Steve Kinney: And then if I hit tab again, it will go to the end there. All right, so let's go ahead. We don't want that one. We can see that we've got these little placeholders. That's where my cursor went first, right? That's where my cursor went second. The other thing you can do is this will always be the last one, right?

[00:06:57]
So if it's like, hey, I might be adding more. I don't wanna iterate that number for the very end of where we should end up. $0 will always be the final place when you filled out all the other fields. And body, in this case, is an array. Each item in the array is a line, right?

[00:07:17]
And so, for instance, you wanted it to be a multiline console log, right? I'll come up with a better example in a second, I swear. You could theoretically
>> Steve Kinney: Add more lines.
>> Steve Kinney: And you can either put two spaces in here, or you can do like slash T for a tab.

[00:07:47]
Whatever you wanna do, doesn't really matter. So now if I did the same, you can see that now a multiline, but it Does not like that the quotes are on the wrong lines cuz JavaScript gets very angry about that. Now, hold on, that's where the back tick comes in.

[00:08:09]
That's really unhappy about this.
>> Steve Kinney: Because it wasn't a valid string to begin with. Then theoretically if I did that, it would work. But yeah, so you can add lines, you can do whatever you want in there, but there's a lot more power to these as well. So for instance, I'm going to grab this one for a second cuz watching me type it out probably just doesn't seem like that much fun.

[00:08:37]
Again, this is a slightly more involved, but not much. One, we've got a for loop, which is now gonna have some placeholder values, right? Which is, yeah, array is probably fine. If I know it's called something else, that's cool too, but we'll have a default value. So this is one of those kinda for loops that are just iterating the index number as you find one every time.

[00:09:05]
But the important parts is you've got one array. The nice part that we'll see is, as I change the first one, the second one changes as well, right? And then I can say what I want the individual element to be is, and then finally we'll end up in the body, right?

[00:09:24]
And so, what does this one look like now?
>> Steve Kinney: No, all right, fine. You want 10, let's do it. So now you can see array. I can just change that to items. It changes in both places. I hit Tab, I can change this one now. And finally, no auto complete.

[00:09:48]
Finally, I can do the body as well. And right, you can begin to have placeholders, we can do actually, some fairly powerful stuff in here too. Which is, the placeholders can keep going for as much as you want. You can also put in various different variables. So I'm gonna show you those in the, I listed them out for you here, which is, this is where that TM shows up.

[00:10:20]
Which is TextMate. Life is weird. And so, for instance, if you have in the dollar sign in these brackets, TM file name, that is gonna be the current file name. And I'll show you a trick that you can do that's kinda powerful with that in a second. Or if you don't want the extension, if you want the directory, for anything that you might choose to do, the workspace name or folder, current year.

[00:10:53]
The two that I think are, I mean these, you know if you need them, I don't need to explain what the current date is, right? But clipboard, no surprises what clipboard is, right? It's what's ever on your clipboard. I have never wanted to use any of these, but they are there for you if you want them.

[00:11:14]
The ones that I think are super powerful is clipboard, obviously. Maybe your snippets just take whatever's in the clipboard and put it in quotes or something along those lines. The other one I think is super useful is this file name base, we'll do something interesting with that in a second.

[00:11:33]
And there's another one that I don't think I have listed here, which is the comprehensive list will have it probably, or I don't know how to make links. I'll fix that a little bit. But there's also one for what is currently selected, right? So you can select some text, use one of these, and be able to work with whatever you had selected.

[00:11:54]
So if you had a line and you wanted to wrap it in a try-catch block, right, you could select some text, right? Do your snippet, and then that selected text will be inside the try-catch block, right? Or an if statement, or whatever. So you can do a bunch of those, but where it becomes a little more powerful is then also, the ability to manipulate those as well.

[00:12:18]
But let's also show some various options and then we'll kinda talk about some of the manipulation pieces as well, which sounds mean. Let's go back to our console log for a second.
>> Steve Kinney: So, let's say we wanted to have
>> Steve Kinney: I'm just gonna call it cons, or Print to Console.

[00:12:49]
>> Steve Kinney: And in this case we're gonna say that the trigger, or not the trigger, the prefix is, we'll say log in this case. We've got back that console log, but let's change it a little bit. Where we wanna say console, and then what we're gonna do is make this the second placeholder.

[00:13:14]
And for the first one, what we're gonna do is,
>> Steve Kinney: All the various different console logging. Options in this case, I don't want pipes, I want quotes, or commas, woo, talking. Cool, cool, cool. And I don't necessarily want the quotes here, just in case it's a variable.
>> Steve Kinney: So let's go ahead and try that.

[00:13:51]
The syntax highlighting gives me a little bit of pause, but I'll find out where I'm wrong in a second.
>> Steve Kinney: There we go. So, I can put a bunch of options in these pipes next to it. So, before you saw, if I just had message, the default here would be
>> Steve Kinney: Message or, call it value.

[00:14:18]
But here we'll get some options, right? So now I can do something like, and you can see there are various different placeholders I can pick. From log, warn, and error, I put those in the snippet. So if there are things you're doing with one of three options, so on and so forth, you can put those options in there as well, and then the value was the second one that I tapped into, yeah.

[00:14:47]
>> Steve Kinney: The other things you can do here as well, again, the scopes for where you wanted to apply work. The other one I think is kinda cool is, let's say, hypothetically, let's say we wanted to make a simple beginning of a React component, right? We could do something like, let's just call it rcc, or whatever,
>> Steve Kinney: React Component.

[00:15:14]
And in this case what we're gonna do is const, and then what should the name of the React component be? The first thing I could do is something like this 1:ComponentName.
>> Steve Kinney: Sure, that seems good. But the interesting thing that I could do here, keep that up for a second, is I could take that variable, which is the file name that we saw earlier, right?

[00:15:47]
So I can do TM, was it Filename_Base? Yeah.
>> Steve Kinney: All right, see, we got the syntax right before I talk anymore.
>> Steve Kinney: Nope,
>> Steve Kinney: I think it might have a.
>> Steve Kinney: All right, so now the component is called index, which makes some amount of sense, because the file is called index.

[00:16:26]
Let's make a new file real quick, just to make my point, we'll call it very cool component, .JSX, right?
>> Steve Kinney: Well, the is a little bit problematic, because those dashes are not valid JavaScript, right? And so, I could see where I was going with this, but it doesn't work.

[00:16:55]
The cool thing that you can do is, I feel like there's two themes to our workshop together, it's like it's all JSON under the hood and also regular expressions of your best friend. And so you can do transformations on the snippets, so in this case, what we wanna say is, honestly, the entire thing, so dot star.

[00:17:20]
And then there's a bunch of regular expressions you work with, but you could also just type in Pascal case, which is capital first letter. Then wherever there would be a dash or white space capital letter, right? So snake case but with a capital letter. All right, doing that from memory, let's see how that goes, for me, we want to do this in very cool component, .JSX, nope, I think there's a slash at the end, and I might have to put in curly braces.

[00:17:51]
We're gonna see together. The actual syntax is in the notes, by the way, all right, so I want the entire thing that should be good. And then I'm gonna grab this line and see if It's what I want first, and then if it's not, I'll deal with that in a second, all right.

[00:18:04]
So we'll peek at it in a second but as you can see, it looks at the file name, it figures out what the component name ought to be based on the file name, right. And the cool part about this is I could also make it also export default that same file name and so now I could get if I had a boilerplate.

[00:18:20]
Again, it's we'll look at what I just wrote, it's squirrely, I had to look at my own notes to do it. Am I ever expecting you to remember it? Absolutely not, but know that it is an option, know that you can look it up, and we're good here.

[00:18:35]
Which is this bizarre syntax here with lots of curly braces and stuff along those lines. But if we're thinking about it for the first placeholder, right, then with another interpolation, grab the FILENAME_BASE, all of it, and then run it through this pascalcase, right? Yeah, go look that up, don't try to memorize it, don't try to parse it in your brain, it'll give you a headache like it's not worth it.

[00:19:04]
But the important part is you can take stuff like the file name or the project name, right? That's gonna be the workspace name in this case, right? You have a bunch of like, so if you are doing the thing where it's like, if you're doing the thing where it's like, you want the name of the component to be the file name is the component, great.

[00:19:26]
But if it's a directory where you have maybe whatever .css or .module.css, then maybe component .tsx, you could go to the directory name and do that as well. And you could have the ability to actually pre-create all of the names of all the components in there as well.

[00:19:45]
And for all the various again, we look at some of these variables, there's even, there's uppercase, you can lowercase, everything you can do, all the different case changes. In this case, I think I have it written, all of the options written somewhere. There's the placeholder choices, let's see what else I have for you.

[00:20:08]
Placeholder and regular expressions, you can also nest some of the snippets so if we had this component and we also had this prop types one, or you can do it with typescript type, whatever. You could literally also reference a another snippet. You will take this too far at one point in your life and you will regret it, there's a lot of places to keep your code dry.

[00:20:38]
A lot of places not to do it too, but in a lot of cases, if you do want one to rely on another, you could make this theoretically a snippet, which is like component name, right? Take that crazy out into one place and then be able to use that nested snippet here as well as here, so on and so forth.

[00:21:00]
So you can kind kind of take common things that you do all the time and turn them into reusable pieces of code. So now you just type in one thing, and you seem like the fastest person on your team. Little do they know, it's because you spent like six hours one day tweaking snippets instead of doing any real work.

[00:21:18]
But that's what we call leverage, right? One day of six hours saved you 10 minutes every day, and eventually that will be six hours and 10 minutes.