Enabling new ESLint rules in a legacy codebase with suppress-eslint-errors

Adding new linter rules could be painful when the codebase has many violations, and the rule isn’t autofixable. You will have to either:

fix all the violations manually;
suppress them with the eslint-disable-next-line comment.

suppress-eslint-errors is a tool that automatically adds disabling comments to each line with a linter rule violation.

Add a new ESLint rule to your ESLint config. In my case it was @typescript-eslint/no-explicit-any:

module.exports = {
  rules: {
    '@typescript-eslint/no-explicit-any': 'error'
  }
};

Run suppress-eslint-errors:

NODE_ENV=test npx suppress-eslint-errors ./src --extensions=ts,tsx --parser=tsx --rules @typescript-eslint/no-explicit-any

Here we’re:

enabling the TypeScript parser and file extensions;
only adding comments for a single ESLint rule;
changing files only inside the src folder.

Note I had to set NODE_ENV because it’s required by Create React App Babel config, you may not need to do it.

Note I had to temporarily disable the jsx-a11y plugin in my ESLint config because it was breaking suppress-eslint-errors.

After running this command you should see changes like this:

-  disclaimers: any
+  // TODO: Fix this the next time the file is edited.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  disclaimers: any

And using any from now on will trigger an error.