SummerAcademy on Debugging — 2.1.5 Linters

See the companion YouTube video here — We show some examples of what Linters can do and how we would do some code.

Let’s get closer to our code. It is always a good practice to have a linter running. Linters are language-specific and in the case of JavaScript, you also have to think about the version and possible compilers such as Babel you are using. Most JavaScript IDEs bring ESLint with them which means, we should have a deeper look at it.

Another very interesting aspect of Linters as Static Code Analysis tool is, that you can easily run a linter with a modern ruleset over legacy code. It helps to find depreciated constructs or APIs.

2.1.5.1 ESLint as example

ESLint is based on a collection of rules (have a look here) that are applied to your code and check for typical coding mishaps or errors. ESLint can do a lot but it is not unfailable. For example, JavaScript is weakly typed (hence, TypeScript offers the option to declare expected types enabling your infrastructure to point out wrong types).

ESLint is a quite versatile tool. Have a look into the awesome-eslint resource below to see a pretty comprehensive list of plugins available.

1. Make use of a style guide (seems AirBnB currently the most used but there are others). Tools such as Prettier can help you in formatting.
2. Be careful when dismissing warnings or using the comment switch to disable them. If you do so, always add a reason to the comment so the next developer understands.
3. Most IDEs run Linters in the background. Sometimes, this leads to a sluggish typing experience. You can configure things so the Linter is only called when saving the files.
4. There are rules available for specific frameworks such as React or Vue. Check them out if you use those frameworks (Vue or React).
5. no-debugger rule in ESLint helps to track calls to debugger() in the codebase.
6. Have a look at awesome-eslint to see a pretty awesome list of extensions and configurations.

Key Take-Aways

First, use eslint as part of your IDE. Secondly, make the most of it by using extensions (see Resources below).

Resources

awesome-eslint

optimal eslint environment

AirBnB Style Guide

AirBnB Style Guide in eslint