Check out a free preview of the full Complete Intro to React, v7 course:
The "Configure ESLint with JSX" Lesson is part of the full, Complete Intro to React, v7 course featured in this preview video. Here's what you'd learn in this lesson:

Brian walks through configuring ESLint to accept JSX and React and no longer throw errors on prop types and React in JSX. Configuring ESLint to extend the import plugin, and jsx-a11y are also covered in this segment.

Get Unlimited Access Now

Transcript from the "Configure ESLint with JSX" Lesson

[00:00:00]
>> So let's go fix ESLint. Open your terminal, Ctrl+`, if you're not familiar with the shortcut. We're gonna say npm -D eslint-plugin. Now, well, looks like I don't have to type it all again. plugin-import02.25.4, again, you can just copy this directly out of my notes, it might be easier.

[00:00:33] It's at the bottom of Core React Concepts with JSX. eslint-plugin-jsx-a11y, a11y, if you're not familiar, is accessibility. There's 11 characters between the a and the y, hence a11y. At 6.5.1, and eslint-plugin-react at 7.28.0. There's a decent chance that you're gonna see some vulnerabilities. That's because I'm having you fix versions of this.

[00:01:13] These are definitely gonna just go up, so by the time that you watch this, there might be like 100 vulnerabilities. It's fine, you're not shipping it to production, it's okay to have these on there. If you update to the latest versions, they'll probably go away. If you wanna see what they are, you can say npm audit.

[00:01:29] It will show you everything that's actually amiss. Sometimes you can just say npm audit fix, and it might fix some of them. Yeah, this one, it couldn't fix any of them automatically, which is fine. Anyway, suffice to say, don't worry about it, it's okay. Now, I would like you to go into your eslint.json.

[00:01:54] And we're gonna add a couple of more things in here. So let's put this on multiple lines here. So again, order is not incredibly important here, as long as prettier is the last one. So we're gonna do plugin:import/errors. We're gonna do plugin:react/recommended. And we're gonna do plugin:jsx-a11y/recommended. Okay, if underneath plugins we're gonna have react, and we're gonna have import, we're gonna have jsx-a11y.

[00:03:07] So, just to let you know what's referencing what, let's split this for a second, and we're gonna pull out package.json. We installed, I'm in test-app, that's why. So let me run that again. Now 0 vulnerabilities, that's nice, anyway, I'm sure you'll find some at some point. So if you look at our package.json now, I don't know why this is upsetting me.

[00:03:43] Don't save, there we go, package.json. There we go, okay, sorry. So we installed eslint-plugin-react, JSX accessibility, and import. Here we're importing those plugins. These are augmenting the ability of ESLint to understand additional language features. So, for example, the React one allows it to comprehend what React is doing.

[00:04:06] Import allows it to do some logic around imports. So for example, if I say import { notReal } from './Pet', ./Pet is a real file, right? Or PetThing or something like that. There's some logic here, and I'm not finished with it yet, that's why it's not doing it correctly yet.

[00:04:36] But that's what the import thing will do. It'll run ESLint across files, right, which ESLint doesn't do at the moment by itself. It only does one file at a time, whereas the import one allows it to check other files at the same time. Okay, and then JSX accessibility, this will just check things like, are you putting a alt text on an image?

[00:05:00] Are you not making buttons that are links, right? So it'll check things to make sure that you're just doing basic accessibility. Which I add in this course just cuz I think it's a good idea for everyone. And I'm not the best at JSX, so I generally try and make that a machine problem instead of a human problem.

[00:05:19] So that it's just telling me the best practices as I go. Okay, so that's what these are. Then, Here we're doing the same thing, as eslint:recommended is, there's a set of recommended rules that comes with the React plugin, and then recommended rules that come from the import one.

[00:05:37] So we're importing all of those here. They have additional rules if you wanna do things, for example, like alphabetizing all of your function names, right? That exists in there for some not very smart reason, but it's in there, right? So actually I'm gonna, to bless you, I'm going to have you disable two rules that I just can't stand, Okay, so here under rules, the first I'm going to say is react/prop-types.

[00:06:12] I'm going to put that as 0, 0 just means turn it off. I think 1 makes it a warning and 2 makes it an error. I think you can also do half or something like that. I don't remember what they are, I just remember 0 is off, so that's what I do.

[00:06:29] And then I'm gonna do react/react-in-jsx-scope is 0. Remember that you always had to import React in every JSX file before. We no longer have to do that, so we can turn that rule off. So prop types, there is a package called prop-types that can do some validation, that if I'm importing this prop type, it's supposed to be a string, it'll do that at runtime.

[00:06:55] It used to be really useful before Flow and TypeScript came out. But now that Flow and TypeScript are out, that's no longer useful, either use TypeScript or use nothing. Prop types is a weird middle ground of not very useful, so, that's why I have you turn that off.

[00:07:15] Okay, and then the last thing down here. Because React has changed a little bit over the year, you have to put some settings here for specifically the React plugin. You have to tell what version of React you're using. And we're just gonna say, I don't know, look at the package.json, I don't feel like telling you, right?

[00:07:40] And then if you write this, you don't have to worry about it anymore. If you go look at our app.js, notice all of the errors went away, right? Cuz now it understands React here, and we can actually get rid of that React here on line 1. And it knows that Pet is here, and app is being used, and Pet's being used, and all that stuff is happy.

[00:08:00] I think, for example, Maybe, There you go. So I just wanted to show you here, we'll talk about click handlers here in a second. But this is what the accessibility one does for you. It says you put an onClick somewhere where it's not very accessible for a screen reader reader to find it.

[00:08:30] And so it'll throw accessibility errors on there for you automatically so you don't make those kinds of mistakes. That's what that does for you. And I show it to you in hopes that it just becomes part of your default workflow. One thing I was gonna throw out that's changed since v6 of this course.

[00:08:52] We used to have to include prettier and prettier/react. Those were two different rule sets that you had to include. They just rolled it into one, so now it's just prettier. So if you're expecting to see that, that's why it's gone, it's the newest version doesn't require it.