ESLint & Git Setup

[00:00:00]
>> The next thing I'm gonna show you how to do really quick is we're gonna set up ESLint together. And I know this is probably some people's least favorite part of the course is setting up all the tools. My favorite part about this is, we're gonna set it up, and then we're gonna forget about it, right?

[00:00:14]
And it's just going to help us catch problems as we're going. And so the reason why I have students do this as we go is this will help you catch problems while you're going on in your class. This will keep you focused on React, and not on like weird JavaScript problems.

[00:00:27]
So that's the reason why you and I are setting this up together even if it's a little bit tedious and annoying. So we're gonna set ESLint together prettier catches all of your formatting problems, and ESLint is going to catch very simple JavaScript problems, right? If I have something here called App, and down here I call App like this and I forget a p or something like that.

[00:00:49]
This is something that ESLint is like, hey, you're referencing something that you have not talked about before. This is probably a problem of some sort, right? Those are the kinds of problems that ESLint can catch for you. So I want you to come up here, and we're gonna install a few things.

[00:01:07]
So go to your terminal. We're gonna npm install-D. We're gonna do eslint@8.24.0, and eslint-config-prettier@8.5.0. Okay, I have no vulnerabilities here. By the time that you're watching this course, I guarantee there's gonna be vulnerabilities. It's okay, right? You're not shipping this to production. These are developer tools for the most part, not an attack vector.

[00:01:53]
For what we're doing, so it's okay if this number is not zero, okay? Make a file here es.lintrc.json. I like the JSON way, but you can do it with YAML, you can do it with .JS, but we're not doing anything wild. So we're just gonna do JSON. Okay, we're gonna have extends up here.

[00:02:16]
I have a very bare bones ESLint configuration. Now, I used to use like really heavy handed ones like the Airbnb config or standard or things like that. These days I just do eslint:recommended. This is a very non-controversial set of rules of like, don't use variables that you haven't created yet, this is basically if it's in eslint:recommended.

[00:02:45]
It's definitely a problem and it's not an opinion. If you're using the Airbnb one like there's definitely some strong opinions in there. And you can disagree with them, but nothing in ESLint recommends that you're gonna disagree with. So that's the first one. The second one is prettier, ESLint can do some formatting things like you can say, hey, this person has too many indents or not enough indents and things like that.

[00:03:12]
We ESLint to not worry about that because we have prettier, a whole separate tool doing that for us. So this prettier config all it does is it just ignores a bunch of rules. It doesn't add anything, it just removes stuff. This extends array for the most part doesn't matter.

[00:03:31]
The only thing is prettier comes last. Your prettier one should always be last, 100% of the time, unexceptional, okay? Plugins, we have no plugins yet, we will have plugins, and then we have some parserOptions, ecmaVersion. We are gonna use 20, you can put latest, I put 2022 in here SourceType, it is a module.

[00:04:06]
EcmaFeatures, we're gonna use jsx fairly soon. So just go ahead and put that in there. Okay, let's get for parserOptions and then we have an env, we're gonna be working in es6. We are going to be working in the browser, and we are going to be working in node.

[00:04:34]
You might ask what all these things are doing. For the most part, I'll be honest with you, I just copy and paste this from project to project. I don't really think about too much what's going into these configs anymore. But ecmaVersion will tell like, if I'm targeting 2016 and async await, it's not gonna work, right?

[00:04:51]
So it's basically how modern of JavaScript do you want here? The module type is basically like I'm doing an import and export not common JS stuff. I'm gonna use jsx, it's saying like account for that. And then es6 browser and node is just saying, don't give me an error if you see fetch, right?

[00:05:10]
Fetch is a global that exists in the browser, or don't give me an error if I do like __dirname, right, which comes from node. So this is just telling you what sort of environments that you're gonna be working and what kind of Global's are available. Now if I was doing like a much more careful ESLint, I'd have the browser one only apply in the browser.

[00:05:32]
I'd have the node one only apply in node. I'm not being so cautious right now though, so this is fine Okay. So you can see here already, it's already finding areas for me. So the extension that you wanna install for that, here is the ESLlint1, it's directly from Microsoft.

[00:05:52]
Just go ahead and install that. I will say that notoriously, this is a finicky extension. Sometimes it gets really weird about stuff. It's partially my fault because I worked at the team that worked on this so you can blame me a little bit for it, but it's worth it.

[00:06:11]
So go ahead install that, you might need to restart VS Code for it to work, but go ahead and have that one installed. And then let's go ahead and put back into our package.JSON, the same sort of thing for people that are not using VS Code. So I'm showing you how to put like the commands in here for other people.

[00:06:36]
You might ask Brian how often do you use npm run format on your code? And the answer is never, VS Code always does it for me. But here we are gonna do ESLint, and you can literally just copy this part of the string right there, because it's the same thing.

[00:06:57]
And then just do --quiet at the end. It has a lot of output otherwise. So I just put quiet, just tell me when there are problems. I don't care about anything else. Just tell me if I have a problem. Otherwise, please leave me alone. So you can actually run it if you want to, and you will see some errors, which we expect.

[00:07:21]
Which is mostly reaction is not defined, which is a good error for us to see. Just sometimes when I have issues this is just a useful thing for you to know. You can do npm run lint-- --debug. So the -- here means I'm going to pass something not to npm, right?

[00:07:42]
If I leave this off, it's gonna pass debug to npm. I don't wanna pass it to npm, I wanna pass it to ESLint. So it's passing it on to the underlying command. And then here you can see what did it load, how did it load it, did I have any issues?

[00:07:59]
It's very noisy, right So that can be useful if you're having issues you can see all the rules that has turned on all of them that are turned off, just useful for someone who's having an issue. And sometimes ESLint can fix things for you, there's nothing to fix here but like some sometimes it has rules that it can fix automatically, there's not too many of them but sometimes it can.

[00:08:28]
So that's what -- fix would do for you, okay? We're gonna fix the errors, but right now you should have errors, that's fine. You can see that this has already turned red in here for me. All expected, and we'll fix it here in a bit, question?
>> Yeah, I got a environment key es5 is unknown in my,
>> Probably because yeah, you should have you should have es6 not five.

[00:08:56]
>> I got it.
>> ES6 is another word for ES2015, right, so that's gonna say, expect things like map, set, and symbol. There's a bunch of stuff that came with the "es6". So that's what that does for you. Other questions? All right, I swear to God we're getting really close to the end of tool hell, right?

[00:09:24]
And then we're just straight on to React after that. Right now, we are building our Create React app, basically. So if you say, Create React app, create a new app for you, it just does all of this stuff for you. And so next time you go to do that, you'll be like, cool, here's a bunch of stuff that I don't have to do anymore.

[00:09:41]
Screw you, Brian, which is fine. I'm okay with that. I've done my job if you're saying stuff like that. All right, one more thing here every good project needs to get ignore. So please make a get ignore here at the root of your project. Please ignore node_modules. Well, this doesn't use parcel anymore so you have to ignore that, this is when you wanna ignore .emv.

[00:10:08]
It's always a good one and more ignore. Many of you are gonna be on Macs. So DS_Store is always a must to ignore. I did find out the other day, what DS_Store finally does, it's like positions of file, so if I had my finder up here and drag something around like that and moves it.

[00:10:28]
DS_Store is the file that keeps track of stuff like that. Which is silly. But here we are. And it probably does other stuff, that's stuff that will get generated. Coverage, that's for intermediate React, but it's like code coverage kind of stuff. And I don't want to track VS Code directory here, so there is that as well.

[00:10:51]
So this is just telling, Git stuff to ignore. You should probably track your projects in Git, you can just do that by saying git init, right? And if you want any more information on Git, please take Nina's class, on Frontend Masters I have left a link there to do it.

[00:11:10]
Git is always one of those tools, it's just worth the investment to learn. You're gonna spend an afternoon learning pretty dry, boring stuff that I think Nina does a good job of teaching. It's just worth it.