Debugging ESLint

[00:00:00]
>> All right, any questions so far about what we've done so far?
>> Yeah, so I think that Krista and I are getting the underlines in the warning for example, under console log.
>> So the first thing you wanna triple check is make sure that you have the ES Lint extension installed, this one.

[00:00:22]
And then you probably need to restart VS Code. So you just command q or alt f4. And then just reopen it, it should probably reopen to the same one. And then hopefully you should see those underlines happening. Did that help? It did not?
>> Already restarted it too, [LAUGH] yeah.

[00:00:48]
>> Let's see. I just make sure that ES Lint enabled is happening in your settings, which is command comma, control, comma. Make sure that you have a .eslintrc.json and it's in the root directory of your project. That'd be another thing. Make sure that this is all well formatted.

[00:01:15]
>> Yes, that was not enabled in the settings, so.
>> Okay. That's cool. That one definitely should be. So if you search for any ESLint enable, hopefully that will help. I think something else you can do if you look in the command palette is yeah, so if you again, shift command p control, shift p or f1.

[00:01:48]
All those work will open the command palette. If you look at the ESLint, if you type Yes, lint, it'll show you all the things. You can do enable ESlint as well and that should work. All right, this actually probably will help for people that are still having problems.

[00:02:04]
If you do show output channel, this will show you all the output from ESLint and it'll probably tell you why it's not running. So, Lynnae asked a good question about what happens if the underlining is not happening in the code? It's hard for me to say without actually taking a look at it, but I'm gonna show you some steps to figuring that out.

[00:02:26]
First thing, make sure that the ESLint extension is installed. You should see that and it should say uninstalled, right? To let you know that it is installed. That's the first thing. The next thing you wanna do is looking into preference. So command comma, or you can look at code preferences settings.

[00:02:47]
And you can see here in ESLint, there's one here that makes sure that says EsLint is enabled. And then the last thing that might be happening, which I think is what was happening to Lynnae, is in your eslintrc.json. If this is mouth formatted in someway that the ESLint cannot understand it, it's not gonna work, right?

[00:03:08]
So in Lynnae particular case, she had a space here. And so now if I had the space here, it won't work and it's not gonna really tell me why. If I go back and look over here, it's still remembering it, but if I was gonna reopen this, it wouldn't work.

[00:03:26]
So the way that VS Code will help you with that, is you can see here in View, you can look at Output. Okay, so I'm gonna click at Output. And then there's a drop down here with a bunch of stuff I can look at. Click on the ESLint and it'll give you all the errors that are coming out of ESLint, right?

[00:03:46]
So you can see here it says failed to load plugin import, right? And actually, I think it'll say somewhere up here. Well, yeah, that's what the problem is. So if I go back here and save, Then it'll start working again, right? So, those are some steps you can figure out to why things aren't working, and that's in general, the taken to debug why extensions don't work.

[00:04:08]
There's one here for Prettier for example, we can see everything that Prettier is happening over here. So, lots of good stuff going on.