Exercise: Linting the Library

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Kent C Dodds: So let's go ahead and let's add Linting. So we're going to install these dependencies. You don't have to run this command, these are actually already installed for you. But then we're gonna configure eslint and the linting script. So the linting script is actually the easiest part of this, so we'll just go ahead and do that first.

[00:00:28]
In your scripts object, we're gonna use npm scripts for pretty much everything in this project. We're not using Grunt or Gulp, we don't really need those things here. So we'll say lint and we'll say eslint. So dot is like, hey eslint, link everything inside this directory. By default, it will skip Node modules so you don't need to worry about that.

[00:00:51]
>> Student: A question is, does that mean ES6 is discouraged to use with Node?
>> Kent C Dodds: So ES6 is totally encouraged to use with Node, you just have to know where your code is going to be consumed. So if you're shipping your code to Node version 0.12, for example, then you don't want to be shipping ES6 code.

[00:01:13]
But that's why we're gonna add transpilation so that we can use not only ES6 but also ES2016 and all the Stage 2, Stage 0. If you're using Stage 0 features, good luck. But we can use Stage 2 features pretty safely. We'll only be using ES2015, I think, the precept for that.

[00:01:35]
But yeah, so if you wanna use those features and also ship it to older environments like older Node or older browsers than yeah your gonna want to transpile before you send that to be consumed. Yeah, we'll definitely be talking about that. Okay, great. So yeah, if you go ahead and run that lint command, npm run lint, your probably gonna get like an error.

[00:01:59]
If you don't get an error, I'd be sort of surprised. But the error you should see is there are no configuration files that you have. And so, it encourages you to run this eslint --init command. And you can do that and play around with that a little bit.

[00:02:18]
And it's actually really cool because it'll look at the current code in your project and create a config for you based off of what it determines is your style. Which is pretty cool, and it adds some recommended rules as well that will prevent actual errors and things. So that's something to look into, but we're just going to use my personal config to keep us all on the same page here.

[00:02:50]
So to do that, there are a couple ways you can configure eslint. We're going to use the eslint rc method. So in your root directory create an .eslintrc file, and that will pop up right there. And this is a regular rc file that, it almost looks a little bit like JSON.

[00:03:12]
I'm pretty sure that they use JSON 5 to parse it, so look into that, it's kind of interesting. It allows commenting on which I like. But yes, so we're going to say, the environment that we care about. Oops, actually some of these is kind of boilerplate that you probably don't care about.

[00:03:32]
Yeah, pretty much all these is boilerplate, so we're gonna skip over this. You can look at the diff, but just go ahead and check out the next branch, and I'll explain to you what this is doing.
>> Kent C Dodds: Something happened.
>> Kent C Dodds: Did not match any known files, uh-oh. Shoot, this should not be add-linting, it should just be linting.

[00:04:00]
Sorry.
>> Kent C Dodds: So, yeah, it is just linting, not add-linting.
>> Kent C Dodds: Cool, so,
>> Kent C Dodds: Anybody have questions before I talk about the eslintrc file? Hopefully, I don't know if I really explain why this is so useful, very well. So before I explain the file itself, I will step back for a second talk about just why you would want to have linting or what even linting is in a project.

[00:04:46]
So since I have it opened up here, I'm gonna go ahead here and make a mistake. So lets say that I forget to have a comma right there. So if you have a nice editor, then the editor will probably catch it for you. But if you're using something like VIM or even ATOM here, it's not going to give me any kind of warning at all.

[00:05:10]
What I get is coming from eslint and I have a linting plugin for ATOM that uses my eslint config and will report errors to me. And so, what I'm getting in the UI is just coming from eslint. So if I run npm run lint, then I'm going to get this error.

[00:05:31]
And where normally, I would see this error at run time when the browser tries to parse my code or when the Node tries to parse my code. And so, it catches those kinds of syntax errors, which is really nice. But even cooler, kinda the next level up, this will all look fine, and actually, in script mode, this will throw an error, but at runtime.

[00:05:57]
So the nice thing about linting is you get this as a static code analysis, so you don't actually have to run the code to benefit from it. And so here, we're running lint command again and we're seeing this is not defined. And then you can kind of get even more crazy with things.

[00:06:19]
We actually don't have the right part of my config installed here, well, we'll add this a little bit later, not sure I didn't add it before. But it's import/, hold on, let me just go and find it really quick.
>> Kent C Dodds: Yeah, it's import/ possible-errors.
>> Kent C Dodds: So now, okay, I'll just take that out and,

[00:06:56]
>> Kent C Dodds: Best-practices. Looks like it's not going to help me, there we go. Okay, yeah, so this one's really cool. So with certain plug ins that you can add to eslint like the import plug in. Now what I'm getting is an error that says hey, it looks like you're requiring something that isn't in your Node modules.

[00:07:21]
So either you've misspelled it or you need to save this to your dependencies in your project. So yeah, that's pretty handy dandy, that's saved me from a ton of things. I'm not sure why it's not warning against JSON. I'm pretty sure it's because it doesn't actually parse JSON stuff yet.

[00:07:45]
That's something upcoming. So anyway, that's the value of linting.
>> Student2: And just a question about-
>> Kent C Dodds: Yeah?
>> Student2: So when you switched branches ATOM then detected that there was some lint configuration, and it enabled this IDE Lint indications.
>> Kent C Dodds: Yeah, exactly, so lots of editors will add or have integration with ESLint or JSLint.

[00:08:16]
And so, for me, that is just a combination of two packages. Linter, which drives linting for lots of different languages and different types of linters. And linter ESLint and that's the one that's adding the UI stuff and the underlines and all that stuff. If you're using WebStorm, WebStorm comes prefiged with ESLint's capabilities, you just have to set it up in your settings.

[00:08:43]
VIM has plugins for ESLint that are fun to set up, enjoy that. I definitely recommend whatever editor you're using try to set up linting capabilities with it. Yeah?
>> Student2: What kind ESLint rules, rule styles do you recommend AirBnb or Facebook?
>> Kent C Dodds: Good question. So as far as linting goes, linting is a little bit on the controversial side because there's stylistic rules, and quite of few of them and everybody has their own style.

[00:09:23]
Some people, when you create a function, this is how I like to create functions but other people don't like to have a space there or don't make it have a space there. None of these things actually matter, like goodness gracious, I can write my stuff like that if I wanted to, like who cares, right?

[00:09:42]
But for me, I actually do care that the project is consistent, whatever it's doing. Yeah, so I have my own style of what I like to do, so all my projects use that. And in fact in my projects, the way that I configure eslint is pretty much just this.

[00:10:03]
Because I have my style that I like, and I just use that style. The reason that I did it a little bit complicated like this was so that you all don't have to kill these semicolons because I know some of you really like your semicolons. But, yeah, for me I don't like my semicolons and I like dangling commas and stuff but none of those things actually matter.

[00:10:28]
So yeah, to get back to the original question about Airbnb versus Facebook, or versus XYZ other config, there are tons of configs out there. Find one that you like and just use it. Whatever you use, try to be consistent across individual projects. And, yeah, as long as it's warning you against potential actual errors like this one, then you're good.

[00:10:56]
For me, I kind of like my own style, so that's why I spent hours and hours creating my own linting rules. Yeah, question.
>> Student3: Where are the paths referring to when you do the extends ESLint?
>> Kent C Dodds: Good question, so if I wanted to have it be the full thing, the name of the config or the dependency of the Node module is eslint-config-kentcdodds.

[00:11:23]
So that's what it's published on npm as, but eslint knows that we don't like typing the same thing over and over again I guess. And so, if it cannot find what you specified, then it's going to check. Okay well, maybe that is an ESLint config Node module, so it'll look for both.

[00:11:45]
If you have a local config here somewhere, let's say you've just had a couple eslint-configs and you were composing them together. Then you can just do like other/linter.js or whatever, you can do relative pass as well. So it's almost resolved, just like you would resolve a normal Node module.

[00:12:06]
If you look, actually, we'll just pop this open and eslint-config-kentcdodds. So here you'll see there's a best-practices.js file. So eslint-config-kentcdodds, there's the kentcdodds, and then best-practices right there. Possible-errors, and possible-errors. And then, I also have react, and stylistic, and webpack, jsx, bunch of stuff in here. So if you ever wanted to venture to try to make your own eslint-config, you could take a look at how I set mine up.

[00:12:43]
And yeah, it's good, it's just a Node module. Awesome, other questions?
>> Kent C Dodds: Okay, sweet. So yeah, so that's pretty much it. Everything for the ESLint stuff. ESLint is great. If you add Lint into your project, then you should still do testing, but you don't need to worry about testing quite as much when you Linting in place or code coverage necessarily.