React Japan light logo
article hero
Steven Sacks
スティーブン・サックス

ESLint - 状況に応じたルール

使用しているツールによって、これらのルールは状況に応じたものになります。

storybook + react-testing-library

storybook および/または react-testing-library を使用する場合、これらのファイルに対するオーバーライドで特定のルールを無効にすると便利です。これらのルールは本番コードでは有用ですが、ストーリーやテストで不必要な問題を引き起こす可能性があります。

{
  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',
  },
},

プロジェクトのルート TypeScript ファイル

プロジェクトのルートにある TypeScript ファイルは、プロジェクトコードとは異なるため特別な扱いが必要です。これは私が遭遇した最も一般的なルールのコンフリクトです。

{
  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

ESLint vitest プラグインを ESLint 8.57.0 と共に使用する場合、legacy-recommended を拡張する必要があります。

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

また、私のようにプロジェクトのルートに test フォルダを使用してテスト構成ファイルを含める場合は、それも含める必要があります。

 
{
  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',
  },
},

次の記事: ESLint - 意見の分かれるルール

前の記事: ESLint - ソート

主な記事: ESLintの保存時の修正でワークフローを次のレベルに上げる方法