Challenge 5: Solution

[00:00:00]
>> Mike North: Let's first deal with the task of this UI customization stuff. So I'm gonna open up my user preferences here, and I think I might've actually had some stuff here. [SOUND] That is actually the solution, fantastic. So what we're gonna do here is We've got some color customizations here where you can see,

[00:00:34]
>> Mike North: If you go down into this next line and just hit Ctrl+Space, you're triggering this IntelliSense like, give me all valid completions You know, with the input I've given you so far. This is why I didn't attempt to list all of the different things that you can customize.

[00:00:51]
It is a crazy long list of all of these different things you can tune. Hopefully now you can see that you do not to build your own extension to define a theme. You have like a thousand numbs that you can turn here and get things exactly the way you want them.

[00:01:08]
So if I save this, we should see a couple of things changed. Well first off, this text is so late that I can hardly see it.
>> Mike North: We'll do that, there we go, a little more contrast. So that's the active foreground and then of this tab here. You can see our peak views background ends up being a dark red and if we were to go to like cart store and say show me the definition of this peak definition this is like a hard to see in the projector were hopefully you could see that video really dark red.

[00:01:48]
So all of these like this yellow here that's badge here we can see the background is yellow the foreground is a very dark gray we could like. Make it darker, turn this to white. You typically want to have, oops, sorry, that is the panel background. You typically want to have a file open here.

[00:02:11]
So that you can see the effect that it's having on these various things. So let's talk about the snippets. So those are the user settings. Let me make sure I'm taking all the boxes here. That should have taken care of this. I will leave it to you to do your syntax highlighting.

[00:02:31]
I will show you what I've got here but that's so I've got a text mate rule That just for operators makes them bright red, and let's see how that looks. So here's my equal sign that became bright red. We've got any other operators in here, ++, bright red there.

[00:02:55]
So it just became like, really easy to see in You know pop out.
>> Mike North: Just be smart like about your syntax highlighting cuz it becomes a mess if you just tweak it to too many directions. So the next step disable my mini map and the indent guides. I've got that in place here Minimap enabled false, indent guides false.

[00:03:21]
If I wanted to do a specific, on a per file type customization, I could do something like this, markdown.
>> Mike North: It would be like that, markdown. We could say minimap enabled is true. And then here, I'm in a JavaScript file, there's no mini map, but if I went to this workspace, now that's this thing over here, right?

[00:03:51]
Where we can sort of click around and see everything. So you can just use per file type customizations like that.
>> Mike North: And then finally let's do our code snippets. So what we want is you're gonna say open user snippets and I just hit Shift Cmd+P and typed in snip and there it is.

[00:04:19]
And you're going to have pro language user snippet. So here we are. This is what I left myself to demo to you, I'm going to update this so that it does what we are looking for it to do. Sorry, we don't want JavaScript, we want html [NOISE] Aw and here we go, so this is the image placeholder SnipIT.

[00:04:41]
Now what we've got here is a prefix. So I can just type ph tab, I will get this text here and then we'll regard these as two different blanks to fill in or I can just hit tab, tab, to fill them in. So we can see how that looks.

[00:05:00]
>> Mike North: Down here I can just type ph tab, and that's what I get. And you see the other blank is ready for me to tab into it, so 210 tab. Something like that and it'll just work. So, particularly if you are building the same kinds of components all the time, there are libraries you can bring that will give you some nice snippets here.

[00:05:21]
But, we all have boilerplate code that we keep writing over and over again that's unique to our specific apps. Really easy to write these things out. And they mesh so nicely with Emmet. Well, I believe we can even do this.
>> Mike North: Oops all right, maybe not.
>> Mike North: Nope, it doesn't like it Okay.

[00:05:53]
So we're not there yet. Can't mix with the core [INAUDIBLE] stuff, but it behaves just like emit does. And that you can tab and then have the slots to fill in.