Using Selected Text in a Snippet

[00:00:00]
>> Steve Kinney: So, yeah, we've got the placeholders, we know how to do options, we know how to do nested syntax. This you will fight with every time, I've never not fought with this.““¡” But it's really great for common patterns that you might use. I think if you're using a design system where everything's got a very structured layout, there's some other methodologies to lay out that boilerplate.

[00:00:20]
It's like just having some like template files that you just rewrite and write in there, that works, too. There's lots of different ways to do this, but if you find yourself like, okay, I have a design system where the component name is button, it's got button props. That extends from the HTML button element, right?

[00:00:44]
You can get a lot of that boil plate, yeah, you'll spend, like, honestly, an hour getting that snippet. And then you gotta remember to use it, which is a different story for a different day, but I think equally as useful. Let's just do the one more with the selected text, and I got some challenges for you to play around with.

[00:01:05]
But let's just look at what I was talking about earlier with selected text. Sure, let's take that one, and at this point, we're gonna say.
>> Steve Kinney: Did I have to try to, trying to remember. $TM_SELECTED_TEXT, doing that from memory. You will never write enough of these that you remember any of this, by the way.

[00:01:38]
You will do one morning where you feel like you now have mastered this, and then it will leak out your head, you will start over fresh every time, maybe you're better. If you get good at this, I got bigger questions for you, which is like, what should you have been doing?

[00:01:53]
So here we can say hello, put it in a string and now hopefully I do log, and you can see that it took the selected text automatically and put it in a console log. Where I use it the most is, you know that in an async away function, you're supposed to put the fetch in a try, catch.

[00:02:17]
Who does that the first time? Nobody, right? So, now I can just literally like select the fetch statement, right? Try catch hit tab and fix my mistakes, right? And have prettier fix the formatting for me usually. And again, yeah, there are extensions that have a bunch of snippets, you should probably use those.

[00:02:43]
Honestly, just use them for inspiration, because you can also just open up those files and see what they are and grab the ones you like.
>> Speaker 2: Could you show one more time how you have selected text and then type that.
>> Steve Kinney: Yeah, let's look at the snippet and I'll show you doing it again.

[00:02:59]
So, as you can see, I could have put something like value in here, and then the default thing would have been value, right? In this case we've got $TM_SELECTED_TEXT. To be clear, the fact that this works and it knows what I had selected before I started typing, wild me, right?

[00:03:19]
At one point too, it's like one of those things which I've done a million times, but I had to look it up and double check before I told any of you about it, because I'm like that doesn't seem like it should work. But yeah, so in this case, we'll say that the first value is SELECTED_TEXT, and we'll go back into this one.

[00:03:37]
So here we got, let's say we have 1234, why not? We select it, and now it's in there, right? And again, with console log, cool, I guess, I mean, I honestly worth it. But if you wanna put in a conditional, a try catch, something else, you can also just kind of, like it's all gonna depend on your code base, right?

[00:04:01]
But it's nice if it's angular component that has a bunch of decorators on it or whatever. Or that you always want this to extend from a class to extend from a certain object, you can kind of create the ones that you find yourselves repeatedly doing. The other one just to show you a quick before we happen to the exercises is obviously, we know the other one was CLIPBOARD, right?

[00:04:28]
So here I will just copy something onto my clipboard. And here we'll do this now, and it is whatever was in my clipboard, right? Fine, great, again, easy ways to create stuff for yourself, yeah.
>> Speaker 3: Those environment variables are the ones that are in capitals that come with, yeah, those, they're not available to you unless you are using a snippet.

[00:04:55]
You can't just plug into a regular component to start using it.
>> Steve Kinney: No, so I think, if I'm not mistaken, I have to look this up, I'll look it up, I think you can also grab environment variables too, though. Yeah, I believe it's something like $env.
>> Speaker 3: Well, when you were showing the current file path and selected the file, that could be very useful.

[00:05:25]
>> Steve Kinney: Those are the ones I use, yeah, the most, occasionally I use, if I want the date and that, yyd, that's a nice one. Usually when I'm doing markdown, I'll do that because it's like the date for the notes, you just wanna pop in there real quick. But yeah, going back to that first file that has the list, right?

[00:05:51]
Yeah, I don't use these so much, but again, if it's a folder with the component and you want it to be named as the folder, you can use $TM_DIRECTORY. If it is the file name that you want to base it off of it you can use, and again, you can Pascal case it, you can Kebab case it, you can uppercase it, you can lowercase it.

[00:06:12]
There's a bunch in there as well, and so some of these folder ones, again, then CLIPBOARD and SELECTED_TEXT are the ones that I use the most, the rest of them I don't.