適切に設定されたエディターは、コードを読みやすく、記述を速くすることができます。記述中にバグを見つけるのに役立つことさえあります！初めてエディターをセットアップする場合や、現在のエディターを調整したい場合は、いくつかのおすすめがあります。
あなたは学ぶでしょう
- 最も人気のあるエディターは何であるか
- コードを自動的にフォーマットする方法
あなたのエディター
VS Code は、今日最も普及しているエディターの1つです。拡張機能の大きなマーケットプレイスがあり、GitHubのような人気のあるサービスとうまく統合されています。以下にリストされている機能のほとんどは、VS Codeに拡張機能として追加することもできるため、高度に設定可能です！
Reactコミュニティで使用されている他の一般的なテキストエディターには、次のようなものがあります。
- WebStorm は、JavaScript専用に設計された統合開発環境です。
- Sublime Text は、JSXとTypeScriptのサポート、構文ハイライトとオートコンプリートが組み込まれています。
- Vim は、あらゆる種類のテキストの作成と変更を非常に効率的に行うために構築された、高度に設定可能なテキストエディターです。ほとんどのUNIXシステムとApple OS Xには「vi」として含まれています。
推奨されるテキストエディターの機能
一部のエディターにはこれらの機能が組み込まれていますが、拡張機能の追加が必要な場合もあります。選択したエディターがどのようなサポートを提供しているかを確認してください！
Linting
コードリンターは、記述中にコードの問題を見つけ、早期に修正するのに役立ちます。ESLint は、JavaScriptで人気のあるオープンソースリンターです。
プロジェクトのeslint-plugin-react-hooksルールをすべて有効にしていることを確認してください。 これらは不可欠であり、最も深刻なバグを早期にキャッチします。推奨されるeslint-config-react-appプリセットにはすでに含まれています。
フォーマット
コードを他のコントリビューターと共有する際に、タブとスペースについて議論するのは避けたいはずです！幸いなことに、Prettierは、プリセットされた設定可能なルールに従ってコードを再フォーマットすることで、コードをクリーンアップしてくれます。Prettierを実行すると、すべてのタブがスペースに変換され、インデント、引用符などもすべて設定に従って変更されます。理想的な設定では、ファイルを保存する際にPrettierが実行され、これらの編集を迅速に行ってくれます。
次の手順に従って、VSCodeにPrettier拡張機能をインストールできます。
- VS Codeを起動します。
- クイックオープン（Ctrl/Cmd+P）を使用します。
ext install esbenp.prettier-vscodeを貼り付けます。- Enterキーを押します。
保存時のフォーマット
理想的には、保存するたびにコードをフォーマットする必要があります。VS Codeにはこのための設定があります！
- VS Codeで、
CTRL/CMD + SHIFT + Pを押します。 - 「settings」と入力します。
- Enterキーを押します。
- 検索バーに「format on save」と入力します。
- 「format on save」オプションがチェックされていることを確認してください！
ESLintプリセットにフォーマットルールがある場合、Prettierと競合する可能性があります。ESLintが論理的なミスを検出するためだけに使用されるように、
eslint-config-prettierを使用して、ESLintプリセットのすべてのフォーマットルールを無効にすることをお勧めします。プルリクエストがマージされる前にファイルがフォーマットされていることを強制したい場合は、継続的インテグレーションにprettier --checkを使用してください。