Bald Bearded Builder
vscode/vscodes-new-yaml-support-is-awesome

VSCode's New YAML Support is AWESOME

Red Hat's YAML extension improves Visual Studio Code with validation, automatic indentation, schemas, autocomplete, and contextual hover information.

Loads from YouTube when you press play

Transcript 7 topics

Why YAML needs help

0:00

Stop me if you've heard this one before. A long time ago in a conference room far, far away, a group of people got together and decided that YAML was going to be the language we use for all things DevOps. And now we're stuck with it for all things continuous integration or continuous deployment. If you're living that life, you're living with YAML. And sometimes it can be frustrating to work with whether it's, I've missed how many spaces or, hey, what's the name of that property or that node?

And what's the type? Is it an array? It a list? There's so many things that could go wrong. That's where today's extension aims to help out.

Let's get to it. Hello world, my name is Michael Jolley and I'm the bald bearded builder. Let's talk about Versus Code extensions. But before we do, let me remind you that three days a week, Tuesday through Thursday, we stream live on Twitch at 2PM Eastern. I think that's seven GMT.

We'd love to have you hang out with us. If you'll enjoy just building funny projects, talking, cutting up, having a good time, come join us over there twitch. Tvbald bearded builder. Now let's get to our extension.

Install the Red Hat extension

1:19

It's YAML. It's written by Red Hat. And I think they originally did it thinking it would help with deploying Kubernetes things but it works for all YAML regardless of where you're gonna use it. And I use YAML a lot with GitHub actions, with DevOps, with a lot of continuous integration deployment stuff with GitHub actions. And I always seem to get myself caught and today's extension hopes to help with that.

So how do we install it? Well, as I always do, I've left a link in the description below where you can go check and read it and see more about the opportunities for customization. We're not gonna get into all of those today, but you can go read that to learn more. But the easiest way to install any extension is to click the extensions icon in Versus Code, search in this case for YAML and then press the install button. You'll be ready to go.

Let's talk about some features. We're gonna cover several of the high points and then a really amazing two features at the end that'll really up your YAML game.

Use built-in validation

2:25

But first let's talk about validation. There's a really great validation and linting kind of baked into it by default. Things like, you know, is your spacing off? Is this the wrong type of type for this parameter? Is this an invalid child node?

All those kinds of things just kind of work out of the box can be improved with something called schemas that we'll talk about later. But out of the box, you'll really appreciate not missing an extra space. That catches me all the time. You'll appreciate that just coming out of the box without schemas. One of the ways that it helps with the spacing issues is with outlining.

It handles a lot of the outlining for you. So as you're hitting return, if it knows about the type of YAML you're writing, whether it's for a Kubernetes for instance, or a GitHub action, it knows where you kind of are in that node list, that node tree. So it'll add the appropriate amount of spaces when you hit return. Oh my gosh, what a time saver for me. Because I hate like deploying that stuff.

And then it bombs because the format is invalid. But now let's get into schemas because that's where you're gonna find the biggest impact from this extension.

Add schema support

3:36

So what are schemas? They're exactly what they sound like. They're basically just mappings for YAML to let you know what objects and nodes and types, and even sometimes like available options or descriptions of what nodes are. So it makes it easier to define. And because it's defined, the YAML extension can kind of take that and run with it and make sure that you're using the correct names in the right places.

And really helps with your discoverability to know what's available to you when and if you're missing anything. You can find schemas, I found a website for this, it's called schema store. I think it's .org, but I've left the link in the description below. You'll find schemas for a lot of different platforms out there from Azure DevOps, Red Hat stuff, Kubernetes stuff, GitHub actions and workflows. The examples we're gonna show today are gonna be specifically doing GitHub workflows.

Once you go there and you find the schema that you want, all you need to do is create a new file in your repository. I prefer to keep my schemas with my code. That way I know that they match what's in that repo. For instance, if I've got GitHub actions, I wanna put a schema that is for GitHub actions there. Or if I'm using some kind of Azure DevOps, say I would keep a schema for Azure DevOps with that code base to kind of go along with the two.

You can download, I just copy and paste it actually into a file. In this case, we'll do like a GitHub actions. Json file, paste that in there. Once we've got that file there, we can just go into the settings for the extension.

Map schema files

5:21

Now you can go to the command palette and there's a list where you can edit the schemas. And there you'll put in a path to the schema and then some glob patterns. It's actually gonna rate, you can have multiple patterns for any files that you want this schema to apply to. And in my case, I'm telling it specifically that GitHub workflow folder and any YAML, . YAML or YML files.

So that it can do them both. Now that I've got that schema set up, it'll apply that schema to any of the files that match those glob patterns. So when I open up my CI YAML file, it's gonna let me know, hey, I'm expecting a jobs node. I'm expecting a name node, which makes it really stinking nice. I get two new features because of using that schema.

First up, auto complete. With auto complete, you'll get like auto completion or IntelliSense, it's even more than IntelliSense really when you're typing in that YAML file.

Get autocomplete options

6:13

So things like runs on, it knows that that's a parameter or jobs or those sorts of things it knows and it knows where they fit in that node structure. So once you choose that, it's just, you know, auto complete tab and it's there for you. But even better than that is the fact that it knows what the options are for that node. So in the instance of runs on where I've got, you know, I can run it on a few Mac images or a few windows images or a few Ubuntu images. It gives me the options in a dropdown.

So if I type a U it's gonna give me the Ubuntu versions that are applicable to that infrastructure. And then I can just choose it, hit tab and continue on writing. I don't have to remember what versions are available to me and all that kind of stuff, really handy. The next thing is hover. Hover is just a great usability enhancement.

Use hover details

7:15

It allows you to mouse over any of these nodes and get more description about it. For instance, what is this node about? What value should I provide here? Do I need it? Is it required?

And sometimes they'll provide links that allow you to go find more information about that node. It's just a great, like I said, discoverability tools. So there may be nodes that you don't use that often, but now that you see them, you can read more and think, ah, that would have solved my problem with that thing three projects ago. I'm gonna remember that and use it in the future. I'm curious about what kind of work you're doing with YAML.

I mentioned I do a lot of GitHub actions. So I use YAML a lot with that. And I used to use it with Azure DevOps as well, but there are tons, tons of use cases for it. What kind of things do you use it for? I'm really interested.

Let me know in the comments below. And listen, if you enjoyed this video, be sure to hit that like button. And if you wanna see more Versus Code extensions and possibly find some you don't know about, be sure to hit the subscribe button and hit the bell to know when we release new videos. Until next time.

Sign in to join in. Reading needs nothing.