Linting

[00:00:00]
>> This is more into code style and this is a point of confusion for a lot of people because they don't understand why they need prettier and they need ESLint. And they overlap, which makes it confusing, right? ESLint can take care of some of the things that prettier takes care of.

[00:00:15]
And so people wonder, why do I need both tools? And the way that you should split these in your head is, prettier is very mechanical. it's very syntactical. It's very much, is there a space here? Does this need parentheses? It's very focused on those details, prettier does not care at all.

[00:00:35]
Do you use this variable? Is this variable well named? Is this function too long? I'm I using great accessibility practices? That's the kind of stuff that ESLint. ESLint is about the style. It's about what the code does. And prettier is about what how the code looks. So that's kind of the way that you can split it.

[00:00:52]
And again, it's confusing because ESLint can worry about some of the how it looks by itself, but it's not nearly as good at it as prettier is. So we're gonna set up prettier, or we've already set up prettier, we're gonna set up ESLint to take care of the code style stuff and ignore the code formatting stuff.

[00:01:13]
So I talked a bit about code style and some of my rules about code style and how I don't like introducing too much friction. So my rules are very permissive. If you've taken previous versions of my courses, especially my react courses, I've used pretty strict Lint rules before like the Airbnb rules, or the standard JS rules.

[00:01:32]
And I've kind of moved away from that because I found them too restricting for no purpose. I like something that people is kind of like to pair it is like it's your coach look like one person wrote it. And actually I don't agree with that anymore. I used to, but I don't agree with that anymore because who cares if it was written by one person, it wasn't.

[00:01:51]
And that's okay. As long as your code is readable, readable in the sense of if I write some code, and then I pass it off to Krista, and Krista reads the code. If Krista can understand what I wrote, then it's successful. It doesn't matter if it looks like Krista wrote it or not.

[00:02:07]
So, that's why I kind of have trended backwards into let's make the linting rules as permissive as possible so that it catches bugs, and it catches code that we don't want to go out and then it does nothing else. So we're gonna use a tool called ESLint. I really quite like this tool.

[00:02:25]
So we'll come back to our command line here, I'm in, again inside of my fox game. And I'm gonna say mpm install-D eslint, eslint-plugin-import and eslint-config-prettier. So eslint is very extensible, it allows you to do a lot of things with it. So I'm gonna bring in some pre-made config for it.

[00:02:56]
So I'm gonna type that, it will take a second to install all of it. You will see some errors, that's fine. So you can see 33 packages installed, great. And then we're going to make a new file here, and we're gonna call it.eslintRC.JSON. Again, it's very important and it needs to be in the root directory here.

[00:03:22]
So .eslintRC.JSON. Okay, I'm gonna save that, yes use dot. Okay, eslintRC.JSON. I'm going to put the first thing here is extends, and it's gonna be an array. And inside of this array I'm gonna put eslint, colon recommended. So these are all the rules that ESLint itself recommends for you, which is their bug catching things and they're not stylistic things.

[00:04:01]
So they're more like, you created a variable then you never used it. You should probably not do that. That's something that you should, you definitely, you don't want to have variables that you never use. So that's a good thing to have in there. Or you're referring to a variable that does not exist.

[00:04:15]
That's gonna be a bug. It catches up for you right away. It helps you go faster when you're writing your own code. Here's another one called plugin. Colon import, which is the one that we just installed. When a new plugin colon import/errors. So this is gonna use this plugin to say you're trying to import a file that doesn't exist.

[00:04:37]
Or you're trying to import a module inside of this file, it does exist but the module that you're trying to import doesn't exist. So it catches these kind of errors around imports. And then the last one here is prettier. So again, I said prettier can, or ESLint can do things like detect bad indentation, but we don't want it to do that because prettier is gonna worry about that.

[00:05:00]
So this prettier set of rules which we installed the ESLint, config prettier, turns off all the rules that we don't want to have it do. That's what all that does. Okay, then we have rules. This is where you can actually turn on and off specific rules. And the one that bothers me that I always turn off, there's one called no console.

[00:05:24]
I console.log all the time and I hate that it gives me Arizona. So I make it worn. So if you do no-console and then you put it out one instead of airing it warns and says like, are you sure you want to commit this? So that's what that does.

[00:05:38]
If I wanted to turn it off, I think you just put it at zero and then it would just not tell you at all about console.logs. But I like it at one just so I'm aware that I'm doing something. Okay, we have to tell it that there's a plugin, and it's called import.

[00:05:54]
That New one called parser options, because we're gonna be using recent JavaScript and by default, ESLint doesn't understand recent JavaScript. So we're going to say ECMO version and I'm gonna do 2018 because we're not going to use anything beyond that right now. And the source type is modules.

[00:06:21]
That's we're gonna be using ies six style imports. That's what this does. Which I'll explain modules when we get there. And the last thing to tell ESLint is like, you have to tell it where you're writing code. And I'm gonna say we're going to use es six. So true on es six, which is like recent style JavaScript.

[00:06:44]
We're gonna be inside of the browser. And some of it will be writing stuff for node. So there's put that to true as well. And that's it. That's all we need for ESLint. Now our code is going to be automatically printed for us. So again, I want you to go into extensions.

[00:07:02]
I want you to type in ESlint here. And there's one up here from Dirk Beymer, I'm sure I'm saying that wrong, sorry Derrick. Click on that one, should look like this. Almost nine million downloads, go ahead and just install that. And now when I go and write code and it's bad, it's gonna say this is bad.

[00:07:21]
You should fix it and it's gonna do it inline so I can iterate it really quickly, so it's super helpful. And again in the course notes here, if you want to know how to do it from the command line, I show you that, that's inside of the course notes.

[00:07:33]
You can take a look and that's it.