4 ESLint Rules to Catch Logic and Syntax Errors
Linters are used for two primary purposes; one is enforcing coding style within projects. The other is to protect applications, and developers, from logic and syntax errors in code. Here are several ESLint rules you can use to help with logic and syntax errors in JavaScript code.
Prerequisite/Assumptions
In order to use a linter in your JavaScript project, you should have the node installed on your local machine.
You will also need the npm eslint package installed, either globally on your machine or in your project’s node modules. To install eslint globally, run, npm install -g eslint. To install in the project you are working on, run npm install --save-dev eslint.
You’ll also want an eslint plugin installed on your IDE. For Visual Studio Code, ESLint is the most popular plugin for integrating the linter into your IDE.
Depending on the project, linter rules are stored in an .eslintrc (rc being short for run commands) file. The file can be in multiple format types, but at the end of this article, we will show you an .eslintrc bare bones files with just the four rules, in JSON format.
1. no-cond-assign
The no-cond-assign rule is used to catch a logic error that you could be staring at for a few minutes and not see the issue in the code. This rule does not allow an if conditional from containing variable assignments; so no developer can make the mistake of forgetting to add the second equal sign in a conditional to make it a comparison.
While JavaScript allows for conditional assignments, the conditional is always evaluated as true, which makes both the assignment and conditional opaque in the code. Worse, it can lead to accidentally changing the value of a variables if it was not meant to be an assignment at all. The example below shows the linter rule implemented, and how in VSCode the error is displayed.
2. for-direction
The for-direction rule is used to catch for loop logic that will eventually get aired out when debugging, but might save you some time in wondering why your loop won’t exit.
This rule will throw an error when a for loop has a stop condition that can never be reached. The example below, the loop index starts at zero, executes while the index is greater than negative ten, and is incremented by one on each iteration. This makes the stop condition when the index is less than or equal to negative ten. With the index being incremented by one and starting greater than negative ten, the stop condition will never be met.
3. no-dupe-else-if
The no-dupe-else-if rule is used to catch if/else statements where conditional logic is repeated within an if/else chain. This comes in handy in larger if/else if statements, as well as when refactoring occurs. This can catch duplicate conditions from changes in requirements, or simple spelling errors; i.e., the second else/if below should have be negative one and you simply forgot to add the negative sign.
Below you can see in the “Problems” tab in VS Code, that the second else if statement is flagged with a description about the duplicate condition.
4. no-duplicate-case
The no-duplicate-case rule is used to catch duplicate case in switch cases. In the example below, the duplicate case is relatively obvious, since the statement is only a few cases and the duplicate cases are close to the same lines. When cases grow to be larger, they can begin to have no distinctive order, duplicate cases can end up fifty lines apart and not easily identifiable.
The above example is flagged, just like the other logic errors, with the description of the issue in the “Problems” tab in the VS Code window.
Final Configuration
As mentioned at the beginning of the article, here is what a bare bones configuration file looks like if you want only these four rules in your linter.
Conclusion
A linter can be a useful tool to catch logic and syntax errors before they start causing larger bugs in your application. As you learn more rules and configuration to use with ESLint, your JavaScript applications can become more maintainable. For more information on ESLint, they have a well documented website with different rules you can apply to your application.
Hopefully this article was able to perk your interest in ESLint, and you’ll start utilizing it more in you JavaScript projects. Happy coding!
