This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Lint Rules for React" Lesson
[00:00:00]
>> Brian: We broke our Lint in the process cuz Standard doesn't actually know how to lint React. I mean it can but, the real issue is that we actually have additional things we wanna enforce from our linter for React, right? Like there's particularly things that make Writing React better if you do them that way, if we want our linter to enforce that.
[00:00:20] So we wanna include lint rules for that. Unfortunately, we have this issue that I was explaining it as a benefit earlier, that standard is not configurable. Not even to add more things to it. So at the point that you wanna do anything to subtract or add to standard, you actually have to stop using the standard package.
[00:00:39] You have to use EsLint and include the standard rules. So it is what it is but, it's actually not too bad to do. So first thing, create a new file, call it, this is going to be inside of the, complete-intro-to-react folder, it's been called .eslintrc.json. The reason why they put .json there is I think you can configure it with YAML now, if anyone's into that.
[00:01:11] I am not, so I do not, so save that.
>> Brian: Yes it begins with the dot, I don’t give a shit.
>> Brian: Sorry I just argue with my editor all day. [LAUGH] Okay, so the JSON file "extends": and that's gonna be an array. And the first thing we're going to include is standard, right?
[00:01:39] So this is saying, please give me everything from the standard rules and also, I want everything from standard-react. Standard-react just from the same people, it's a bunch of standard rules for react that are just sane default rules for linting reacts. So a plus definitely should always, even if you don't want to use, necessarily, Standard.
[00:02:03] Standard React is like pretty much required for writing React, in my opinion.
>> Brian: There's nothing controversial about standard React, unlike standard. I'll put it that way. So now we wanna be able to fix our lenter, right? Because now it can't just run using standard, that won't work anymore, so we need it to run via eslint directly.
[00:02:28] So what we're going to do is we're going to go to our package.json, we're going to change "lint" to be "eslint", because that's what we're actually going to run directly. It's automatically going to read from our
>> Brian: From our eslint config, so now we just have to tell it where to run.
[00:02:52] So we're gonna tell it to run in js/**/*.js. This is just telling eslint, go into the JS directory and then lint everything in that folder. That ends in .js and also go recursively deep, right. So it's going to go down your entire directory tree inside of js. If you don't put the star star there it'll only do the first level, it won't go recursively deep, right?
[00:03:18] And then we also want to lint our Webpack config, so just do webpack.config.js.
>> Brian: Now you might be thinking I did not actually MPM install globally eslint. However this actually still works, because what MPM is going to do is, first going to check for a global install. No I don't think that's true, I think it first checks if node modules has any package called ES lint.
[00:03:52] It uses that one, and then if it doesn't find that, then it looks globally, right. So this still works, despite the fact that you don't actually have ES Lent actually installed, globally that is. Right, so now I can say npm run lint, and it's going to crash, it's cuz a bunch of stuff here.
[00:04:22]
>> Brian: So new line required, okay prop validations, haven't talked about that, so let's ignore that for now. And actually you can just ignore everything from my title and then delete it. In fact, let's just do that, because that's just gonna give me a bunch of Lint errors.
>> Kent: Just a hint, I think, if you put the -s on the end, I think it will not give you that blast of npm errors, I think.
[00:04:46] That's one of the things that Kent C Dodds suggested.
>> Brian: Love Kent, he's a good dude. Also from Utah, yeah that is good. So yeah, if you just include MPM run lint-s, you lose all the MPM output, which is good. All right, so I'm going to just remove js/MyTitle, because we don't need it anymore.
[00:05:14] And I'm going to run that again. New line required, but I can't be bothered to do it, so I'm going to do npm run lint dash, dash, dash, dash fix, right? Because remember, you can pass that dash, dash fix into ES lint. And now, if I run it without it,
[00:05:38]
>> Brian: Everything works okay.
>> Brian: Any questions about making Lint work?
>> Brian: Awesome.
>> Speaker 3: So question about using if you have both JSX and JS files
>> Brian: And then you just have to do both globing patterns, globbing patterns, rather.
>> Brian: So you just come in here,
>> Brian: And do this.
[00:06:12] There might be a better way to do it, but this is an easier way to do it.
>> Kent: That way works.
>> Kent: That way works.
>> Brian: Yeah this way works, exactly. Yeah, you can probably do like a fancy regx, if you want to, but I don't know who wants to do regx, that seems like a bad thing to want to do.
[00:06:29] So don't or do, I don't care.
>> [LAUGH]