VSCodeでReact×TypeScriptの開発環境を構築する方法と手順

はじめに

アプリケーション開発部の田村です。自社で運営するサービス開発を担当しています。
そのサービスのフロントエンドをReact×TypeScriptで開発しています。今回はその開発効率の向上に役立つ情報を紹介します。
この記事を読むことで、React×TypeScriptをVisual Studio Codeを用いて開発する際の基本的な操作や静的チェック、デバッグ方法を身につけることが出来ます。
基本的なことになりますがこれからReact×TypeScriptの開発を行う方の役に立てれば幸いです。

本記事の手順で利用するソフトウェア

• Visual Studio Code
• Git
• Node.js v12.16.2以上
• Google Chrome
• Docker
• Docker-compose

サンプルコードの取得

環境を整えるにあたり、具体的なアプリケーションで操作出来ると理解が早いので今回はSPA + REST API構成のサービス開発リファレンスのハンズオンで使用するexampleのコードを利用します。

下記コマンドで任意のディレクトリにコードを取得します。

git clone https://gitlab.com/ti-spa-restapi/spa-restapi-handson.git
cd spa-restapi-handson

# Tag 1.2から作業用ブランチを作成します
git checkout -b feature/vscode-setup 1.2

続いてモジュールのインストールを行います。

cd example/todo-app/frontend/
npm i

ESLint/Stylelint/Prettierの設定

ツールのインストール

静的チェックツールであるESLintは既に組み込まれていますが、さらに下記のツールの静的チェックツールとコードフォーマットを導入してコード品質を高めます。

• Prettier
  • コードフォーマッター
• eslint-config-prettier
  • Prettierと競合するESLintのルールをオフにするルールセット
• Stylelint
  • CSSコードのスタイルチェック
• stylelint-config-standard
  • Stylelintの標準ルール
• stylelint-config-prettier
  • Prettierと競合するStylelintのルールをオフにするルールセット

下記コマンドでインストールします。

npm i -D prettier eslint-config-prettier stylelint stylelint-config-standard stylelint-config-prettier

ESLintの設定

exampleではpackage.jsonにESLintの設定があります。設定が肥大化すると可読性が落ちるため、ESLintの設定は.eslintrc.jsonに分離します。
まずpackage.jsonからESLintの設定を削除します。また各種ツールのコマンドをpackage.jsonに登録します。

spa-restapi-handson/example/todo-app/frontend/package.jsonを修正します。

--- a/example/todo-app/frontend/package.json
+++ b/example/todo-app/frontend/package.json
@@ -21,13 +21,14 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "eject": "react-scripts eject",
+    "eslint": "eslint ./src/**/*.{ts,tsx}",
+    "fix:eslint": "npm run lint -- --fix",
+    "debug:eslint": "eslint --print-config ./src/App.tsx",
+    "stylelint": "stylelint ./src/**/*.css",
+    "lint": "npm run eslint ; npm run stylelint",
+    "fmt": "prettier --write 'src/**/*.{ts,tsx}'",
+    "fixfmt": "npm run fix:eslint ; npm run fmt"
   },
   "browserslist": {
     "production": [

spa-restapi-handson/example/todo-app/frontend/.eslintrc.jsonを作成します。

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "react-app",
    "react-app/jest",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": [
    "@typescript-eslint"
  ],
  "rules": {
  }
}

設定内容としては、ESLintの推奨設定、TypeScript用のESLint推奨設定、React用の推奨設定となります。
extendsにある「prettier」は「eslint-config-prettier」の省略形です。

ESLintにはコード品質に関するルールとコード可読性に関するルールの２つのカテゴリがあります。

eslint-config-prettierは、そのコード可読性に関するルールの内、Prettierのコード整形と競合するルール(max-lenなど)をオフにします。

Stylelintの設定

spa-restapi-handson/example/todo-app/frontend/.stylelintrc.jsonを作成します。

{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
  "rules": {
    "property-no-unknown": [
      true,
      {
        "ignoreProperties": ["composes", "compose-with"]
      }
    ]
  }
}

Prettierの設定

spa-restapi-handson/example/todo-app/frontend/.prettierrc.jsonを作成します。

{
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all"
}

コマンドの確認

下記のコマンドで各ツールを実行します。

# eslint
npm run eslint

# eslint and fix
npm run fix:eslint

# stylelint
npm run stylelint

# eslint and stylelint
npm run lint

# prettier
npm run fmt

# fix eslint and prettier
npm run fixfmt

Visual Studio Codeの設定

推奨設定の設定

「spa-restapi-handson/example/todo-app/frontend/」の下に「.vscode」ディレクトリを作成します。
spa-restapi-handson/example/todo-app/frontend/.vscode/settings.jsonを作成します。

{
  //ファイル保存時にeslintによるfix処理を行う
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
  //フォーマッタのデフォルトをPrettierに
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
  //ファイル保存時に自動的にフォーマットする
    "editor.formatOnSave": true,
  //デフォルトのCSSのLintを止めて、StylelintによるLintを行うための設定
    "css.validate": false,
    "scss.validate": false,
}

推奨プラグインの設定

spa-restapi-handson/example/todo-app/frontend/.vscode/extentions.jsonを作成します。
Visual Studio Code起動時にこのファイルのプラグインのインストールを促してくれます。

{
    "recommendations": [
        "clinyong.vscode-css-modules",
        "pucelle.vscode-css-navigation",
        "dbaeumer.vscode-eslint",
        "ionutvmi.path-autocomplete",
        "stylelint.vscode-stylelint",
        "esbenp.prettier-vscode"
    ]
}

Visual Studio Codeの操作

起動

Visual Studio Codeを起動します。
次にメニューバーの「File」->「Open Folder…」を選択し、spa-restapi-handson/example/todo-app/frontend/を選択します。

拡張のインストール

起動すると右下に推奨プラグインのインストールを促すメッセージが表示されるので「Install」を選択します。

基本的な操作

• クイックオープンウィンドウ(win: Ctrl+P, mac: ⌘P)
  • マウスを使わずファイル名の一部を入力することで目的のファイルに素早くアクセスすることが出来ます
  • 文字の一部だけを入力して効率よく選択肢を絞ることが出来ます
    .
• コマンドパレット(win: Ctrl+Shift+P, F1, mac: ⇧⌘P, F1)
  • Visual Studio Codeのあらゆるコマンドを探して実行することが出来ます
    
• 定義に移動(win: F12, mac: F12)
  • コード上の変数やクラス名などの上で押下すると、その定義に移動することが出来ます
    
• 実装に移動(win: Ctrl+F12, mac: ⌘F12)
  • Reactの関数コンポーネントの実装を見たい場合、関数コンポーネント上で「定義に移動」をすると、型のReact.FCまで候補になるため一発で移動が出来ません。そこで「実装に移動」を行うことで目的のコンポーネントに移動出来ます
    
• 定義をポップアップ(win: Alt+F12, mac: ⌥F12)
  • 定義内容をポップアップで表示します
    
• CSSの定義参照
  • 「CSS Navigation」「CSS Modules」拡張により、CSSのクラス名の上でもキーを押下するとその定義を参照出来ます
    
• 戻る/進む(win: Alt+ ← / →, mac: ⌃- / ⌃⇧-)
  • 移動する前の位置に戻る、戻った場所から再度移動先に進みます
• ファイルパスの補完
  • 「Path Autocomplete」拡張により、import文やimgタグのsrc属性でファイルパス補完が有効です
• シンボルの検索(win: Ctrl + Shift + O, mac: ⇧⌘O)
  • コード上の変数やメソッドに移動出来ます
    

静的チェック

• ファイルを開くと自動的にESLintとStylelintが実行されます。コマンドパレットから問題ビューを表示し結果を確認できます。
  

コード整形

• ファイルを保存すると自動的にESLintのfix処理とPrettierによるコード整形が行われます。

React Developer Tools(Chrome拡張)を使ったデバッグ

Chromeの拡張機能であるReact Developer Toolsを使ったデバッグ方法を解説します。そのためにexampleのアプリを起動します。

React Developer Toolsのインストール

ここからReact Developer Toolsのインストールを行います。

npm start時のESLintの無効化

現状では、ESLintのエラーが２つ存在しています。このエラーがあるとReactアプリケーションの起動に失敗します。
開発中はReactアプリケーション起動時のESLintエラーが煩わしいので無効化します。

spa-restapi-handson/example/todo-app/frontend/.env.developmentを作成します。

ESLINT_NO_DEV_ERRORS=true

APIモックの起動

今回はexampleのフロントエンドの機能を確認したいだけなので、バックエンドはモックを利用します。
下記コマンドを実行します。

cd example/todo-app/frontend/docker/
docker-compose -f docker-compose.api-mock.yml up -d

Reactアプリケーションの起動

下記コマンドを実行します。Chromeブラウザが起動し、ホーム画面が表示されます。

cd example/todo-app/frontend/docker/
npm start

右上のログインボタンでログイン画面を表示し、「名前」と「パスワード」は何を入力しても構いません。バックエンドがモックなので何を入力しても通ります。
ログインするとTODO一覧画面が表示されます。

要素の特定

TODO一覧画面でF12キーを押下します。
Componentタブを押下します。
コンポーネントツリーを確認することが出来ます。 またパネル内左上のポインターを利用することで画面上のコンポーネントの特定が出来ます。

コードの参照とブレークポイントの設定

コンポーネントツリー上で任意のコンポーネントを選択し、右の「{}」ボタンを押下することで、そのコンポーネントのコードが参照出来ます。
さらにコード上ではブレークポイントを設定し、ステップ実行をすることが出来ます。

Consoleタブで変数の操作やメソッドの実行

ブレークポイントで停止している間は、Consoleタブで変数の操作やメソッドの実行が可能です。

まとめ

Visual Studio CodeでReact×TypeScriptの開発を行うための環境構築と基本的な操作に関して紹介しました。
紹介したESLintなどのツールの詳細な設定やルールの設定に関しては公式HPをご覧ください。
Visual Studio Codeには今回紹介出来なかった便利な機能がまだまだあるのでぜひ調べて見てください。

本コンテンツはクリエイティブコモンズ(Creative Commons) 4.0 の「表示—継承」に準拠しています。