v19.2Latest

エディタのセットアップ

適切に設定されたエディタは、コードをより明確に読み、より速く書くことを可能にします。さらに、バグを書いている間に発見するのを助けることさえできます！これが初めてエディタをセットアップする場合、または現在のエディタを調整したい場合、いくつかの推奨事項があります。

学習内容
  • 最も人気のあるエディタは何か
  • コードを自動的にフォーマットする方法

エディタの選択

VS Codeは、現在最も広く使われているエディタの一つです。大規模な拡張機能マーケットプレイスを持ち、GitHubのような人気のあるサービスとよく統合されています。以下に挙げる機能のほとんどは、拡張機能としてVS Codeに追加することもでき、非常にカスタマイズ可能です！

Reactコミュニティで使用されているその他の人気テキストエディタには以下があります：

  • WebStormは、JavaScript専用に設計された統合開発環境です。
  • Sublime TextはJSXとTypeScriptをサポートし、シンタックスハイライトとオートコンプリートが組み込まれています。
  • Vimは、あらゆる種類のテキストの作成と変更を非常に効率的にするために構築された、高度にカスタマイズ可能なテキストエディタです。ほとんどのUNIXシステムとApple OS Xには「vi」として含まれています。

推奨されるテキストエディタの機能

一部のエディタにはこれらの機能が組み込まれていますが、他のエディタでは拡張機能の追加が必要な場合があります。選択したエディタがどのようなサポートを提供しているか確認して、確実にしましょう！

リンティング

コードリンティングツールは、コードを書いている間に問題を見つけ、早期に修正するのを助けます。ESLintは、JavaScript用の人気のあるオープンソースのリンティングツールです。

プロジェクトに対してすべてのeslint-plugin-react-hooksルールが有効になっていることを確認してください。これらは必須であり、最も深刻なバグを早期に発見します。推奨されるeslint-config-react-appプリセットには既にこれらが含まれています。

フォーマット

他の貢献者とコードを共有する際に、タブとスペースについて議論することは避けたいものです。幸いなことに、Prettierは、コードを事前設定された設定可能なルールに従うように再フォーマットすることで整理します。Prettierを実行すると、すべてのタブがスペースに変換され、インデント、引用符などもすべて設定に従って変更されます。理想的なセットアップでは、ファイルを保存するときにPrettierが実行され、これらの編集を迅速に行ってくれます。

以下の手順に従って、VSCodeにPrettier拡張機能をインストールできます：

  1. VS Codeを起動する
  2. クイックオープンを使用する（Ctrl/Cmd+Pを押す）
  3. 以下を貼り付ける：ext install esbenp.prettier-vscode
  4. Enterキーを押す

保存時のフォーマット

理想的には、すべての保存時にコードをフォーマットするべきです。VS Codeにはこのための設定があります！

  1. VS Codeで、CTRL/CMD + SHIFT + Pを押します。
  2. 「settings」と入力します
  3. Enterキーを押します
  4. 検索バーに「format on save」と入力します
  5. 「format on save」オプションにチェックが入っていることを確認してください！

ESLintプリセットにフォーマットルールが含まれている場合、Prettierと競合する可能性があります。eslint-config-prettierを使用してESLintプリセットのすべてのフォーマットルールを無効にし、ESLintを論理的なミスの検出にのみ使用することをお勧めします。プルリクエストがマージされる前にファイルがフォーマットされていることを強制したい場合は、継続的インテグレーションでprettier --checkを使用してください。

上一篇セットアップ下一篇TypeScript の使用