How to Use ESLint and Prettier Together in a React Project

[00:00 - 00:16] In this lesson, we will set up ESLint and Pritter. If you don't know what ESLint is, it's a tool that scans your code on common mistakes, bad practices that may cause bugs, or just checks whether your code follows some preferred style of writing your code.

[00:17 - 00:25] It has a lot of plugins to extend its default set of rules that it has out of the box. It's a default tool for JavaScript and TypeScript projects nowadays.

[00:26 - 00:36] Pritter in return. It's just a formatting tool that automatically formats your CSS, JavaScript, TypeScript, HTML, Markdown, and many other files for you.

[00:37 - 00:45] It follows some opinionated defaults while still slightly configurable. It can be used as standalone or integrated to ESLint via plugin.

[00:46 - 00:59] We will have it integrated into ESLint pipeline because it's just more convenient for daily use. So, in order to do that, we need to open our packages on and add all the plugins we need to make it happen.

[01:00 - 01:02] What plugins you may ask? Plagans for the ESLint.

[01:03 - 01:17] So, ESLint supports multiple plugins that extend its core functionality, which is super helpful and amazing. And what we're going to use, we're going to use the React App config, which is made of multiple plugins.

[01:18 - 01:32] It's based on, it goes with Create React App, and it's great because it's proven to catch only problems that may lead to bugs and ignoring everything else that's related to formatting. That is pretty useful if you're using Preyer.

[01:33 - 01:44] So, we need to start off with just adding them as dependencies to our package JSON. Okay, so let me explain what all these dependencies are doing.

[01:45 - 01:59] So, this TypeScript ESLint plugin and parser, they give ESLint ability to read and parse TypeScript files. So, also, these ESLint plugin adds a lot of rules into the ESLint.

[02:00 - 02:11] So, it's not only parses them, but also enables some specific to TypeScript rules. Babel ESLint is basically a little bit of extent of original ESLint parser.

[02:12 - 02:17] So, it enables ESLint to use Babel parser for that. What is Babel and everything about that?

[02:18 - 02:21] I will explain later. So, for now, I'm not going to dig into it.

[02:22 - 02:31] Then we have a ESLint config React App. It's the one config that I mentioned that is the part of Create React App tool, template, whatever, you name it.

[02:32 - 02:36] It's made of five of these plugins. So, one is FlowType.

[02:37 - 02:45] FlowType is the same thing as TypeScript, but it's less popular. It's made of, I think, Facebook is the creator of this one.

[02:46 - 02:52] But I mean, we have to install it because it's a dependency of this config. We're not going to use it anyway, but we have to add it.

[02:53 - 03:06] ESLint plugin import, basically, it's just to extend ESLint with a lot of rules that are related to import. So, you can do a lot of stuff with that.

[03:07 - 03:17] You can, of course, read about it in the documentation. Gen6 accessibility, if you don't know this, A11Y is accessibility, stands for accessibility.

[03:18 - 03:41] Again, it enables ESLint to scan your GSX files and see whether you have any accessibility issues there so you can fix them. ESLint plugin React will enable ESLint to see and read GSX files and a lot of React-related rules that you can switch on, switch off, whatever.

[03:42 - 03:46] Same for React hooks. That's pretty much it for this thing.

[03:47 - 04:07] What else we have to add and we want to add is the plugin printer and config printer. What config printer does is you extend one config you want and then you extend this one at the end and it will disable all the rules that are related to formatting and will replace them with one rules that are pre-rerelated.

[04:08 - 04:27] So all the useless formatting rules that ESLint have baked in will be disabled so we don't have to go through your config and change them one by one. Plug-in printer basically adds new rules that are based on what printer will actually output internally.

[04:28 - 04:38] And also it will enable us to run ESLint fix and run pre-re under the hood for the file that is getting processed. So it's pretty great as what I said.

[04:39 - 04:48] You can use it standalone or you can use it integrated with the ESLint pipeline and it's what we're going to do. And of course we need to install Peter and we're installing ESLint too.

[04:49 - 05:00] These apps, these come on line interface apps that we are going to use and this is just a setup for them. Next thing we should definitely run npm install.

[05:01 - 05:12] I already ran it so for me it will not install much of any things. Next step we will have to add ESLint or CJSON.

[05:13 - 05:24] So ESLint, R.C. JSON is basically a file where you describe your config for the project, ESLint config for the project.

[05:25 - 05:32] And another file we need to create is .prerere R.C. JSON, same thing.

[05:33 - 05:51] And the rules will be for our ESLint will be like that. So we extend React App, config, we extend preter config, we extend plugin of the preter and the only thing we set is one rule is preter and one.

[05:52 - 06:06] So everything unformatted will be yellow in our editor. So we will clearly see that our, you know, it requires some love from the pre ter so it can be formatted properly.

[06:07 - 06:15] And the setup for preter, I mean you can keep it as this. You can just ignore setting up anything for preter but I prefer this one.

[06:16 - 06:22] So print width will be a bit wider than usual. Usually it's something 80 and I think it's too narrow for the code.

[06:23 - 06:29] For the text it's perfect but for the code is not. Simicolons, I'm switching it off on.

[06:30 - 06:36] So it'll print semi-colons. Usually I don't have them but for the React Hangar original repository we have them on.

[06:37 - 06:45] Single code means we will use single code and a double code in JavaScript. And in JSON you should have double quotes.

[06:46 - 06:49] You cannot use the single quotes at all. And trailing comma.

[06:50 - 06:59] So we will have a trailing comma like that in a JavaScript in expressions. The next thing we should add is a couple of npm scripts to our package JSON file.

[07:00 - 07:06] So what we're going to do, we will go to the package JSON. And before the dependencies I prefer to have them here.

[07:07 - 07:11] We will add scripts, scripts, right? And okay, so we do that at the top.

[07:12 - 07:15] So let's use this one. I will just move it down a little bit.

[07:16 - 07:25] I'll remove task for now because we don't need one and I will paste in scripts. So what it does, we have a command that is lint and lint fix.

[07:26 - 07:31] So yes lint source directory only. We don't have this directory yet so we can just create it if you want to.

[07:32 - 07:51] You can ignore it and max warnings to zero. What it means that every warning will be acting as an error basically because I just don't feel it makes any sense to have ESL in warnings to be warnings and to keep them in your code base.

[07:52 - 08:04] I think your lint run should be absolutely clear without any warnings. If you have warning, you better ignore it and tell in the comment above the ignore why would you do that.

[08:05 - 08:11] And another comment will be just npm run lint and then we pass fix. So imagine it's run like that.

[08:12 - 08:20] So fix what it will do. It will basically format the code and will fix all the possible rules of ESLint that are fixable.

[08:21 - 08:29] If you go to ESLint page and see the rules, I think it's somewhere here. So rules, you'll see that few of them are fixable.

[08:30 - 08:43] As you can see the fix option of the common line automatically fixes problems. So if you scroll down, you see that no rejects spaces, there's a low multiple spaces and regular expressions is fixable automatically and few others here.

[08:44 - 08:52] So all the rules in pre year are fixable of course because pre-tier will run and fix them. And this is what we will have here.

[08:53 - 09:00] Another thing that is nice to add is cache. I think the latest version of ESLint 7th version, it's a new thing.

[09:01 - 09:15] So if you will run it with a cache, it will basically create a file in the route alongside the place where you ran it. And it will use this cache for the next run and this run will be way way way faster.

[09:16 - 09:22] Okay, we should run it right now. I'm not sure it will work properly because we don't have any code and it will complain about that, right?

[09:23 - 09:27] So no files matching the pattern source were found. So it's actually running.

[09:28 - 09:30] It's all good. But since we don't have any code, I think it's complaining.

[09:31 - 09:39] So we can create the index TS file index TS files just so it's kind of happier about that. And let's try to run it again.

[09:40 - 09:42] Okay, I did something wrong here. Okay.

[09:43 - 09:48] So let's run npm run let. And again, it's fails.

[09:49 - 09:55] And what's the reason about that? It's because it cleared an ESN JSON.

[09:56 - 09:59] And it cannot find a text script. Yes, because we forgot to install a test script.

[10:00 - 10:03] So here we go. Let's add type scripts here.

[10:04 - 10:13] And let's install it, of course, clear and clean up this console. Clear and npm install.

[10:14 - 10:22] Install TypeScript real quick, clear again. And now it will run just nicely.

[10:23 - 10:26] Install, lint, everything is great. So it ran.

[10:27 - 10:38] There's no issue. Of course, it says the warning that this TypeScript TS3 version only TypeScript version 310 is supported and my version is 405.

[10:39 - 10:43] So I have to update these dependencies in order to get rid of this warning. I think it's all good for now.

[10:44 - 10:52] Yeah, I will bump the versions. So the resulting code will be different at the end of the day.

[10:53 - 11:03] And you may just copy paste this one from the resources of this lesson. So as I said, I bumped the versions.

[11:04 - 11:15] So you can copy paste that or you can just type it in if you want to waste some time. So let's just run it and I will prove you that everything is fine and everything is green.

[11:16 - 11:19] As you can see, all great. Now which is at all, I'm running, no problem.

[11:20 - 11:27] It may probably tell you that it cannot detect react version in your dependencies. And it's absolutely fine.

[11:28 - 11:37] We're going to install the react dependencies later and this warning will disappear. But for now, it's all great and it's all working and we can go to the next lesson right now.

[11:38 - 11:57] […]