VS Code + Docker + Vuetify 3でVue 3のWebアプリを作る

これはなに

Vuetify 3でWebアプリを作成する流れをまとめたもの。 Dockerを利用して、環境構築も再現性があるようにした。

あくまで自分が作るとき用の備忘録なので、個人最適化されたところが多々あることに留意してほしい。

環境

Windows 10
Docker Desktop
VS Code
- 拡張機能Dev Containers
Vue 3
TypeScript
Vuetify 3.0.6

VS Codeの設定ファイルをつくる

.vscode/config.jsonを作成し、下記を書き込む。

.vscode/config.json

{
  "files.eol": "\n",
  "editor.tabSize": 2,
  "path-intellisense.mappings": {
    "@/": "${workspaceFolder}/app/src/",
  }
}

デフォルトの改行コードをLFにする
タブのサイズを2にする
任意 : 拡張機能path-intellisenseでpath aliasを処理できるようにする

Dockerfileをつくる

.devcontainerフォルダを作成。 Dockerfileを作る。

.devcontainer/Dockerfile

FROM node:19-bullseye-slim

RUN apt -y update \
    && apt install -y git

VS CodeのDev Containersでコンテナにアタッチする

VS Codeの拡張機能Dev Containersを利用して、Dockerfileをビルド、VS Codeをコンテナにアタッチする。

そのために、.devcontainerフォルダ内にdevcontainer.jsonを作る。 Vue 3ではVeturは非推奨なので、代わりにVolarを入れる。その他のextensionsは好みで入れる。

.devcontainer/devcontainer.json

{
  "name": "FF14-tools-vue3",
  "dockerFile": "Dockerfile",
  "forwardPorts": [
    3000,
    4173
  ],
  "extensions": [
    // 必須級
    "Vue.volar",
    "Vue.vscode-typescript-vue-plugin",
    // 任意
    "ms-vscode.vscode-typescript-next",
    "streetsidesoftware.code-spell-checker",
    "naumovs.color-highlight",
    "saikou9901.evilinspector",
    "fabiospampinato.vscode-highlight",
    "oderwat.indent-rainbow",
    "Gruntfuggly.todo-tree",
    "eamodio.gitlens",
    "mhutchie.git-graph",
    "christian-kohler.path-intellisense",
    "shardulm94.trailing-spaces",
    // 設定しないと動かない
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "stylelint.vscode-stylelint"
  ]
}

VS CodeでCtrl + Shuft + Pのショートカットから、Dev ContainersのReopen in Containerを実行する。すると、自動でDockerfileがビルドされ、VS Codeをコンテナにアタッチできる。

無事にビルドが通ってアタッチできたら、全体をGit管理下に置く。

git init
touch .gitignore

VolarのTake Over Modeを有効化する

VueでTypeScriptを使い、かつVS Codeで拡張機能Volarを使う場合は、Take Over Modeを有効にすることがVue公式で推奨されている。これを有効にすると、Volarに実装されたVue固有のサポートを利用できるようになる。

有効化のしかたはVue公式にあるとおりだが、ここにも記載しておく。

VS Codeの拡張機能のタブを開く
@builtin typescriptで検索する
「TypeScript and JavaScript Language Features」が出てくるので、歯車マークから「Disable(Workspace)」を選択する

アプリを生成する

Vuetify 3のアプリを作成する。 Vuetifyの公式チュートリアルによると、下記コマンドで作れる。

yarn create vuetify

色々聞かれるので答える。 Project nameは任意の名前で良い。本稿ではappにしたていで記述する。その他のパッケージは必要に応じて入れる。

$ yarn create vuetify
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vuetify@1.0.5" with binaries:
      - create-vuetify
[############] 12/12
Vuetify.js - Material Component Framework for Vue

✔ Project name: … app
✔ Which preset would you like to install? › Custom (Choose your features)
✔ Use TypeScript? … Yes
✔ Use Vue Router? … Yes
✔ Use Pinia? … No
✔ Use ESLint? … Yes
✔ Would you like to install dependencies with yarn, npm, or pnpm? › yarn

すると、Project nameの「app」という名前でディレクトリが作成され、中にいろいろファイルが生成される。

その後、appディレクトリに移動して、アプリを立ち上げる。

cd app
yarn dev

http://localhost:3000/ にアクセスすると、デフォルトアプリが開く。

起動を確認したら、gitでcommitする。

git add ../
git commit -m "Create an initial Vuetify 3 app."

ホットリロードが効くようにする

Viteでは、WSL上だとホットリロードされないことがある。 Docker DesktopはバックグラウンドでWSLを利用するため、この現象が発生する。

これを回避するために、vite.config.tsに下記を追記する。

app/vite.config.ts

  server: {
    port: 3000,
+   watch: {
+     usePolling: true
+   }
  },

これでホットリロードが効くようになる。確認したのち、gitでcommitする。

git add vite.config.ts
git commit -m "Change Vite settings for hot-reload."

tsconfigを変更する

Vuetifyが生成してくれるtsconfig.jsonは個人的に不足があるため、compilerOptionsに下記を追記する。

app/tsconfig.json

{
  "compilerOptions": {
    // ...
    "importsNotUsedAsValues": "error",
    "forceConsistentCasingInFileNames": true,
    // ...
  }
}

その後、gitでcommitする。

git add tsconfig.json
git commit -m "Change tsconfig."

VS CodeでESLintを動作させる

VS CodeにESLintの拡張機能を追加し、設定ファイルconfig.jsonに下記を追記する。そうするとVS CodeがESLintを自動で実行してくれる。