Zenn
🙌

Vue.js + TypeScript + Vite + VSCode DevContainers で開発環境を作る

2025/03/02に公開
Docker
TypeScript
Vue.js
Vite
devcontainer
tech

はじめに

お仕事でVSCodeのDevContainersを用いて開発を行っております。
そちらが便利でしたので備忘録として残します。

追記

ESLintやPrettierに関わるファイルが作成されていなかったので、npm create vue@latestで作成し直しました。それに合わせてファイルの設定も多少変更しました。

動作環境

Dockerを使用できる状態にしてください。

  • MacOS(intel)
  • Visual Studio Code: v1.97.2
  • Node.js: v22.14.0
  • npm: v10.9.2
  • Docker: v27.4.0
  • Docker Desktop: v4.37.2

用語補足

用語 説明
Dev Containers Dockerのコンテナを活用して、開発環境を構築・管理するVSCodeの拡張機能
Docker アプリケーションをすばやく構築、テスト、デプロイできるプラットフォーム
コンテナ アプリケーションの実行に必要な環境を独立した一つのパッケージとする仮想化技術

作成したリポジトリ

https://github.com/mk663379/vue-vite-devcontainer

プロジェクトの作成

まずはハローワールドまで。
任意のディレクトリまで移動して以下を実行します。
テストも試してみたいので、Vitestを導入します。

npm create vue@latest

✔ Project name: … アプリ名
✔ Add TypeScript? … Yes
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … Yes
✔ Add Pinia for state management? … Yes
✔ Add Vitest for Unit Testing? … Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? › Yes
✔ Add Prettier for code formatting? … Yes

cd アプリ名
npm install
npm run format
npm run dev

GitHubにリポジトリ登録

GitHubで空のリポジトリを作成してから作業します。

git init
git remote add origin リポジトリ
git add -A
git commit -m "Hello Vue Vite DevContainers"
git push origin main

コンテナ化

ファイル変更

細かい説明は割愛します。
まずは必要なファイルやディレクトリを準備します。

.
├── .devcontainer
│   ├── devcontainer.json
│   ├── Dockerfile
├── .vscode
│   ├── extensions.json
│   ├── settings.json

.vscode/extensions.json

共同開発者に推奨する拡張機能（ローカル）を設定します。

{
  "recommendations": ["ms-vscode-remote.remote-containers"]
}

.vscode/settings.json

VSCodeのフォーマッターやタブサイズ等を設定します。

{
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "tsconfig.json": "tsconfig.*.json, env.d.ts",
    "vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .prettier*, prettier*, .editorconfig"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[css]": {
    "editor.tabSize": 2
  }
}

.devcontainer/devcontainer.json

コンテナに関する設定を行います。
お好みでカスタムしてください。
https://containers.dev/implementors/json_reference/

{
  "name": アプリ名,
  "build": {
    "dockerfile": "Dockerfile",
    "context": "."
  },
  "remoteUser": "node",
  "customizations": {
    "vscode": {
      "settings": {
        "[css][html][javascript][typescript][vue]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "[json][jsonc]": {
          "editor.defaultFormatter": "vscode.css-language-features"
        },
        "github.copilot-chat.anable": true
      },
      "extensions": [
        "Vue.volar",
        "vitest.explorer",
        "ms-playwright.playwright",
        "dbaeumer.vscode-eslint",
        "EditorConfig.EditorConfig",
        "esbenp.prettier-vscode",
        "eamodio.gitlens",
        "ms-azuretools.vscode-docker",
        "GitHub.copilot",
        "GitHub.copilot-chat"
      ]
    }
  }
}

.devcontainer/Dockerfile

Dockerイメージを作成するためのファイルです。
こちらもお好みで設定を追加してください。

FROM node:lts-slim

RUN apt-get update && \
    apt-get install -y git locales sudo vim-tiny && \
    apt-get clean && \
    rm -rf /var/lib/apt/lists/*

RUN sed -i -E 's/# (ja_JP.UTF-8)/\1/' /etc/locale.gen && locale-gen
RUN echo 'node ALL=(ALL) NOPASSWD: ALL' >> /etc/sudoers

ENV LANG ja_JP.UTF-8
ENV TZ Asia/Tokyo
ENV GENERATE_SOURCEMAP=false

USER node

コンテナで立ち上げる

一度VSCodeを閉じるのが確実かと思います。
再度VSCodeでこのプロジェクトを開きます。（⌘+o）

右下に「コンテナで再度開くかどうか」と言った表示が出るので、コンテナで開きます。
コンテナで開き終えたら次に進みます。

パッケージインストール

npm install

viteのポート設定

インストールも終えて、ウキウキでnpm run devでアプリを立ち上げたら表示されませんでした。
vite.config.tsにてポートの設定を行う必要がありました。

vite.config.ts
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  // 追記
  server: {
    host: true,
    port: 5173,
    cors: {
      origin: ['http://127.0.0.1:5173', 'http://127.0.0.1:5173/__devtools__/']
    }
  },
  // ここまで
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

アプリの立ち上げ

ここまでできたら完了です。

npm run dev

余談

DevContainersの公式ドキュメントに次の記述がありました。

Workspace files are mounted from the local file system or copied or cloned into the container. Extensions are installed and run inside the container, where they have full access to the tools, platform, and file system.

ワークスペース ファイルは、ローカル ファイル システムからマウントされるか、コンテナーにコピーまたはクローンされます。拡張機能はコンテナー内にインストールされ、実行され、ツール、プラットフォーム、およびファイル システムに完全にアクセスできます。

コンテナ上でリモートエクスプローラーを確認したところ、確かにマウントされていました。

参考

Discussion

ログインするとコメントできます