はじめに
- 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
とコマンドを実行してもいいがファイル保存時に実行してもらえるのは便利だなと思った。
以上。