This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Standard JS & Editor Config" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

Writing code in a consistent style is one way to avoid errors and create a more maintainable codebase. Brian introduces the StandardJS linting library to check his code during development. Brian also uses EditorConfig to help maintain these styles across different IDEs.

Get Unlimited Access Now

Transcript from the "Standard JS & Editor Config" Lesson

>> [MUSIC]

>> Brian Holt: So, as you see, I've already had like a dozen syntax errors through sort of this workshop. So it's really nice to have a tool that tells you hey you're screwing your crap up. Let's fix your crap. I'm a big fan of Yes Clinton in general but there's also JS hint.

[00:00:18] There's JS Lint JSCS, right? JavaScript style checker? Yeah, Check style, JavaScript Check Style. We're going to use one called Standard, which it aims to be the standard formatter for JavaScript with mild success. Because a lot people don't like the no semicolons rule. But it kind of aims to be like, does anyone write Go in here?

[00:00:48] It aims to be like Go format. The nice thing about the Go community is everything is exactly one style. They have a tool built in to Go that just makes everyone's code looks the same way. There's no discussion about it ever, which is really nice, because bike shedding's really annoying.

[00:01:04] I thought that's what Standard's trying to be. I think it's a fun experiment, again. But it's kind of up to you to later to see if you wanna use it. But, let's go ahead and try it. So, go over to your command line. And actually, I know it's going to have at least one error here right now.

[00:01:24] So you're going to do. Well first of all, let's just add a new branch real quick.
>> Brian Holt: Okay, so that the new branch's out there under fem-3. Okay, if you haven't already do npm install -g standard. That you get to the tool that we're looking for. In particular, what I like about standard is like it's not configurable like it's just one way and so, if you don't like it, then don't use standard right to the point of standard is that there's zero discussion about it like this is the way it is.

[00:02:20] And I find that appealing because if you've ever set up an ES Lint config file, it just feels like there's ten billion dials to slightly tweak a bunch of different ways and this just like removes that cognitive load from you.
>> Brian Holt: Okay, and then it's really easy to run, you just type standard.

[00:02:38] And it gives you a bunch of errors, holy crap. All right, React is not defined. Okay, we knew that one, and then the other one which I knew is gonna happen too is h2, remember we were using h2 for a little bit, and then we stopped using it?

[00:02:52] So, that's a problem as well.
>> Speaker 2: [COUGH]
>> Brian Holt: Bless you. Another bunch of these is like react is. So, it doesn't like globals that you don't tell it about, right. And basically, this is actually the most useful part of linting tool for JavaScript period the end is unused variables.

[00:03:10] Because a lot of people do things like ce equals this, right? And then we'll do, like, down here, we'll say, cf, right? Cuz we accidentally mistyped instead of ce, right? And, your linter will catch this for, hey, you were referring for something that you didn't create. You probably have a typo.

>> Brian Holt: All right, so, let's fix this, the h2 ones is really easy. Good, I didn't even make it an h2. Good job, Brian. Okay, so let's just delete that. That will solve one of our problems. And then, sometimes those, these globals are necessary, right. For example, it is necessary because we're referring to React.

[00:03:49] So basically what you do is you're gonna put a comment up here at the top. And you're just gonna say, global. And then just list all of your globals that you intend on having. So we have React and ReactDOM.
>> Brian Holt: And this is just a little bit of information for Standard to say, okay, you expect to have these globals available to you.

>> Brian Holt: Okay?
>> Speaker 3: And you have to have that comments syntax? It can't be the slash, slash?
>> Brian Holt: Slash, slash? Yeah. As far as I know.
>> Speaker 4: Yeah, I'm just gonna leave it.
>> Speaker 5: I like how it's like you don't have a new at the end of the file.

>> Brian Holt: Yep.
>> Speaker 5: Okay. All right standard. We'll put that new line in there.
>> Brian Holt: It insists and actually I don't talk about editor config in here, but I can actually, I'll show you, I'll talk about editor config in just like two seconds here. Okay, good? So let's run standard again.

[00:04:57] Yes! No errors, nailed it.
>> Speaker 5: And it doesn't even say great.
>> Brian Holt: No. It's pretty judgmental.
>> [LAUGH]
>> Brian Holt: You're an idiot and it's like, and then you do it again and nothing is wrong is like, whatever. You're sufficient. [LAUGH] Yeah it should tell you like, hi five good job or should use like emojis or something like that.

[00:05:20] Okay, so, did anyone else get the no new line error? It's kind of a pain in the butt. So, there's a tool called EditorConfig, with the lovely mouse is the the logo here. And basically EditorConfig is is it's just like this file that you put at the root directory of your project and then anyone that comes in your project automatically has their editor set up to be writing the same style as you.

[00:05:53] So, to give you an example, I have a file here already at your project and if you look at it, it's going to say indent size two, indent style spaces. Insert final newline so you totally sidestepped that problem altogether true. What charset you are using, all that stuff.

[00:06:15] So, if you want to use that, just come over here to EditorConfig and then you say download a plugin and they have it for just about everything which is really nice, right. So if you just download that, it's automatically gonna configure any time you're in that project. Doesn't affect your global like settings, it's just for whatever you're in that project.

[00:06:35] Again for Sublime, you just search for EditorConfig using Package control, and you'll find it, and download it, and it just works. And a bunch of open source projects include these editor config files. So, you don't even have to worry about it.
>> Speaker 5: Cool. Yeah, like room of the bottom space or the line and just hit save and it like add it.

>> Brian Holt: That's a red background.
>> Speaker 5: And it's cool.
>> Brian Holt: Super nice. See I go ahead and grab that if you don't already have it. Okay again, worth mentioning standardist is ESLint, it's just a preconfigured ESLint. So eventually, we're going to plug in at that because we also want to be able to lint our React and have like, react specifically linting rules.

[00:07:27] And that's mess to be able to do that.
>> Brian Holt: And if you want to see like all the rules that standard does on the web page, I have a link to it. You can also just look at the standard repo on GitHub and I'll tell you all about it.

[00:07:43] Okay, so I wanna say at this point if you are so offended by not using semicolons like one, why? But two, there's a package called semistandard.
>> Brian Holt: Which I thought was a super clever name by the way like doesn't anyone. So it's everything in standard except it enforces that you actually must use semicolons instead.

[00:08:08] So, feel free to use that to your own great shame.
>> Speaker 2: [LAUGH]
>> Brian Holt: Just kidding. That's a terrible thing to say. Okay, so any questions so far about Standard?
>> Brian Holt: [COUGH] Excuse me. Something else interesting that they're working on, or actually have worked on, is a something called standard format, which is also kind of an interesting tool, I don't use it cuz I've had mixed results with its abilities.

[00:08:41] But what it'll do, it'll actually try and fix your code on the fly too so like it says like you have an error here. And I think I know how to fix it so I'm gonna try and just fix it for you. I don't even give you an error I just fix it.

[00:08:55] And I get weird indentations on it sometimes. I'd generally like not to use it. But you're welcome to give it a try. Is not gonna meant to be like Go format as well. And what Go format does it just automatically formats your code the correct way.