🐋

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

2023/02/23に公開

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? · syntax
✔ 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
✔ What format do you want your config file to be in? · JSON
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
Installing eslint-plugin-react@latest, @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest, eslint@latest

added 196 packages, and audited 280 packages in 9s

91 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

eslint-plugin-import

npm install eslint-plugin-import --save-dev

npm i -D eslint-plugin-import eslint-import-resolver-typescript

prettier

https://prettier.io/

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

echo {}> .prettierrc.json

prettierrc.json

{
    "singleQuote": true,
    "trailingComma": "es5",
    "printWidth": 100,
    "tabWidth": 2,
    "useTabs": false
}

.eslintrc.json の完成形

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

frontend/.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "prettier"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "react-hooks", "@typescript-eslint", "import"],
  "rules": {
    // react17以降はReactのimport不要
    "react/react-in-jsx-scope": "off",
    // react-hooks
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    // 改行コード
    "linebreak-style": ["error", "unix"],
    // import文の順序
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index",
          "object"
        ],
        // importグループごとに改行する
        "newlines-between": "always",
        // 各グループ内の順序をアルファベット順に並べ替える
        "alphabetize": { "order": "asc", "caseInsensitive": true }
      }
    ]
  }
}

eslint, prettier の動作確認

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

eslint の確認

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

eslint が正常に動作していたらエラーログが出力されません。

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

prettier の確認

プルダウンから「Prettier」を選択肢、フォーマットを実行してください。
下記の画像のようなログが出力されれば Prettier は正常に動作しています。

補足：devcontainer.json の自動生成方法

この記事では devcontainer.json の完成形をご紹介しました。
このセクションでは、devcontainer.json の生成をご紹介します。

1.docker-compose.yml を作成

2.設定ファイルを追加

F1 をクリックし、次に「Dev Containers Add Dev Container Configuration Files...」を選択します。

3.docker-compose.yml を選択

「From docker-compose.yml」を選択します。

そして、「OK」をクリックします。

4.devcontainer.json を編集

devcontainer.json が生成されました。

下記のドキュメントを参考に編集してください。

補足：nextjs

「feature/nextjs」ブランチに nextjs の環境があります。
nextjs + ESLint + Prettier

まとめ

リモートコンテナに vscode 拡張機能を自動的にインストールすることにより、開発チームの開発環境を統一できる、というメリットがあります。

例えば、この記事の設定では地味に改行コードを「LF」に、文字コードを「UTF-8」に設定してあります。

上記のような設定は重要です。
設定が開発チーム内で統一できてないと、メンバーが文字コードを Shift_JIS で、改行コードを CR+LF で push してしまうかもしれません。

このような状況を回避する意味でも、この記事の設定は有効であると思います。

お役に立てられれば幸いです。