はじめに

WSL + Ubuntu + Docker環境でPHPを用いた開発をしていて、csfixerでコード整形する際に都度コマンドをたたくの面倒
ファイル保存時に自動で整形したいな
でもホスト側のWindowsにPHPとかcomposerとか入れたくないな
- なんならnodeとかも
devcontainerでvscodeをコンテナに接続して保存時にcsfixerコマンドとか実行してみよう
こんなことをやった時のメモです

環境

ホストOSはWindows11 pro
WSL + UbuntuでDockerコンテナにPHP環境構築されてる状態
devContainerが使えるIDE
- vscode(今回はコレを前提としている)
- InteliJIdea
- PHPStorm
- など

やりかた

Windows側でvscodeに拡張機能をインストール

WSL
Dev Containers

WSL内でプロジェクトルートに .devcontainer/devcontainer.json を準備

Dev Containerの名前
使用するcompose.ymlへのパス
Dev Container側で使用するvscodeの拡張の指定
整形したいファイルの設定
- php
- vue
- など
コンテナ内でのphpのパス

{
  "name": "sample-devcontainer-name",
  "dockerComposeFile": "使用するcompose.ymlへのパス",
  "service": "compose.ymlに記載された接続したいサービス名",
  "workspaceFolder": "/var/www/app",
  "shutdownAction": "stopCompose",

  "customizations": {
    "vscode": {
      "extensions": [
        "bmewburn.vscode-intelephense-client",
        "junstyle.php-cs-fixer",
        "esbenp.prettier-vscode",
        "Vue.volar"
      ],
      "settings": {
        "[php]": {
          "editor.defaultFormatter": "junstyle.php-cs-fixer"
        },
        "[vue]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode",
          "editor.formatOnSave": true
        },
        "[javascript]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode",
          "editor.formatOnSave": true
        },

        "php-cs-fixer.onsave": true,
        "php-cs-fixer.executablePath": "/var/www/app/vendor/bin/php-cs-fixer",
        "php-cs-fixer.config": "/var/www/app/src/.php-cs-fixer.dist.php",
        "php-cs-fixer.ignorePHPVersion": true,

        "php.validate.executablePath": "/usr/local/bin/php"
      }
    }
  }
}

WSLからvscodeを起動

.devcontainerが存在するプロジェクトルートで code . としてコマンドを実行
少しするとvscodeが実行される
vscodeの左下のステータス表示にWSL:ubuntuと表示されていることを確認
vscodeが.devcontainerを見つけてコンテナで再度開きなおすか聞いてくるのでそうする
vscodeが再度開きなおされると、先ほどの左下にWSL:Ubuntuと表示されていた箇所がdevcontainer.jsonで指定したnameの値となっているはず

vscodeでファイル編集して保存

phpファイルを編集して保存した際に整形されることを確認

まとめ

docker compose exec hogehoge-app composer csfixer foo/bar/Buzz.php

とコマンドを実行してもいいがファイル保存時に実行してもらえるのは便利だなと思った。

以上。