【React】【Testing Library】への【ESLint】と【Prettier】の導入

はじめに

この記事は【React】【Testing Library】への【ESLint】と【Prettier】の導入の導入方法の備忘録である。

導入方法

1. インストール

【Testing Library】と【jest-dom】のESLintプラグインをインストールする

npm install -D eslint-plugin-testing-library eslint-plugin-jest-dom

2. 設定方法

【eslint.config.js】設定ファイルに以下を追加する。

// eslint.config.js
import js from '@eslint/js';
import pluginTsEslint from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import pluginStorybook from 'eslint-plugin-storybook';
import pluginTestingLibrary from 'eslint-plugin-testing-library';
・・・
export default tseslint.config(
    ・・・
    plugins: {
      'jest-dom': pluginJestDom, ★ 追加
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      'testing-library': pluginTestingLibrary, ★ 追加
      storybook: pluginStorybook,
    },
    ...js.configs.recommended,
    rules: {
      ...pluginJestDom.configs.recommended.rules, ★ 追加
      ...reactHooks.configs.recommended.rules,
      ...pluginTsEslint.configs.recommended.rules,
      ...pluginTestingLibrary.configs.recommended.rules, ★ 追加
      ...pluginStorybook.config.recommended.rules,
      ・・・
    },
  }
);