Lesson Description

The "Snippet Exercise" Lesson is part of the full, Become a VS Code Power User course featured in this preview video. Here's what you'd learn in this lesson:

Steve provides students with some exercises to try out different code snippets. He then demonstrates two snippets that he personally finds useful: one for importing dependencies and another for creating a try-catch block with additional functionality.

Preview
Close

Transcript from the "Snippet Exercise" Lesson

[00:00:00]
>> Steve Kinney: All right, so exercise time for you. Do you have to do all of these? No, because we don't have enough time for that. But these are mostly to also serve as inspiration, right? So if you do a lot of express, you have like, we always use this middleware, and we always do this other stuff, right?

[00:00:17]
You can just make a snippet out of that. Take a look at this and just grab one or two that seem interesting, and just give a shot. Just again, to get the muscle memory in there and whatever, try it out. I'll show you a trick that I do with the imports as maybe the one that I choose to do at the end here.

[00:00:42]
But yeah, try a few of them out. Whether or not you're successful, I'm not super worried about it. But again, get a sense of the basic ergonomics, try it out.
>> Steve Kinney: So like I said there, I forget how many. There are 17 different exercises, we're not doing all 17.

[00:01:03]
That said, there's a cheat sheet, for whichever ones you chose. Let's grab, one or two interesting ones, I think there one or two that I kinda like to use. I'm gonna do something real fast, ther's much of sub project in here. So I'm gonna go into this task one which I think has React and stuff like that in it and open that one up.

[00:01:38]
That way I can demonstrate what I would like to accomplish here and so I'm gonna do, I think two of them that show maybe practictical use cases here. So again, we'll just go to configure snippets. Yes, sure, we'll go into this global one. So let's do one that I like to do a lot for imports, and so in my code base, we don't really export default ever.

[00:02:16]
No particular reason why. I don't know, I'd made a decision early days, and now we do it. So let's say, let's do import dependency, I don't know. Again, just something where it's not gonna try to auto complete as something else. You might have if it doesn't work for you, that's you know, you figure something as it works.

[00:02:40]
What I to do is I'll do import. I'll have, the braces, and I will do the other side first. The what you know, either library or file I wanna import from, and then, afterwards, jump over over into the brace. You're like, why hold on? Import stuff. Why is I'll show you.

[00:03:15]
And so you can do something like, and now if you type in react first, I don't know, too much talking. Now it'll, in a sense, will know what library and autocomplete the other part, right? And so it's just a lot nicer than, because, a lot of times if you're typing from left to right, you get to the part where you would type and use effect.

[00:03:47]
You get no Intellisense help, and then you type in the, react part. This one, you jump to the end, and then you can tab to the middle, I like a lot. The other one I think the last one on the list that I'm gonna kind of just change up a tiny bit is that TryCatch one.

[00:04:08]
Because there's usually a little bit more that I want to do than just a TryCatch block, right? Sure, we'll start with that. But what I will, generally speaking do in this case is do something like, only console error if we're in development, right? Otherwise, don't console error if we're in production, right?

[00:04:41]
And then sometimes I will do.
>> Steve Kinney: Even with this error, I might do.
>> Steve Kinney: If error, instance of error that way, actually, if I'm in TypeScript that way, it knows, because, for some reason, error is unknown. And so you try to do error, dot message, TypeScript gets very angry with you, right?

[00:05:11]
So I might do something like, I could even combine them. So, cool, if we are in development and then get me the error message.
>> Steve Kinney: Why are you angry?
>> Steve Kinney: And then, after that, I'll probably at that point, either rethrow the error or choose then that's where I'll put the dollar sign zero.

[00:05:55]
So now I can have a TryCatch block where I can have the code, which maybe I'll even default to selected text, right?
>> Steve Kinney: And I'll get all this extra ceremony for free, right? I don't want that there, yeah. So now I can do something like
>> Steve Kinney: Does anyone remember what I called the snippets?

[00:06:39]
Just try that what I called it.
>> Steve Kinney: Let's go, hold on. What do I call it? Let's call it try. Maybe I should call it cry, that's what I should call it.
>> Steve Kinney: Right, so now it wraps it in there. That's got to be process.env.nodem, right? But now I can get all that extra ceremony that I would have done for free, and I don't ever have to type that all out again..

[00:07:13]
And so it's nice to take like the conventions in your code base and just make it super easy, right? Cause again, every moment you're typing that out by hand and even like that little Boo Boo that I made with forgetting that EMV that's time it slows you down this time.

[00:07:25]
That's distracting you from whatever it is you were actually supposed to be doing and the problem you were actually trying to solve. So just finding, the and part of this is again, figuring out the patterns that you need in your application. And a lot of this just like building the habit, as I said in the very beginning of this workshop of catching yourself in the repeated things that you do.

[00:07:45]
And so this will only log there and catching those things and then doing it like that. Somebody asked during the break, are there extensions that have a bunch of pre-made snippets. There are i don't use them because i'm very particular and again, want my stuff the way that I want it, and I would rather build them myself.

[00:08:04]
But there are a whole bunch of these. Just go search in the extension store for various different options that you can play around with. The other thing that I don't do in the tour of things that I don't do that I will tell you about, is you can also assign snippets to a key binding.

[00:08:28]
I personally, one I like the fact I could start typing one, and IntelliSense will tell me the snippet two. I get very anxious that I'm going to run out of keyboard shortcuts. And then I can barely remember to type my snippets half the time. I don't also need some esoteric keystroke, I will never remember that it exists.

[00:08:49]
But if you are a person who says, I would like this, well then you can have it. This is how you do it, I put it on a web page for you. You take everything we learned about key bindings and everything then we learned, this is the command you're calling.

[00:09:04]
The arguments are gonna be the language ID and the name of the snippet, right? And then you're good to go. Your mileage may vary. If I had more keys on my keyboard, maybe I would do it. But cool, and that concludes snippets. I said, there are more little things you can kind of wander around, but we got to most of the big ones.

[00:09:31]
And then like I said, there are solutions for all of the exercises, but watching me do that 17 times seems not fun for anyone involved. But especially because the ones you make will be the ones that you need for you.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now