Code Snippets Demo

[00:00:00]
>> If you noticed, I wrote one property object, and then I basically copied it down, went through, and I replaced it. And so, in my opinion, code snippets are the Hello World of code generation. And so, what I wanna do is I am going to attempt to actually convert what I've done, the props, into a code snippet that I can reuse.

[00:00:36]
And so, this to me is, I think, most people, they start to use code snippet. Certainly, I know there's a ton of libraries of like Angular snippets and React snippets and Ionic snippets. And what you're going to see is what these individuals are doing. They're basically taking this approach and turning it into a package that then gets installed as a plugin.

[00:01:03]
So, you'll notice here that, again, I went through and I just copied this and I pasted it in three more times, and went through and changed the stuff that I needed to. Well, what you can do in VS Code is that you can create a code snippet. And so, in the case of StackBlitz, you can go into your snippets here and just, So there's no surprise here.

[00:01:42]
I've already done this, but I'm going to do it again, so you can see how this works. And so this is just a JSON file, and we're going to create a new snippet. And so we're going to really generate a props schema. Cuz the one thing that I did notice is, it's really tedious, if I have an interface, to have to convert it into the schema over, and over, and over.

[00:02:21]
I feel like there should be a way to streamline this, at least, a little bit. So, from here, We'll just add in our scope. And I'm just doing this all by hand, I mean, how far do you wanna take this? We could write a code generator. And I'm gonna go fem, for Frontend Masters, props, and now we're going to do our body.

[00:02:52]
Now, this is where things get a little funny, and I think where snippets can be, at least setting them up, can become a bit tedious. But notice, speaking of molds, I'm taking an instance of the real thing, and this is what I'm starting with. And so, from here, what I'm gonna do, is I'm just going to do a vertical selection here, and I'm going to go, Double quote, Double quote.

[00:03:31]
And I'll go back here, add this in, oops, the one thing I should have done, Is I forgot to put in a comma. So we go comma here, and then we ask ourselves, so, this is really important. What do we need to change? Well, we need to change this, and so what we're gonna do is, we're gonna put a 1 here.

[00:04:04]
Let's assume for now everything is an input, but we'll put a 2 here. We'll put a 3 here, so, there's three things basically I wanna change. And just to round things off, then I'm going to put a 0. And I actually don't think, well, now I need to make a decision.

[00:04:32]
Do I put labels on these or not? I'm gonna just go with not. So, I think I can just take these off and hopefully this works. But, notice, I pasted in a real Props object. And then I went through, I pulled out the pieces that I wanted to change, or make dynamic, and I replaced them with something else.

[00:04:59]
So, this is what I'm talking about when you make a mold, it looks like the real thing, but there's some additional tooling so that you can accommodate a workflow. So let me save this, and let's go back and let's see if this worked. fem-props, ooh, and, for key, let's go with notes.

[00:05:33]
Notes, add in some notes, and I'll tab out, and, ta-da. I forgot something. Let me go here, fem-props, and let's go with miscellaneous because I am running out of creativity. Enter something random, tab, and then what we can do is just make these not required. So, I'm gonna just cut these out, and there we have it.

[00:06:15]
So, this may have seemed like a very simple thing, but what you have seen is a very kind of, is a microcosm. Is this idea of, see the real thing, pick it up, capture it, pull out the things that you wanna change, immortalize it, cast it in plaster, and then use it later.