Complete Intro to React, v2 (feat. Router v4 and Redux) Using Standard

Transcript from the "Using Standard" Lesson

[00:00:00]
>> Brian Holt: We're gonna start working on some tooling stuff now, because tooling's fun. So the first one I'm gonna do is here in the terminal, I'm just gonna use npm to do my global installs. I think there's yarn add global, I just have historically have had problems with it so far but npm works just fine.

[00:00:19] So I'm gonna do npm install --global standard. And that's going to install our linting tool for us. I already have it, so I'm not gonna do it. So let's talk about what standard is, and why everyone gets so mad at me for using it, and why I just love it.

[00:00:44] So, for those of you that may have written in Go before, or have looked at Go, there's just a phenomenal tool called Go Format. And it's one of my favorite parts about the Go community, not that I write a ton of Go. But, when you go into a Go Project, there's just zero discussion about code style or linting rules or anything like that because there is just one set of rules called.

[00:01:10] And it's Go Format and everyone writes those rules and it's just universal accepted, everyone writes Go Format.
>> Brian Holt: A lot of us from other communities like JavaScript, where we just bike shed the hell out of every stupid little linting rule. Kind of look on it jealousy as like, these people have nothing to bike shed about because there is always the same set of rules.

[00:01:31] So, a really really smart guy, his GitHub handle is Ferris, and I forgot what his real name is.
>> Brian Holt: He's like, I want this for us. So he created this library called Standard. Which, in reality, is just ES Lint with a standard set of rules. But the cool thing about Standard is it's not configurable.

[00:01:52] There's zero configuration, so there's just never ending argument. If there's Standard on a project, you can't bike shed about it, because you can't configure it, right. It's just always the same set of rules. So people were actually super on board with this when he kind of announced it, this is the same guy that wrote WebTorrent, and some other really big libraries.

[00:02:12] So he's a super smart guy, but it actually prohibits you from using semicolons.
>> Brian Holt: Which really rubs a lot of people the wrong way because people in JavaScript just love their semicolons. But he outlawed them using Standard. And so I think that's probably a big reason why it hasn't been as adopted.

[00:02:33] But I like it, a bunch of projects still do use it. It's okay, you do not have to use semicolons. If you insist on using semicolons, there is a project called semistandard. [LAUGH] Which is the same set of rules, except it enforces that you must have semicolons. So, if I run standard right now on my particular project, it's already pre-configured to just find a bunch of,

[00:03:01]
>> Brian Holt: A bunch of same defaults. Like it won't check your node modules directory, right, cuz you don't wanna link to other people's code. That doesn't make any sense. It'll automatically ignore bundles, and builds, and a bunch of stuff like that just out of the box, which is pretty cool.

[00:03:16] Okay, so if I run Standard again.
>> Brian Holt: I have a bunch of things and it's mostly saying that React is not defined, right? That makes sense because we're pulling in React globally cuz we're including a global build, right? So it's not going to be defined. So we have to somehow inform Standard, in reality, ES Lint, that that's okay, we expect that to happen.

[00:03:42] So what we're gonna do is we're gonna come over to clientapp.js and we're gonna just put a little bit of pragma at the top that says what is it? I've gotta remember, global React and reactDOM.
>> Brian Holt: So, it's just that first line up there at the top. This is just letting ESLint know, hey, these are global variables I expect them to be quote unquote undefined.

[00:04:23]
>> Brian Holt: So now if I come back over here and I run Standard.
>> Brian Holt: It's going to say, hey, you need a new line at the end of your page, right? Which is a pretty common thing. So I just go down here to the bottom. And actually, I'll even show you this.

[00:04:45] So it's saying, hey, you need a new line at the end of your file. Standard can actually automatically fix a bunch of these linting errors. So if I run standard --fix.
>> Brian Holt: Now if I go over here now there is a new line, it automatically put it there by itself, and now if I run standard again, no linting errors.

[00:05:13] Which is pretty cool. Standard cannot fix all of your errors obviously there are some that it would not know how to fix. But some of these things like you must have a new line at the end of the file, it knows how to fix those, you can just run fix and it works.

[00:05:26] Pretty cool right?
>> Speaker 2: Do you recommend standard fix?
>> Brian Holt: I think now it used to give me kind of derpy indentations.
>> Brian Holt: I haven't seen that for awhile, so sure. Give it a shot and if it blows up everything, it's not my fault.
>> Brian Holt: Like I said, a lot of stuff It just doesn't know how to fix, right?

[00:06:01]
>> Brian Holt: But yeah, like I said, standard is just wrapped ESLint, so underneath the hood it's using ESLint with a preset of configurations.
>> Brian Holt: So yeah, the real hero here is ESLint. Great project. Okay, so any questions before I move on?
>> Speaker 2: There's a question from Enli how does Pragma work is it different from use strict?

[00:06:31]
>> Brian Holt: Yes.
>> Brian Holt: When I say pragma, I really just mean a comment at the top. That's a really stupid term for that. So,
>> Brian Holt: What I mean is that there's just a special comment at the top of the page that lets ESLint know, ignore these particular errors. And there's a bunch of different ones that you can use, and they're all in the ESS documentation if you want to look them up.

[00:06:57]
>> Brian Holt: The one I end up using more than anything, though, is just the global ones if I have any globals.