ESLint - Situational rules

These rules are situational, depending on the tools you are using.

storybook + react-testing-library

If you use storybook and/or react-testing-library, disabling certain rules to the overrides for these files can be helpful. These rules are good in your production code, but they create unnecessary pain in stories and tests.

{
  files: ['*.test.ts?(x)', '*.stories.ts?(x)'],
  rules: {
    '@typescript-eslint/no-explicit-any': 'off',
    'guard-for-in': 'off',
    'import/extensions': 'off',
    'import/no-extraneous-dependencies': 'off',
    'no-await-in-loop': 'off',
    'no-restricted-syntax': 'off',
    'react/jsx-props-no-spreading': 'off',
    'sonarjs/no-duplicate-string': 'off',
    'sonarjs/no-identical-functions': 'off',
  },
},
{
  files: ['.storybook/**/*.ts?(x)'],
  rules: {
    'import/no-extraneous-dependencies': 'off',
    'import/no-unresolved': 'off',
  },
},

Project root TypeScript files

TypeScript files in the root of your project require special treatment because they’re different than project code. These are the most common rule conflicts I’ve run into.

{
  files: ['./*.ts'],
  rules: {
    'global-require': 'off',
    'import/no-extraneous-dependencies': 'off',
    'import/prefer-default-export': 'off',
    'no-void': 'off',
    'unicorn/prefer-module': 'off',
    'unicorn/prevent-abbreviations': 'off',
  },
},

Vitest

If you use the ESLint vitest plugin with ESLint 8.57.0, you need to extend legacy-recommended.

{
  files: ['*.test.ts?(x)', '*.stories.ts?(x)'],
  extends: ['plugin:vitest/legacy-recommended'],
},

Also, if you’re like me and use a test folder in the root of your project to contain your test configuration files, you should include that, as well.

 
{
  files: ['test/**/*.ts?(x)'],
  extends: ['plugin:vitest/legacy-recommended'],
  rules: {
    '@typescript-eslint/no-var-requires': 'off',
    'import/no-extraneous-dependencies': 'off',
    'import/prefer-default-export': 'off',
    'sonarjs/no-duplicate-string': 'off',
  },
},

Next article: ESLint - Opinionated rules

Previous article: ESLint - Sorting

Main article: Take your workflow to the next level with ESLint fix on save