ESLint

ESLint

ESLint は、JavaScript コードの品質を向上させるツールで、以下のようなことができます：

• 構文エラーの検出: JavaScript コード内の構文エラーを見つけて修正する。
• コーディングスタイルのチェック: インデントやクォートのスタイルなど、コーディングスタイルを検証する。
• 一貫性の維持: チーム全体でコーディングスタイルを一貫させるためのルールを定義する。
• パフォーマンスの最適化: パフォーマンスを低下させる可能性のあるコードを見つけて改善する。
• カスタムルールの追加: プロジェクト固有の要件に合わせて独自のルールを作成する。
  ESLint を使うことで、コードの品質を向上させ、開発プロセスを効率化することができます。

ESLintプラグイン

Typescript関連

@typescript-eslint/eslint-plugin

TypeScript コードに対する ESLint のルールや機能を提供するプラグインです。このプラグインには、TypeScript コードに対する様々なルールや、TypeScript 固有の機能をサポートするための機能が含まれています。例えば、未使用の変数を検出するルールや、型の一貫性を保つためのルールなどがあります。
例えば、未使用の変数を検出するルールを適用することができます。

@typescript-eslint/parser

TypeScript コードを解析するためのパーサーです。TypeScript の文法を理解し、ESLint がコードを解釈できる形式に変換します。このパーサーを使用することで、ESLint は TypeScript コードを正しく解析し、静的解析を行うことができます。

React関連

eslint-plugin-react

React コンポーネントの開発でよくあるエラーや慣用句を検出する ESLint プラグインです。例えば、コンポーネントの定義や使用方法、JSX の記法などをチェックし、コーディング規約に従うように促します。これにより、コードの品質を向上させ、一貫性のあるコーディングスタイルを保つことができます。

eslint-plugin-react-hooks

React Hooks を使用する際のベストプラクティスを強制する ESLint プラグインです。React Hooks は React コンポーネントで状態管理や副作用を行うための新しい方法を提供しますが、間違った使い方をするとバグの原因になる可能性があります。このプラグインは、コード内で Hooks を正しく使用しているかどうかをチェックし、問題がある場合に警告やエラーを表示します。

VITE(v5.2.8) でデフォルトインストールされています。

eslint-plugin-react-refresh

React のホットリロード機能である React Refresh を ESLint でサポートするためのプラグインです。
VITE(v5.2.8) でデフォルトインストールされます。

その他

eslint-plugin-storybook

Storybook の開発時によくある問題や慣用句に対する ESLint ルールを適用できます。例えば、コンポーネントのストーリー内で未使用の変数を検出したり、コンポーネントのストーリーが適切に記述されているかを確認したりすることができます。