Challenge 3: Solution

[00:00:00]
>> Speaker 1: The JSON schema, if you're not familiar with that it's actually a pretty solid standard, lots of things use it. And it's great for validating options and stuff, so if somebody is using your plug in, they configure it wrong, and then they'll get some validation here. So the schema is gonna be an array.

[00:00:20]
And the way that it's configured in the ESLint rule, when you actually configure ESLint here, actually, let's see, we have an .eslintrc right here. So if I were to configure our no console rule. You can configure it to just be off or to warn or to error out.

[00:00:47]
But if you wanna be able to pass some options then you turn this into an array. And then all the other things that you provide here are the rest of the options. And so often you'll see that there will only be one option that's an object and that has properties on it just because it's easier than a big long list of options.

[00:01:07]
As far as reading the configuration later. And so since we're gonna have this allowedMethods the way that this would be is like allowedMethods: ['warn']. So that's how you'd configure this once we have this all finished up. And then in our test we have that configuration as part of the rule tester, where if you provide an object with code, then you can provide options and that's the configuration options.

[00:01:39]
So sorry, I didn't really quite make that clear before. That may have given a little bit more context. The other thing that's unfortunate is AST explorer doesn't support providing configuration options, which I probably should've mentioned earlier too. So sorry about that. But, never fear we have really great tests running and everything so we can still do this.

[00:02:04]
So for our schema, we're gonna have an object. And inside of this object we have our configuration. So just the fact that this schema is an object doesn't mean that the first argument is gonna be an object. This is just our configuration object that says what the schema should be.

[00:02:23]
This type property is where we define what type we want this to be, and we do, in fact, want it to be an object, so we're setting type: 'object'. And the properties of that object is an object that have keys of what the property should be, and then the value will be the schema for that property.

[00:02:46]
So ours will be allowedMethods, and this is our schema for the allowedMethods property. The type of allowedMethods will be an array, and the items, which hopefully you were able to glean that piece from the JSON schema examples. Items for us, you could say the type is a string and that would work just fine.

[00:03:10]
But we're gonna say that it's an enum to specify exactly what strings are allowed. And I'll just copy the disallowed methods. So that you can allow those methods. And also a couple of extra pieces of our schema specification here, just to make it even more useful, is if you are going to specify a lot of methods, then we want minItems of 1.

[00:03:39]
So we wouldn't want to have allowed methods with an empty array, that would be useless. And so we'll require people provide one. And uniqueItems is true, just so that people aren't repeating themselves unnecessarily. Getting the actual options, well we get it from context.options, and we can save that and we'll see these console logs.

[00:04:04]
Here's something cool. So we're using Jest as a testing framework, and it shows us where that console log came from. And then it shows us what the log is. Which is totally rad. Line 34 in no-console.js, yeah. Okay cool, so most of these are empty arrays, so there's no configuration.

[00:04:22]
But one of them has an item in it. The configuration we want, so we'll get the config from context.options first item, or we'll just make it an empty object just to make things easier for us. And then we'll get the allowed Methods from the config.allowedMethods. And let's go ahead and we'll console.log just here, and we'll default that to an empty array, as well.

[00:04:57]
Destructuring would really help right here, but we're not gonna do that. Okay, cool, so now we have an empty array for most of them, but one for this one. And now it just becomes a matter of including this as part of our check as to whether or not this thing is okay, and we should exit early or if we should report on it.

[00:05:18]
And the thing that, sorry, should make that bigger. The thing that determines what function is being called is this property right here, so we have. The identifier were the name is console, yeah console the parent has a type of member expression, and that member expression has an object which would be the console, and a property which would be log, or dir, of whatever.

[00:05:44]
And so here we can say we wanna make sure that the property name value is either not in the allowedMethods.includes(val), and it's also in the disallowedMethods. So lots of negation and stuff going on here, but basically, this thing, this node looks like something we don't want, if it has these properties, and the function that's being called is not in the allowedMethods.

[00:06:23]
So if it's in the allowedMethods, we're good, and it's in the disc lab methods, so if it's in disc lab methods, we're not good. Okay, hopefully that logic kind of makes sense. And we have passing tests. Everything's green, remove that console.log there. So that was fun,
>> Speaker 1: Providing options is something that you do quite frequently, so that learning and using JSON schema is a valuable skill for ESlint programmers.

[00:06:56]
And JSON schema is useful for lots of other things, like there's a module called joi, J O I, that uses JSON schema to validate stuff. And it's great, it's a really powerful system so I recommend learning it. Okay, that's it for that exercise, and let's just ask really quick what are some of the take aways from this exercise?

[00:07:26]
I will sit in here silence until I get at least one person to say one takeaway.
>> Speaker 2: I learned something about schema today.
>> Speaker 1: You learned something about schema, JSON schema, excellent!
>> Speaker 2: Yes, JSON schema.
>> Speaker 1: Yeah, and that's great, good takeaway. Yeah, and the ability to provide options, provide that in your test.

[00:07:50]
And validate those things so that your plug in can be more configurable, and more useful to more people.