🐋

React+Ts+Vite+ESLint+prettier Docker環境構築

2023/02/23に公開・約8,300字

Docker

はじめに

React の Docker 環境構築の記事ってよくありますよね(笑)

この記事が特徴的なのは、vscode 拡張機能の dev containers によってリモート側で開発が可能になるという点です。

リモートコンテナをビルドすると、リモートコンテナ側に自動的に vscode 拡張機能がインストールされ、設定まで自動的に反映されます。

そして、ホスト側の vscode 拡張機能には全く影響しません。
また、拡張機能がリモートコンテナ側にインストールされるので、リモート側のリソースを使用して vscode 拡張機能が動作します。

つまり、ホスト側に nodejs をインストールしたりという面倒な作業から解放されるという利点があります。

バージョン

サンプルリポジトリ

docker 環境のサンプルです。
コピーしていただいても、fork して利用していただいても構いません。
（※都合により予告なく削除することはあるかと思いますのでご了承ください。）

ファイルの説明

docker-compose.yml

node:18 の docker イメージを使用するだけのカンタンな定義です。

.devcontainer/devcontainer.json

リモートコンテナの状態を設定することができます。
リモートコンテナビルド時に extensions に定義した vscode 拡張機能が自動的にリモートコンテナ側にインストールされます。
また、settings に設定した内容が反映されます。
ホスト側の vscode 拡張機能が汚れないのは便利ですね。

インストールされる拡張機能は下記の通りです。
必要に応じて devcontainer.json を編集してください。

.devcontainer/docker-compose.yml

docker-compose.yml と devcontainer.json を関連付けるファイルです。

.vscode/launch.json

vscode のデバッグ設定です。

重要な vscode 拡張機能 Dev Containers

vscode 拡張機能 Dev Containers をホスト側にインストールしてください。
リモートコンテナにログインし、リモートコンテナ上で作業できるようになります。

リモートコンテナのビルド

まず、docker を起動してください。

vscode を起動し、react-docker-sample ディレクトリを開いてください。
次に左下の部分をクリックし、Reopen in container を選択してください。
リモートコンテナのビルドが開始されます。

リモートコンテナのビルドが完了すると、devcontainer.json で指定した vscode 拡張機能がインストールされています。
また、ターミナルで下記のコマンドを実行すると、nodejs のバージョンが表示されます。
これで、React 環境構築の準備は整いました。

node -v

React + TypeScript + Vite 環境構築

環境構築方法について説明します。
完成形は下記のブランチにあります。

npm create vite@latest frontend -- --template react-ts
cd frontend
npm install

package.json を編集

"dev": "vite --host",

npm run dev

vscode デバッグを起動します。

React + Vite の画面が表示されました。

ESLint とフォーマッタの設定

ESLint

$ npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard-with-typescript
✔ What format do you want your config file to be in? · JSON
Checking peerDependencies of eslint-config-standard-with-typescript@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin@^5.0.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0 typescript@*
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
Installing eslint-plugin-react@latest, eslint-config-standard-with-typescript@latest, @typescript-eslint/eslint-plugin@^5.0.0, eslint@^8.0.1, eslint-plugin-import@^2.25.2, eslint-plugin-n@^15.0.0, eslint-plugin-promise@^6.0.0, typescript@*

added 221 packages, and audited 305 packages in 8s

95 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Successfully created .eslintrc.json file in /home/node/app/frontend

ESLint React Hook

npm install eslint-plugin-react-hooks --save-dev

prettier

npm install prettier -D --save-exact
npm install --save-dev eslint-config-prettier

.eslintrc.json の完成形

下記を「.eslintrc.json」に貼り付けてください。

frontend/.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "plugin:react/recommended",
    "standard-with-typescript",
    "plugin:react-hooks/recommended",
    "prettier"
  ],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "frontend/tsconfig.json"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "plugins": ["react", "react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": [
      "warn",
      {
        "additionalHooks": "(useMyCustomHook|useMyOtherCustomHook)"
      }
    ]
  }
}

eslint, prettier の動作確認

eslint, prettier が正常に動作しているかチェックが必要です。

eslint の確認

1.　「frontend/src/App.tsx」を開く
2. ターミナルを開き、「出力」タブを選択
3. プルダウンから「ESLint」を選択

eslint が正常に動作していたら下記のようなログが出力されます。

[Info  - 9:13:21 PM] ESLint server is starting.
[Info  - 9:13:21 PM] ESLint server running in node v16.14.2
[Info  - 9:13:21 PM] ESLint server is running.
[Info  - 9:13:22 PM] ESLint library loaded from: /home/node/app/frontend/node_modules/eslint/lib/api.js

ソースコードが下記のように真っ赤になっているなら ESLint は正常に動作しています。
デフォルトの App.tsx に ESLint のルールに沿っていない箇所があるため警告が表示されているからです。