VS CodeでReact開発環境を整えよう
学習の目標
本章では、以下の内容を学習します。
- React開発に便利なVS Code拡張機能を理解する
- 開発効率を向上させるVS Codeの設定方法を理解する
はじめに
VS Code（Visual Studio Code）は、React開発において最も多くの開発者に選ばれているエディタです。 豊富な拡張機能が用意されており、これらを活用することで開発効率を大幅に向上させることができます。
特にReact開発では、JSXという特殊な記法を使用するため、適切な拡張機能をインストールしないと、コードが読みにくくなったり、エラーに気付きにくくなったりします。
この章では、React開発を快適に行うための拡張機能と設定について学んでいきましょう。
React用の便利な拡張機能
VS Codeでは、拡張機能をインストールすることで様々な機能を追加できます。 React開発に特に役立つ拡張機能をご紹介します。
拡張機能のインストール方法
まず、拡張機能のインストール方法を確認しておきましょう。
VS Codeの左側にあるサイドバーから、拡張機能アイコン（四角が4つ組み合わさったアイコン）をクリックします。 または、キーボードショートカットCtrl + Shift + X（Macの場合はCmd + Shift + X）でも開くことができます。
拡張機能パネルが開いたら、検索ボックスに拡張機能の名前を入力して検索し、「インストール」ボタンをクリックします。
Auto Rename Tag
Auto Rename Tagは、HTMLやJSXのタグを編集する時に、開始タグと終了タグを同時に変更してくれる便利な拡張機能です。
例えば、<div>を<section>に変更すると、対応する</div>も自動的に</section>に変更されます。
Prettier - Code formatter
Prettierは、コードを自動的に整形してくれる拡張機能です。 保存時にコードが自動的に美しく整理されるため、チーム開発での書式統一にも役立ちます。
インストール後、VS Codeの設定で「保存時にフォーマット」を有効にしておくと便利です。
まとめ
他にもReact開発に役立つ拡張機能は多数ありますが、まずは上記の2つだけでもインストールしておくと、開発が格段に快適になります。
React に慣れてきた時は、スニペット（コードのテンプレート）を提供する拡張機能も検討してみてください。 例えば、ES7 React/Redux/GraphQL/React-Native snippetsという拡張機能は、よく使うコードのテンプレートを簡単に挿入できるので、開発効率が大幅に向上します。
ただし、慣れないうちはスニペットの自動入力は少し混乱することもあるため、今回は紹介しませんでした。
慣れてきたら「React VSCode 拡張機能」などのキーワードで検索し、他の便利な拡張機能も試してみてください。