Check out a free preview of the full Complete Intro to React v2 (feat. Router v4 and Redux) course:
The "Automated Linting" Lesson is part of the full, Complete Intro to React v2 (feat. Router v4 and Redux) course featured in this preview video. Here's what you'd learn in this lesson:

With standard properly configured, Brian adds linting to the watch command. Now linting errors will appear automatically whenever a source file is edited. Brian also configures the eslint-loader to exclude the node_modules directory since developers are typically responsible for testing dependencies.

Get Unlimited Access Now

Transcript from the "Automated Linting" Lesson

[00:00:00]
>> Biran Holt: What would be really cool, what happens if Webpack just automatically rsn our linter on files that change? And so instead of having to wait until I actually go to like do my git, what was I trying say? The hooks before I do a commit. It would be great if we could just see instantly in our console that something was going wrong, so let's go do that.

[00:00:26] So go to your loaders, inside of your webpack.config.js. As your first rule, we're gonna do enforce: 'pre'. And what this is saying, hey before you do any of the build process, I want you to run this loader. Now the reason why you want to do it before our build process is you don't wanna lint the output, you wanna lint the input.

[00:00:58] You don't care what the output looks like. As long as it runs, right? You don't care what bundle.js looks like, but you do care what your source files look like. So we're gonna do enforce 'pre'. The test is gonna look just like this one. You can actually just copy and paste it if you want to.

[00:01:15]
>> Biran Holt: Then you're gonna say, loader: and, sorry, eslint-loader. And you can do an include/exclude, but most importantly you just don't want to lint anything in node modules, right? Because you don't care what everyone else's style is, you only care about what yours is.
>> Biran Holt: And eslint loader is smart enough to read from your eslint.json so that's okay.

[00:01:49] Yeah, everything should be good here.
>> Biran Holt: So save that.
>> Biran Holt: Come back to here and do an npm run watch.
>> Biran Holt: Again, if you're already running watch, stop it and start it. So I have no errors right now, so it's going to build okay. But if I come in here to like client app and I just say like, const x = 5 right, I come back here, it's gonna say hey, you defined x but you never used it so why are you doing that?

[00:02:28] So these will just automatically pop up in your console as you're having errors, which I think is a better, to shorten that feedback loop is much better.
>> Biran Holt: And then again if I get rid of it, save it, come back. Everything's okay again. Questions?
>> Speaker 2: Can you just show the rules again?

[00:02:52]
>> Biran Holt: Yeah.
>> Biran Holt: Where is it? Right there. So this one right here.
>> Speaker 2: How much does the loader affect build time?
>> Biran Holt: That varies wildly by loader. Obviously Babble is going to be-
>> Speaker 2: The eslint-loader in particular.
>> Biran Holt: Minimally, I would imagine. I guess it depends on how many source files you're rebuilding at once.

[00:03:28] But Webpack watch is smart enough to incrementally rebuild. So you're only going to lint files that changed. Now if you're running the entire suite, like on all of your files? It might take a bit longer. Eslint's pretty damn fast though, so I would feel okay about including it into your build process.

[00:03:58]
>> Biran Holt: Any other questions?
>> Biran Holt: Okay.
>> Speaker 2: Their question about the enforce pre thing. They wanna know if that's the same as a pre-loader.
>> Biran Holt: So a pre-loader is the way of doing it with Webpack 1. And that went away and now this is the way they do pre-loaders in Webpack 2, but that is a synonymous concept.

[00:04:27]
>> Biran Holt: Good question.
>> Biran Holt: In fact, if you look at the old version of this workshop, you'll see that it is called a pre-loader. Cool, so-
>> Speaker 2: You need a change bar on that sucker right there.
>> Biran Holt: What's that?
>> Speaker 2: A change bar.
>> Biran Holt: Yeah. [LAUGH] Cool. So now we're going to do the dev server, Webpack dev server.

[00:04:51] This is gonna take it even one step further than what we're doing here with watch. That we're actually going to have a Webpack kind of act as our dev server for us. And so if you have a back-end service, like maybe you're talking to Python or Ruby, or something like that, this is a really good way to set up your app.

[00:05:08] If you're running a note server, then you probably don't, but that's okay too.