Complete Intro to React v4

Complete Intro to React v4 Adding ESLint for Code Quality


This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

Check out a free preview of the full Complete Intro to React v4 course:
The "Adding ESLint for Code Quality" Lesson is part of the full, Complete Intro to React v4 course featured in this preview video. Here's what you'd learn in this lesson:

ESLint is another tool to assist with code quality that works nicely alongside Prettier. ESLint handles JavaScript coding standards on top of Prettier's code formatting rules.

Get Unlimited Access Now

Transcript from the "Adding ESLint for Code Quality" Lesson

>> Brian Holt: Next thing I wanna talk about is ESLint.
>> Brian Holt: So Prettier is gonna handle formatting. This isn't gonna handle things like stylistic choices about your code. It's not gonna handle you should use double equals versus triple equals. Prettier doesn't care. Prettier is just like, this should have a space here, and it should not have a space here, line break here, all that kinda stuff.

[00:00:24] So for example, if I put parentheses around that, because these parentheses are optional, Prettier just says, no, no parentheses go there. It's just formatting your code for you, but it's not handling any of the stylistic stuff. That's where ESLint comes in. It handles more of the stylistic choices about your code base.

[00:00:46] It kinda helps you find those variables that you're not using that you fat-fingered or something like that. It's gonna say you should be using double equals versus triple equals. So a lot of times people confuse what's the difference between Prettier and what's the difference between ESLint? Because there is some overlap, right?

[00:01:03] ESLint can check if you're using the correct amount of indentation and stuff like that, but we wanna turn that stuff off. We wanna let Prettier handle the formatting stuff, and we wanna let ESLint handle the stylistic choices that we're making. Does that make sense? Cool. So we're gonna make a new file called ., this is inside of the, not the source directory, just the root directory.

[00:01:28] And it's gonna be called .eslintrc.json. I've taught this course four times now, and this will be my third different ESLint configuration that I've used. My opinion of ESLint has changed over time.
>> Brian Holt: So the first time I taught this, we used Standard JS, which is a very opinionated take on how code should look.

[00:01:55] The next time, I used Airbnb, which I found out is the most popular one. If you've not read the Airbnb JavaScript guidelines, you should. You may not necessarily agree with everything that they're saying, but it's a good thought exercise to go through and disagree with some of those things, if you do.

[00:02:12] It's very opinionated, very, very strict, particularly when it comes to writing React. So this time, I'm choosing to take a little bit more laid-back approach to it. I'm gonna use what's called the ESLint recommended rules. So first thing we're gonna have is gonna be extends.
>> Brian Holt: So with ESLint, you can kinda get these package of rules that you're going to adhere by, right?

>> Brian Holt: So the first package that we're going to adhere by is eslint:recommended. And this is just what the ESLint maintainers themselves, here's a very minimal subset of ESLint that just about everyone should be adhering to.
>> Brian Holt: So this is built into ESLint. You don't have to install a separate preset or anything like that.

[00:03:12] The second one that we're gonna do, this includes some stuff about indentation and that kinda stuff, which we don't want ESLint to check for, right? We just want ESLint to check for stylistic things and not formatting things. So we need to turn off some of those rules. Luckily the team at Prettier just provides you with a Prettier preset that you can extend and just say, turn off all these things.

[00:03:40] So that's all this Prettier one does, is it just turns off stuff. We'll also be getting into the React stuff later. So we'll also turn off the Prettier/React stuff.
>> Brian Holt: Okay, so that's what that's gonna do for you.
>> Brian Holt: The next thing we're gonna do is parserOptions.
>> Brian Holt: ParserOptions are just gonna be extended functionality that you want your ESLint to be able to handle.

[00:04:19] So the first thing is we wanna use a recent version of ECMA.
>> Brian Holt: So what is ECMA? ECMAScript is actually the full name of the specification that defines JavaScript, right? So there's a body called ECMA that defines the ECMAScript standard, of which JavaScript is an implementation of ECMAScript.

[00:04:41] Now, there is only a few implementations of ECMAScript, and JavaScript is the primary one. That's really the only one that you have to care about. For all intents and purposes, you can assume that ECMAScript and JavaScript are pretty much the same thing, okay? So we're gonna use the latest one, 2018.

[00:04:59] This is just use everything that has been standardized by 2018. If I did something like 2015 here, something like that, which would actually be the same as 6, that would be saying like, anything that's newer than that in JavaScript, fail, right? Cuz you wanna target older browsers or something like that.

[00:05:18] But for our purposes, 2018 is great.
>> Brian Holt: Okay, sourceType, we're gonna be using modules, so that's why we're gonna do that. Modules are just the way that we're going to separate our files out. And then ecmaFeatures, we need it to understand JSX, which I will be showing here momentarily, so you put jsx: true.

>> Brian Holt: Okay, last thing here, we're gonna put an env. This is gonna let ESLint know what kind of environments you're gonna be writing code for, right? If I'm writing code just for the browser, I don't wanna be able to use Node features in the browser, and I want ESLint to catch that.

[00:06:11] However, towards the end of the class, we will be using Node, so we're gonna have both of those things pass Lint. So here we're just gonna say es6: true, this is all the new features of ES6, which is one of the more recent releases of JavaScript. Browser, so we wanna be able to use things like Window, right?

[00:06:31] So I wanna say true. And node, we wanna be able to use things like process.env and things like that, so that'll be true.
>> Brian Holt: This is just like, what kind of globals do you wanna have be available? That's what it amounts to.
>> Brian Holt: Make sense?
>> Brian Holt: Cool. So now we need to go install all of the tools to make sure that this actually works the way that we anticipate.

>> Brian Holt: So I want you to come over here and say npm install -D. You can also just do npm i if you're lazy like me. And we need to get eslint,
>> Brian Holt: eslint, I think, -config-prettier, and,
>> Brian Holt: Did I put that up here as well? Nope, I didn't.

>> Brian Holt: And this should go install all the things that we need.
>> Brian Holt: And you also need the plug-in.
>> Brian Holt: So one more thing, npm install -D eslint-plugin-prettier.
>> Brian Holt: And off the top of my head, I can't remember what the difference between a config and plugin in this case is.

[00:08:05] I just remember that you need both for Prettier.