How to gradually add an eslint rule

strdr4605

Dragoș Străinu

Posted on May 18, 2022

How to gradually add an eslint rule

As your javascript project grows and new engineers are joining the team, you may try to add new eslint plugins and rules to make the code base more rigid.

The problem is that often these new eslint rules may require changes in all project files, and as your project is big enough, you may have a situation when eslint rules require changes in 2000+ files.

What if you could gradually enforce an eslint rule, without breaking the CI of your project.

We can do this using lint-staged, husky, and some changes in the .eslintrc.js file.

I hope you are already using lint-staged with husky. If not, please set up it.

Your .lintstagedrc.js file may look something like this:

// .lintstagedrc.js
module.exports = {
  '*.{js,jsx,ts,tsx}': ['prettier --write', 'eslint --quiet --fix'],
  '*.css': 'stylelint --fix',
  '*.md': 'prettier --write'
};
Enter fullscreen mode Exit fullscreen mode

You may also have a script in your package.json file, that you run in CI to make sure eslint rules are followed:

...
"scripts": {
  "eslint:run": "eslint --ext=.js,.jsx,.ts,.tsx --quiet .",
}
Enter fullscreen mode Exit fullscreen mode

Now let's say you want to enforce the removal of all console logs using the eslint rule no-console.

In your .eslintrc.js file, set the rule to warning:

// .eslintrc.js
module.exports = {
  ...
  rules: {
    'no-console': 'warn',
  ...
Enter fullscreen mode Exit fullscreen mode

Now running npm run eslint:run will just show a bunch of warnings but will pass the check.
Next, you need to create a new eslintrc file that will be used only by lint-staged. Let's name it eslintrc-staged.js.
There you need to extend the default eslint config and override the rule to error.

// .eslintrc-staged.js
module.exports = {
  extends: './.eslintrc.js',
  rules: {
    'no-console': 'error',
  }
};
Enter fullscreen mode Exit fullscreen mode

The last change needs to be done in .lintstagedrc.js to tell lint-staged to use another config file when running eslint.

module.exports = {
  '*.{js,jsx,ts,tsx}': ['prettier --write', 'eslint -c eslintrc-staged.js --no-eslintrc --quiet --fix'],
  '*.css': 'stylelint --fix',
  '*.md': 'prettier --write'
};
Enter fullscreen mode Exit fullscreen mode

Now, when doing changes to the project, eslint will throw errors only to the files that were changed before the commit.

💖 💪 🙅 🚩
strdr4605
Dragoș Străinu

Posted on May 18, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to gradually add an eslint rule
development How to gradually add an eslint rule

May 18, 2022