Framework Snippets

[00:00:00]
>> Burke Holland: Well, if you're a React, an Angular or a view developer, you have some snippet options. And I've included some for you here, in the extension pack that I gave you. I'm gonna add a file here that's just called App.js. And what I wanna do is create some react in here.

[00:00:18]
I do react so that you know that I'm very, very smart. So what I'm going to do here is instead of importing react manually, I can just do. Let's see here, I can just do imrcimp. There we go. And get an import module from module here. The snippets that I've included for react are called simple react snippets.

[00:00:45]
There we are right there. I know this fella, he's all right. So you can go ahead and see here down here, instructions on how to do that. So for instance, if we wanted to do get react we can just do IMR. And then that gives us import react and then we could do CCC which is a class component.

[00:01:02]
And I don't know we maybe we have an artist here, you get the idea. Just quicker for scaffolding out application files here with react. We have the same thing for view. So let's do a new file and call it app.view and I've included some snippets from Sarah Drowsner that allow you to do something like a v-base, or even vt-base, which gives you a TypeScript and now you have a TypeScript based view component file here, boilerplate that you don't have to do.

[00:01:33]
And then let's do one more. Let's do. Let's do app.component.js, which would be an Angular file. And look, I told you material icons was cool. Look, it just knows. It's like, yeah, it's probably an Angular file. Nobody else would name their JavaScript files that.
>> Speaker 2: [LAUGH]
>> Burke Holland: Now, you can do a dash, or I think it's a, what is it?

[00:01:54]
A let's see here. Let's just look for a component. Let's see here. Did I include Angular snippets? Let's look here. I should have given you John Papa's amazing Angular snippets. Yet right here. There they are. Let's see here. Component I don't know where my components are. I'll have to look at this later, but you should get like an a dash component, and that will, there it is.

[00:02:22]
And then it will scaffold out. It was just in it like you want a component. Surely that's what you want. No, but thank you for trying. And you should be able to scaffold out an Angular component here. Alright, by the way, sometimes VS code does get into a state where you're like well this should be working but this isn't working.

[00:02:39]
A quick tip on that is to open the command palette and say reload window, like this, and it would just reload VS code, and a lot of times that will solve a lot of problems. If things aren't acting like you think that they should, you should check that out.

[00:02:52]
>> Speaker 2: You have a key binding for that or you just use the pallete?
>> Burke Holland: I just use the pallete. Do you have a key binding for it?
>> Speaker 2: No.
>> Burke Holland: Let's see it, is it, yeah, I guess we could keyboard shortcuts is reload window in here. Yeah, we could.

[00:03:08]
Yeah. Command R there is one. Look at that. All right. Let's do it. It didn't work, it's not working. [SOUND] Yeah, there we go.