Complete Intro to React, v5 Configuring ESLint for React

Transcript from the "Configuring ESLint for React" Lesson

[00:00:00]
>> Brian Holt: So let's address 'React' is undefined but never used. Well, that's not actually true if you think about it, right? What is div being transpiled to?
>> Brian Holt: Well, it's being transpiled to React.createElement, right? Which means that React is being used. So anywhere that you have jsx, you actually have to have React in scope, that's a hard requirement.

[00:00:24] And the reason being is everything's being transpiled to React.createElement. But eslint doesn't know that. So it's saying you're importing this and never using it, so what the hell?
>> Brian Holt: So let's go actually fix that.
>> Brian Holt: We'll just do that right now, really quick.
>> Brian Holt: So come back to your,

[00:00:51]
>> Brian Holt: Desktop right here,
>> Brian Holt: And say npm install -D babel-eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react.
>> Brian Holt: So that's a few things, but we need all of these tools to make sure that it understands React correctly.
>> Brian Holt: I'll give you a second to type that out.
>> Brian Holt: So let's talk about what these packages are.

[00:01:38] babel-eslint allows eslint to be augmented by Babel, which is the transpiler, right? So out-of-the-box, typically, it doesn't understand React super well.
>> Brian Holt: So that's what babel-eslint does. esIint-plugin-import gives you some new rules around importing and exporting things, just so you have good habits with that kind of stuff.

[00:02:04] eslint-plugin-jsx-accessibility, which is what a11y stands for, is just a bunch of kind of no-brainer things to do for accessibility, right? Like, don't make divs clickable, right, for example. This will just kind of help you catch those really easy accessibility things to do. And eslint-plugin-react is going to actually help us with some other additional React rules that we need, okay?

[00:02:35] So install all that stuff.
>> Brian Holt: And while it's installing, we're gonna go to our package.json.
>> Brian Holt: Or not package.json, rather, but our eslint plugin, this one here.
>> Brian Holt: So let's put this on multiple lines, so it'll be a little bit easier to read.
>> Brian Holt: Okay,
>> Brian Holt: So underneath eslint:recommended, the order of these is not super important.

[00:03:12] The only thing is the two prettier ones have to come at the end, right? So everything above it can be in whatever order we want. These one just have to come at the end because all these two rules do is turn things off, right? And you need them to be last so that they're off, right?

[00:03:26] Whereas if I put eslint:recommended first, the last thing that will happen will be turning things on that prettier's trying to turn off.
>> Brian Holt: So the first one's gonna be plugin:import/errors.
>> Brian Holt: plugin:react/recommended.
>> Brian Holt: And plugin:jsx- a11y/recommended, like that.
>> Brian Holt: Okay, so this is just gonna be a bunch of rules that are gonna coming in from those plugins that we installed.

[00:04:11] We're gonna install a couple of plugins here. One of them is gonna be react, one of them is gonna be import, and one of them is going to be jsx-a11y.
>> Brian Holt: So extends our sets of rules, right, and plugins are new abilities for eslint, right? So import, this is going to allow it to associate that if this file exports something, this other file can import it.

[00:04:43] And if it doesn't export, then it can't be imported somewhere else, right? That's kind of what import does. This is going to do some more abilities with understanding accessibility. And react is going to fix a lot of our React problems, okay?
>> Brian Holt: Then we're gonna have another one here called rules.

[00:05:07]
>> Brian Holt: This is where we can actually turn on and off specific rules. We're not gonna be doing prop-types today. So go ahead and turn off react/prop-types,
>> Brian Holt: Which is what 0 does, it turns it off.
>> Brian Holt: prop-types are like a very weak type checking that React can do for you.

[00:05:30] We're gonna get to TypeScript later in the intermediate React workshop. So prop-types are a useful when you're using TypeScript.
>> Brian Holt: And then another one, we're gonna say, no-console, that one, just turn that one on 1.
>> Brian Holt: Whoops.
>> Brian Holt: I frequently use console.log to debug things, right? And so if you have no-console enabled, it will not let you, and it will error out on that.

[00:06:05] Whereas 1 will be a warning, right, so it'll be green underlined instead of red underlined.
>> Brian Holt: Cool, so those are the two that we're gonna turn on right now.
>> Brian Holt: Okay, and then down here we gotta do one more thing, one of them is underneath env, here, settings,

[00:06:30]
>> Brian Holt: And react.
>> Brian Holt: And then you have to tell eslint which version of React you're using. But you can also just say, can you just figure it out yourself? So that's what detect does.
>> Brian Holt: Which means it'll figure it out from your package.json.
>> Brian Holt: So at this point I'll tell you, this is my React config that I use on almost all my projects.

[00:07:01]
>> Brian Holt: It's pretty good. The one thing I'll say here is eslint react/recommended has some rules that I don't necessarily agree with. And I think we'll actually end up turning a few more of them off later. So just because react/recommended says something is a rule, you can question it a little bit.

[00:07:21] Whereas don't question anything in eslint:recommended, that's gospel truth right there, right? That one you can just, everything it says is great. react/recommended, you can question what's in there.
>> Brian Holt: Okay.
>> Brian Holt: So now, if I save that, you'll notice now that this is not red anymore. And actually if I comment it, it's gonna say, hey, React has to be in scope or this isn't gonna work, right?

[00:07:49] So it's actually gonna help you out with more React stuff now.