VSCodeでdocker-compose.ymlをPrettierから回避する

はじめに

VSCode + Docker + Prettier + Next.js + ... といった環境で開発している際、docker-compose.ymlはPrettier以外でフォーマットしようとしたら、大分しょうもないところでつまずいたので書き留めておきます。

docker-compose.ymlはYAMLじゃなかった

VSCodeを使う際、とりあえずPrettierを入れて下のようにシングルクォーテーションを有効にし、settings.jsonでファイル保存時にフォーマットするように設定しています。

.prettierrc

{
  "singleQuote": true,
  ...
}

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  ...
}

ただこのままだと、PrettierはYAMLも対象になっているためdocker-compose.yml内の""が''に変換されてしまいます。
これでも動きはするのですが、公式のコードを見ると""で書かれているのでなるべく合わせたいわけです。

個別設定でYAML専用の拡張機能のフォーマッターに変えようと下のように変更したところ、困った事に反映されませんでした😇。

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
+  "[YAML]": {
+    "editor.defaultFormatter": "redhat. scode-yaml"
+  }
  ...
}

解決

どうやら個別設定ではYAMLとdocker-compose.ymlは別物として認識されるようです。
ということはdocker専用のフォーマッターがあるのかなと思ったら、Microsoftの拡張機能のDockerにフォーマッターが付いていたので最終的に下のように書き換えて万事解決しました。

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[dockercompose]": {
    "editor.defaultFormatter": "ms-azuretools.vscode-docker"
  }
  ...
}