この記事について
- Laravel docker 環境にprettierを導入するまでの手順を、自身でハマった部分も合わせて記載しています。
- ローカルPCにprettierをインストールせず、dockerコンテナ内でインストールするようにしています。
- PhpStormとVSCode両方で同じ設定を共有し、保存時にコード整形するようにしています。
使用マシン/ツール
macOS Ventura ver13.5.1
Docker Desktop ver4.17.0
PhpStorm 2023.2
VSCode ver1.81.1
ベースにしたLaravel docker環境
prettier プラグイン
導入手順
1. docker-laravelをインストール
公式のドキュメントどおりにインストールを実行します。
http://localhost/ が見れれば大丈夫です。
2. prettierをインストール
ローカルPCではなくdockerコンテナ内でインストールを実行します。
コンテナについては、既存のコンテナにnpmもしくはyarnを使えるようにするでも、新たに実行用のコンテナを作成するでもどちらもでいいと思います。
今回は、nodeコンテナを新規に作成し、yarnでprettierをインストールするようにしています。
nodeコンテナの作成
- /infra/node/Dockerfileを下記内容で作成
/infra/node/Dockerfile
FROM node:lts-buster-slim as base
WORKDIR /workspace
- docker-compose.override.ymlを下記内容で作成
docker-compose.override.yml
version: "3.9"
services:
node:
build:
context: .
dockerfile: ./infra/docker/node/Dockerfile
working_dir: /opt/src
command: [ "yarn", "run", "dev" ]
volumes:
- ./src:/opt/src
ports:
- 5173:5173
- Makefileを下記のように変更
Makefile
~省略~
init:
+ @make node-yarn-install
docker compose up -d --build
docker compose exec app composer install
docker compose exec app cp .env.example .env
docker compose exec app php artisan key:generate
docker compose exec app php artisan storage:link
docker compose exec app chmod -R 777 storage bootstrap/cache
@make fresh
~省略~
+ # node コンテナ yarn install 実行
+ node-yarn-install:
+ docker-compose run --rm node yarn install --frozen-lockfile
- 作成後は
make initを実行して、nodeコンテナが起動したことを確認します。
prettierをインストール
nodeコンテナに入って、下記コマンドを実行します。
yarn add --dev prettier@^2.8.1 @prettier/plugin-php@0.19.7
prettier設定ファイル「.prettierrc」を下記内容で作成
/src/.prettierrc
{
"parser": "php",
"plugins": [
"@prettier/plugin-php"
]
}
3. PhpStormとVSCodeの設定
PhpStormの設定
※事前にprettierのプラグインをインストールしてください
- PhpStormのメニューからSettings > 言語＆フレームワーク > JavaScript > Prettierを選択
- 下記画像のように設定し、適用 > OK を押下
- PhpStormを再起動します
VSCodeの設定
※事前にprettierとrun on saveのプラグインをインストールしてください
- /.vscode/settings.jsonを下記内容で作成します。
/.vscode/settings.json
{
"emeraldwalk.runonsave": {
"commands": [
{
"match": ".php$",
"cmd": "docker compose exec node yarn prettier /opt/${relativeFile} --write",
},
]
}
}
中で実行してる内容は、ざっくり下記のような感じです。
- nodeコンテナで編集したファイルに対してprettierをコマンドで実行する
- 整形後のファイルは、docker-composeのマウントによってローカルPCに反映される
-
/opt/${relativeFile}はコンテナ内のファイルパスなので、設定に応じて変更してください
以上で設定は完了になります。
最終的に追加したファイルの設置状態は下記となります。
※追加、変更したファイルのみ表示
./
├── .vscode
│ └── settings.json
├── Makefile
├── docker-compose.override.yml
├── infra
│ └── docker
│ └── node
│ └── Dockerfile
└── src
└── .prettierrc
せっかくなのでblade用のprettierもインストールしてみた
blade.phpのコード整形は、上記までにインストールしたprettierでは対応できないようなので別途下記をインストールしました。
公式ドキュメントに沿って、nodeコンテナに入って下記コマンドを実行
yarn add --dev @shufo/prettier-plugin-blade@1.8.13
今回prettierのバージョンが2系なので、ドキュメントに記載されたとおり1.8系の最新をインストールしました。
PhpStormの設定
- PhpStormのメニューからSettings > 言語＆フレームワーク > JavaScript > Prettierを選択
- .prettierrcを下記のように変更
/src/.prettierrc
{
"parser": "php",
"plugins": [
"@prettier/plugin-php",
+ "@shufo/prettier-plugin-blade" // 追加
+ ],
+ "overrides": [
+ {
+ "files": ["*.blade.php"],
+ "options": {
+ "parser": "blade",
+ "tabWidth": 4
+ }
+ }
]
}
- 「次のファイルに実行」の箇所に「blade.phpを追加」して適用
- PhpStormを再起動します
VSCodeの設定
VSCodeについては特に追加の設定なく、コード整形が反映されました。
感想
仕事でも何度か使用したことがあるので簡単に導入できるかと思いましたが、思いのほか苦戦しました。
この記事がお役に立てれば幸いです。
参考
PhpStorm VSCode
Discussion