エディタのセットアップ
エディタを適切に設定することで、コードが読みやすく、素早く書けるようになります。さらに、書いている途中でバグを検出するのにも役立ちます！ エディタの設定をするのが初めてである、あるいは現在使用しているエディタをチューンアップしたいという場合、いくつかのおすすめがあります。
このページで学ぶこと
- 最も人気があるエディタの紹介
- コードを自動フォーマットする方法
エディタを選ぶ
VS Code は、現在最も一般的に使用されているエディタのひとつです。マーケットプレイスには多くの拡張機能があり、GitHub のような人気のサービスとも良く統合されています。以下で説明する多くの機能も、VS Code に拡張機能として追加することができるため、高度にカスタマイズできます。
他に React コミュニティで使用されている人気のテキストエディタとしては以下のようなものがあります。
- WebStorm は、JavaScript に特化した統合開発環境です。
- Sublime Text は、JSX や TypeScript のサポート、シンタックスハイライト、オートコンプリート機能を組み込みで有しています。
- Vim は、あらゆる種類のテキストの作成や編集を効率的に行うために作られた、高度にカスタマイズ可能なテキストエディタです。多くの UNIX システムや Apple OS X には “vi” として含まれています。
テキストエディタ機能のお勧め
一部のエディタは以下の機能を組み込みで有していますが、他のエディタでは拡張機能を追加する必要があるかもしれません。使いたいエディタのサポート状況を確認してください!
リント
コードリンタは、書きながらコード内の問題を見つけて、問題を早期に修正できるようにしてくれます。ESLint は、人気の JavaScript 用オープンソースリンタです。
- React に適した構成の ESLint をインストールする（Node をインストールしていることを確認してください！）
- 公式拡張機能を使用して VS Code に ESLint を統合する
プロジェクトで eslint-plugin-react-hooks のルールをすべて有効化していることを確認してください。これは非常に重要であり、とても深刻なバグを早期に検出してくれます。eslint-config-react-app 推奨プリセットは、これらをすでに含んでいます。
コードフォーマット
他の人とコードを共有するにあたって何よりも避けたいのは、タブ vs スペースについての議論に巻き込まれてしまうことです！ 幸いなことに、Prettier は、あらかじめ設定できるルールに従ってコードを再フォーマットすることで、あなたのコードを綺麗にしてくれます。Prettier を実行すれば、タブはスペースに変換され、インデント、引用符なども設定に従って変更されます。理想的なセットアップでは、Prettier はファイルを保存するたびに実行され、瞬時にこれらの変更を適用してくれます。
VSCode 用の Prettier 拡張機能 を VS Code にインストールするには、次の手順に従ってください。
- VS Code を起動する。
- Quick Open を使用する（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-config-prettierを使用して、ESLint プリセット内のフォーマットに関するルールをすべて無効にし、ESLint を論理的な誤りの検出のみに限定して利用することをお勧めします。プルリクエストをマージする前にファイルがフォーマットされていることを強制するには、継続的インテグレーション (CI) でprettier --checkを使用してください。