0Pricing
React Academy · レッスン

ESLint + ReactルールとPrettier連携

Reactルール付きでESLintを設定し、Prettierを連携して一貫したフォーマットにします。lintと修正のコマンドも実行します。

「ESLint + ReactルールとPrettier連携」はCoddyKit上の無料React Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。

ESLint + Prettierを使う理由

目標：ESLintでコードの問題を検出し、Prettierでスタイルを統一します。

  • ESLint：ルール、プラグイン、修正
  • Prettier：意見のあるフォーマッター
  • 開発環境とCIで実行します

インストールとプラグイン

  • ESLint：eslint、@typescript-eslint/*（TSの場合）、eslint-plugin-react、eslint-plugin-react-hooks
  • Prettier：prettier、eslint-config-prettier
  • スクリプト："lint"、"lint:fix"、"format"

デモ：lintの出力と修正

ESLintは問題を指摘し、Prettierはスタイルを修正します。悪い例と良い例を比較し、サンプル出力を確認します。


<div id="root"></div>

デモ：Prettierのフォーマットをシミュレーション

切り替えてPrettierの実行をシミュレーションします。コードが一貫した形式になります。


<div id="root"></div>

ヒントとパッケージスクリプト

  • スクリプト："lint"、"lint:fix"、"format"
  • eslint-config-prettierを使用してスタイルに関するルールを無効にします
  • react-hooksのルール（exhaustive-depsとrules-of-hooks）を有効にします

知っておきたいReactのルール

Reactのルール：

  • react/jsx-key — リストにkeyを追加します
  • react-hooks/rules-of-hooks — フックはトップレベルでのみ呼び出します
  • react-hooks/exhaustive-deps — effectの依存関係を正しく保ちます

ESLintとPrettierの役割

Reactプロジェクトで、コードのスタイルとエラーを管理する一般的なワークフローはどのようなものですか？

まとめ

まとめ：ESLintは問題を検出し、Prettierはフォーマットします。Reactプラグインとフックのルールを追加し、lint、fix、format用のスクリプトを設定します。

よくある質問

「ESLint + ReactルールとPrettier連携」レッスンは無料ですか？

はい。「ESLint + ReactルールとPrettier連携」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。

「ESLint + ReactルールとPrettier連携」で何を学びますか？

Reactルール付きでESLintを設定し、Prettierを連携して一貫したフォーマットにします。lintと修正のコマンドも実行します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。

「ESLint + ReactルールとPrettier連携」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ESLint + ReactルールとPrettier連携
  2. ファイル命名、Componentの境界、Prop命名
  3. 環境変数と設定の整理
← React Academyに戻る