Introducing linting to a badly maintained legacy project can be a traumatic experience but the stress can be drastically reduced by careful use of ESLint and eslint-annotated-reset.
In the image above, taken from a real-life project that shall remain nameless to protect the guilty, we can see an all-too-common result of simply applying ESLint with the default settings; legacy code that generates hundreds, sometimes even thousands, of errors per file.
It was for exactly this situation that I created eslint-annotated-reset. This is simply an ESLint configuration file – .eslintrc – that you download from GitHub and drop into the root folder of your project. The next time you lint your code you’ll notice a drastic change; zero errors or warnings. The reason for this is simple, all of the linting rules have been turned off!
the easiest way to eat an elephant is one bite at a time
Why would you run ESLint will all of the rules turned off? eslint-annotated-reset is based on the principle that “the easiest way to eat an elephant is one bite at a time”. You may not have time to resolve 600 errors today but you might be able to resolve 6 or maybe even 60. After turning off all of the rules by dropping the .eslintrc file from eslint-annotated-reset into your project you can then selectively and methodically turn the rules back on, one at a time.
To turn a rule on, simply:
- edit the .eslintrc
- locate the rule you want to implement
- change the setting from 0 (off) to 1 (throw a warning) or 2 (throw an error)
Let’s say we want to fix some of those 627 problems we saw earlier. Let’s start by making sure that all equality tests use “===” or “!==” rather than “==” and “!=”. That’s considered a best practice and can help prevent pernicious bugs.
After opening .eslintrc we locate the rule, in this case called “eqeqeq” (you can find these names in the console output from ESLint). There it is on line 63. We can confirm from the description that it’s the rule we want (that inline description is where the “annotated” in the name comes from).
"default-case": 0, // require default case in switch statements "dot-notation": 0, // encourages use of dot notation whenever possible *** "eqeqeq": 0, // require the use of === and !== *** "guard-for-in": 0, // make sure for-in loops have an if statement "no-alert": 0, // disallow the use of alert, confirm, and prompt
A simple change to turn the rule on:
"default-case": 0, // require default case in switch statements</pre> "dot-notation": 0, // encourages use of dot notation whenever possible *** "eqeqeq": 2, // require the use of === and !== *** "guard-for-in": 0, // make sure for-in loops have an if statement "no-alert": 0, // disallow the use of alert, confirm, and prompt
and we can rerun ESLint:
The eqeqeq rule is now the only one turned on and we have a much more manageable 26 errors. We can make and commit those changes and take a further bite of our elephant another day.
When you’re updating .eslintrc bear in mind that some rules take optional parameters in addition to the 0, 1 or 2. In eslint-annotated-reset these are indicated by three asterisks at the end of the description. You can find more details of the allowed options on the ESLint web site at:
For example, the documentation for the ‘eqeqeq’ rule can be found at:
The current (first) release of eslint-annotated-reset includes all rules included in version 0.20.0 of ESLint, released on 24th April, 2015. For convenience, the rules in .eslintrc are organised in the same way as they appear in the documentation pages of the ESLint website. As new rules are added to ESLint, eslint-annotated-reset will be updated to ensure they are always in sync.