Well, let's get ESLint working. I'm going to go to replies.vue, and at the moment, because we have that Vetur extension installed, we actually get a lot of functionality out of the box. For example, you see right here where we filter through all of the items? Well, if I were to remove that key section instantly, we're going to get a little warning here. Or, I can go to the Problems tab to review that. And we get a little hint. Elements in iteration expect to have the v-bind:key. So we want to key each of the items for sorting reasons.

Elements in iteration expect to have the bind key. So we want to key each of the items for sorting reasons. So I will sort them according to the id of the reply. And now that goes away. But it would be nice if we could take this further and have basic ESLint support. For example, this would be the equivalent of something like phpcs and phpcsfixer. For example, a common convention is to always use a triple equal sign when doing comparisons. So if I were to say, if page is foo, then do something, right? Well, at the moment, nothing picks up on that. We have no linting in effect here.

Well, at the moment, nothing picks up on that. We have no linting in effect here. Let's see if we can fix that. We'll go to our extensions, and we're going to look for ESLint, and pull that in, and reload. But we're not done yet, because remember, this is a Vue file. It's not just a JavaScript file. So let's hit Command comma, and let's look for some of these new ESLint options that are available. If we scroll down, here's the language IDs that we want to validate.

are available. If we scroll down, here's the language IDs that we want to validate. I want to change this to include Vue. So we'll copy that, and per the documentation, we're going to add Vue, as well as Vue.html. All right, we'll close that out. Save it, but I still don't see anything here. Let's take a look. The documentation will tell us that we need a couple of things. First, we need an .eslintrc.json file. This is where we can declare all of the rules for our project.

First, we need an .eslintrc.json file. This is where we can declare all of the rules for our project. Let's do that. We can do it from the command palette. ESLint, create a lintrc.json file. So this will be added to your project root, like so. So notice all of these rules here. You can add and configure these however you want. Just look for the ESLint documentation. Let's see.

And it is. Now in our case, the one we would want is ===. And there we go. It requires the use of triple equal sign. So what we can do here is say ===, and we have good auto-completion. Should that be a warning or an error, let's mark it as a warning. But now actually, we do see an issue here. If we scroll back, it looks like, ugh, so ESLint is interfering with our view file, and we know that this is valid. So it sounds like we need an ESLint view plugin.

All right. Now we can filter through all of these issues. Empty block. Well, yes, of course. It's letting you know, hey, you're not doing anything there. Great. Return foo, and that will go away. Next, it is now noticing that we're using two quotes instead of three. We can fix that easily. And now it goes away.