

スティーブン・サックス
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 - ソート