From the course: ESLint: Customizing Styles

Turning on checking for a rule

From the course: ESLint: Customizing Styles

Start my 1-month free trial

Turning on checking for a rule

- [Instructor] To specify a custom style for an ESlint rule, you add a key value pair in the rule section of your .eslintrc file. By default, an empty rules key is included in the .eslintrc file when you set it up with npx, using the Eslint--init option. The value of the rules key is an object. And within that object, I can add a key for each rule that I want to customize. So for instance, I want to enforce the brace-style rule. That means my key name will be brace-style. To understand the value I need to specify, a handy first stop is the documentation page for the style rule on ESlint.org. I want to use the one true brace-style and reading through the docs, that's the default when I turn the rule on. Whenever I'm happy with the defaults, I just have to specify a string as the value. That string indicates what I want to happen when my code violates this rule. ESlint has three settings for what happens. Off for nothing, warn for generating a warning that allows the build to continue or error that throws and error and an exit code. So in my rules section, I'm going to specify brace-style as a string then a colon and I want this to throw an error. I want to be stringent. So I'll specify error as my value and I'm going to use single quotes. Now over in the documentation, you notice that in addition to the strings, you can use a number instead. So 01 or 2 will give you those same results. But I like to use the strings just because it makes the code a little more self-documenting, makes it clear to anybody who reads my configuration what I intend to happen here. So I'm going to save this change. Now, I have the ESlint extension installed in my editor. In the source folder, I can open my index.js file. And right here in the editor, the extension shows me that I have a number of errors. It shows me that number right here and it shows me these red squiggles where it sees errors. And in particular, I have one error here around the braces. So if I select the file and hover over, I have brace-style as the rule that's being violated here. So right there in the editor, I have that information. Now if you don't have an extension installed in your editor, you can go to the command line and you can use npm run lint which is a script that I've configured for this project. And this gives me a readout of all the errors in this project. So there is a couple others but these last two right here are errors for curly braces specifically around the brace-style. So if you don't have that extension you can still do any of these checks at the command line. So if I go back to my .eslintrc file, maybe I want to flag these issues but let that build run anyway because those errors right now are going to throw an error and keep that built from happening. So I'll change the value for brace-style to warn. And I'll save that and then back in index.js, these two, these other errors that we'll get to in a minute are still in red as errors but down here now the underscores in yellow for the brace-style and that means that this would just throw a warning and my build would still succeed. Now I can go through and fix those brace issues so first off, the brace-style, you start with that opening brace on the first line of code and you don't put your "else" on a different line. So I'll fix those and now I've got that ironed out but I still have another issue. I saw this at the command line and I see it also in the pop-up in my editor here that I've got no unused vars. So I've declared the text variable and I'm never using it and same thing with the counter variable. Now I haven't created a key value pair for this issue in my eslintrc. All I've got is that one brace-style rule. But what I have done is set up the ESlint to use the recommended rules and settings as a baseline for this project and that comes from the extends key and ESlint recommended as the value. In the documentation for the ESlint rule on ESlint.org, the rules of a check marks next to them are turned on by default when I use the recommended rules. And just searching the page on no-unused variables, there we go, it's right here. It's got a check mark. So that's why this issue is getting flagged in my code even though I haven't written a rule for it because I'm using those recommended values. But I can also use my rules key down here to turn off a rule that's part of whatever style I'm using as a baseline like the ESlint recommended rules. For now I'm okay with unused variables in my code during development. So in .eslintrc, I'm going to add another key value pair here and that's going to be no-unused-vars. And I'm going to use the value of off. And I'll save that and now back in my index.js, I don't have any issues at all because my .Eslintrc rules override that baseline from the style guide. So now I have an ESlint rule set up to turn on checking for a rule and another to turn off checking for a rule.

Contents