00:00:00 Let's set up linting so we can ensure to have a clean code base throughout the entire project.
00:00:06 As with source control, you want to set up linting early on and not later.
00:00:11 ESLint is one of the most popular linters out there.
00:00:15 The one that statically analyzes your code to quickly find problems.
00:00:19 It is also built into most of the text editors so you can run it as part of your continuous integration pipeline.
00:00:26 Basically, what it does is you hover over something and it quickly finds problems for you.
00:00:30 If you check out your file explorer, you'll see that there's already an eslint.config.mgs file right here, and it already extends some core configurations,
00:00:41 such as the Next.js Core Web Vitals and Next Tabscript.
00:00:45 Leave these two in, as they'll warn you about writing code that affects the core web vitals, as well as your general consistency and type safety.
00:00:53 But these are just the defaults, so I'll show you how you can add another ESLint configuration for consistent code styling,
00:01:01 as the default next configuration doesn't do much to help you improve the quality of your codebase.
00:01:06 So let's install the standard configuration.
00:01:09 So we'll add this JavaScript standard style that applies consistent indentation for all of your files, uses one type of quotes,
00:01:18 in this case, single quote, so that your entire code is consistent.
00:01:22 It warns you if you initialize some variables, but they're unused.
00:01:26 It adds a space after every keyword.
00:01:28 It adds space before function declarations.
00:01:31 It makes you always use strict equality instead of double equals to make sure that the code is super safe.
00:01:38 And it does so much more stuff that when combined, significantly improves the quality of your code base.
00:01:46 Understanding these rules not only makes your code base cleaner, but also makes you a better developer.
00:01:51 So to install it, open up your terminal.
00:01:54 I'll actually open up a new one so we can run additional commands right here.
00:01:58 And I'll type npm install.
00:02:01 eslint-config-standard.
00:02:05 Don't worry if you see a big fat error message right here.
00:02:09 This is actually expected.
00:02:10 That's because eslint has been upgraded to a newer version, but some packages that are required to run Next.js are still using old versions of eslint.
00:02:20 And Next.js is using the latest, so there's a mismatch.
00:02:23 So let's just do what it says.
00:02:25 You can retry the same command by adding the legacy peer depths command at the end.
00:02:29 So just type npm install eslinconfig standard and add dash dash legacy dash peer dash depths at the end of it.
00:02:37 And that's it.
00:02:37 It got installed within seconds.
00:02:39 So now that we have installed this additional ESLint standard, head over to eslinconfig.mjs and add it right here at the end where we extend different
00:02:49 types of configurations by just calling it standard.
00:02:52 Now that we've added ESLint to our configuration, let's actually run it by opening our terminal and running npm run lint.
00:03:01 When you do that, you'll see that we get another error saying that the plugin N is required for the standard configuration.
00:03:08 So what we have to do is install it.
00:03:11 So just say npm install eslint plugin.
00:03:17 and also add the ESLint plugin promise, which are needed for the standard configuration.
00:03:24 You can also add the dash dash legacy dash peer dash depths and press enter.
00:03:31 Once these two additional packages get installed, you can rerun the npm run lint command.
00:03:37 And now you'll see a bunch of errors.
00:03:39 Just what we needed, right?
00:03:40 But yeah, technically it is, right?
00:03:42 That's exactly what we're using the linter for.
00:03:45 For example, the standard code style wants us to use single quotes rather than double quotes for strings.
00:03:51 Now, you might be asking why, and you might be questioning every single one of these rules.
00:03:55 I'll give you a short answer and a quick tip.
00:03:59 And that is, don't.
00:04:00 Don't question it.
00:04:02 I used it to the same thing when I was starting to learn to code, but then I learned that these rules are there for a reason.
00:04:09 And it could take you about a year or two years to fully see that reason, but once you see it, you'll see, oh, now I understand why it's there.
00:04:17 So sure, you can question it from the start and find out the reason why it's there, or just trust it and immediately improve your code base.
00:04:24 Now, we'll focus on fixing these errors later on.
00:04:27 As a matter of fact, I'll show you how your IDE or text editor can fix them automatically on its own, so you don't have to go ahead and change every single line.
00:04:36 But before we do that, let's further improve our ESLing configuration to truly make our code bases production-ready.
00:04:44 We'll add a Tailwind CSS ESLing configuration.
00:04:48 It'll allow us to have our class names organized logically in Tailwind CSS, making our code easier to read and review.
00:04:56 So let's actually install it by running mpm install eslint plugin Tailwind CSS.
00:05:06 And just to be safe, I'll add that legacy peer depths at the end and press enter.
00:05:12 It'll quickly get installed, so I can simply add it at the end of this extents part.
00:05:17 Now that we have multiple configurations, I'll actually spread it in multiple lines.
00:05:23 And at the end, I'll add a plugin, Tailwind, CSS, Recommended.
00:05:29 Now, alongside our linter called ESLint, there's also Prettier.
00:05:34 And devs often confuse those two.
00:05:36 See, ESLint is a linter, but Prettier is an opinionated code formatter.
00:05:42 And it actually works in tandem with ESLint.
00:05:45 Each one serves its purpose.
00:05:47 Prettier will auto format your code and save.
00:05:50 No need to discuss style and code reviews, and it saves you time and energy.
00:05:54 So, let's set it up.
00:05:56 And not only do we have to set it up, but we have to make it work seamlessly with ESLint, because the two often run into conflicts.
00:06:04 So, let's first install the ESLint config prettier, "-legacy-peer-deps".
00:06:11 Head back over into your config and add it at the end.
00:06:15 just Prettier.
00:06:17 This package will remove all ESLint rules that could conflict with Prettier ones.
00:06:22 Now we have to install Prettier by running npm install prettier, legacy peer depths.
00:06:28 And now that everything is set up command line wise, it's time to integrate ESLint and Prettier with your text editor.
00:06:35 In this case, I'll be using VS Code.
00:06:38 In this case, I'll be using VS Code, so I'll show you how to set up the configuration for it.
00:06:42 But if you're using an IDE like WebStorm, that's also totally okay, but you might need to set it up in a bit of a different way.
00:06:49 So you can search for a tutorial that shows you how to do ESLint and Prettier within Next.js applications within WebStorm.
00:06:56 For VS Code, you can press Command-Shift-B or Control-Shift-B on Windows and search for Open Settings JSON.
00:07:05 You can go for Workspace Settings, for example.
00:07:07 Here you have an empty object which will automatically be added to your file explorer if you decide to unhide it like I did.
00:07:15 But you can always get to it by simply saying open workspace settings and you'll open it right here.
00:07:21 Another way to create it is just to manually create a new folder called .vscode but you can see in this case it already exists in this location.
00:07:30 And then below this lesson I'll give you the configuration that you can copy and paste right here.
00:07:35 This is a configuration that I have built over the years working on large Next.js projects, and I grew to love it.
00:07:43 It has some default information for ESLint and Prettier to work well together.
00:07:48 It auto-formats on save.
00:07:49 This is very important.
00:07:51 And it fixes everything that it can on save.
00:07:54 We have a specific tab width, semicolons, single quotes, and so on.
00:07:59 Just some rules that make it all work well.
00:08:02 So copy and paste it right here.
00:08:04 This will set up ESLint and Prettier to work well within VS Code.
00:08:09 Now, every time you hit save, both Prettier and ESLint will run.
00:08:13 But to test it in action, there's one final thing we have to do.
00:08:17 And that is to install ESLint and Prettier from the Extensions Marketplace.
00:08:23 Search for ESLint and install it.
00:08:27 Also install the Prettier ESLint as well as Prettier itself.
00:08:34 This one right here.
00:08:36 So you need those three packages.
00:08:38 Once they are installed, you'll have to restart your Visual Studio Code.
00:08:42 You can do that using the command line by pressing Command-Shift-P and then saying, reload window, or just close and then open it again.
00:08:50 You should see that both of them are now working.
00:08:52 Now, to test it all in action, let's go to a file that previously had many errors.
00:08:56 For example, the layout.dsx.
00:08:58 You'll notice that now every single line ending has a semicolon.
00:09:03 Every single string is wrapped in double-quoted strings.
00:09:06 You have no additional spacings or enters.
00:09:09 You don't have any extra spacing that you don't need.
00:09:12 Everything is nicely structured.
00:09:14 And if you try to mess with some parts of the config, like removing the last comma, you'll see that it'll get added automatically.
00:09:21 Same thing for the semicolons and more.
00:09:23 We can also check out the page.
00:09:26 And see, if you save the file, it'll automatically restructure it, because Prettier doesn't like to have super long lines,
00:09:33 so actually it spaces it out in multiple lines.
00:09:36 If you head back over to Layout, you'll see that we have different types of imports.
00:09:40 And later on within our applications, we'll have dozens of imports on every single file.
00:09:45 So if you have the local import at first, then you have another one, they can be messed up, they can be separated.
00:09:52 This also decreases the legibility of the code base.
00:09:55 You always want to have your imports nicely structured.
00:09:59 So to do that, there's another package that helps us with imports.
00:10:02 So head over to your terminal and run mpmi eslint plugin import dash dash save dash dev and dash dash legacy dash beer dash depths.
00:10:15 This will save it as a dev dependency and then head back over to your ESLint config.mjs and then at the bottom, we'll have to provide additional rules
00:10:24 on how to set up our import order.
00:10:26 This one is a bit longer, so instead of typing it out by hand, simply go ahead and copy the .mjs file from below this lesson.
00:10:34 And then override everything you have right here with that new configuration.
00:10:38 You'll see that we're still keeping the same things right here that we had before, but also we're adding some rules for the import order.
00:10:46 Now, if you head back to one of the files and run npm run lint and press enter, you'll see that Tailwind CSS doesn't quite work with ESLint.
00:10:56 at least it doesn't automatically reorder the class names.
00:11:00 This is because the ESLint Tailwind CSS plugin doesn't support the latest version of Tailwind CSS yet, the one that we'll be using.
00:11:08 So for the time being, you can just comment this config out, and then later on, as they implement it, you'll be able to uncomment it,
00:11:16 and it'll work.
00:11:17 but for now let me just rerun npm run lint and you can see that now since we have prettier installed the number of errors automatically decreased and we
00:11:27 only get the ones that we have to manually change such as it's saying that we should use camel case instead of underscores and it's also saying that the
00:11:35 next import should occur before the import of next google and this is the import order plugin doing its thing So if you try to mess with the imports a bit,
00:11:43 such as separating them or doing some weird stuff, it'll say, please don't do that, keep them as they should be.
00:11:49 So if we do it like this, we're good.
00:11:51 And now when it comes to this font name, that's its actual name.
00:11:55 So there's not much we can do about it, besides maybe renaming it to use camel case.
00:12:00 In that case, we should be good right here as well.
00:12:04 Perfect.
00:12:05 And now our application is error free.
00:12:07 And in the future, ESLint and Prettier will work well together to fix out all of the empty spaces, all the inconsistencies,
00:12:14 maybe some weird indentation.
00:12:17 Whatever you do, it'll auto fix it in one click.
00:12:20 So let me go ahead and commit this by saying implement ESLint and Prettier.
00:12:25 And keep in mind that if anything changes with these configurations, I'll always keep this lesson updated.
00:12:31 So below this lesson, there might be some new configurations that work out with the latest versions of all of these tools that we're using.
00:12:37 Perfect.
00:12:38 Great job.
00:12:39 And I just want to let you know that if something didn't work for you, don't worry about it.
00:12:43 Setting up linters and formatters can be a real pain in the ass.
00:12:47 So we can always tweak it a bit on the go.
