🛠️
VSCode Dev Container環境でPrettierを使った自動フォーマット設定
はじめに
VSCodeのDev Container環境で、長いHTMLタグやコードを自動的に整形したいと思ったことはありませんか？
例えば、このような1行の長いコード：
<div class="flex items-center justify-between bg-white shadow-md rounded-lg p-4 mb-4 hover:shadow-lg transition-shadow duration-200">コンテンツ</div>
これを保存時に自動的に以下のようにフォーマットしたい：
<div
class="flex items-center justify-between bg-white shadow-md rounded-lg p-4 mb-4 hover:shadow-lg transition-shadow duration-200"
>
コンテンツ
</div>
この記事では、Dev Container環境でPrettierを使った自動フォーマット設定の方法を解説します。
検証環境
- MacBook Pro (Apple M1 Pro)
- VSCode
- Dev Container (Node.js & TypeScript)
問題の背景
通常のVSCodeではPrettierの設定は比較的簡単ですが、Dev Container環境では以下の点で注意が必要です：
- コンテナ内でのみ有効な設定にする必要がある
- 拡張機能もコンテナ内にインストールする必要がある
- 設定が永続化されるようにする必要がある
解決方法
devcontainer.jsonの設定のみで完結
.devcontainer/devcontainer.jsonに以下を設定するだけで、Prettierによる自動フォーマットが動作します：
{
"name": "Node.js & TypeScript",
"image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
"customizations": {
"vscode": {
"extensions": [
"bradlc.vscode-tailwindcss",
"esbenp.prettier-vscode"
],
"settings": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.printWidth": 120,
"prettier.requireConfig": false,
"prettier.useEditorConfig": false
}
}
}
}
ポイント: .prettierrcファイルは作成不要です！devcontainer.json内のprettier.*設定で十分動作します。
設定の反映
-
コンテナを再ビルドします：
-
Ctrl+Shift+P→ "Dev Containers: Rebuild Container"
-
-
設定が反映されたかテストします：
- 長いHTMLタグを書いて保存
- または
Shift+Alt+F（Windows/Linux）/Shift+Option+F（Mac）で手動フォーマット
設定のポイント
重要な設定項目の解説
-
editor.formatOnSave: true: 保存時に自動フォーマット -
editor.defaultFormatter: デフォルトフォーマッターをPrettierに設定 -
prettier.printWidth: 120: 1行の最大文字数を120文字に設定 -
prettier.requireConfig: false: 重要: 設定ファイル（.prettierrc）がなくても動作させる -
prettier.useEditorConfig: false: EditorConfigファイルを使用しない
この設定により、.prettierrcファイルを作成せずとも、devcontainer.json内のprettier.*設定だけでフォーマットが動作します。
TailwindCSSとの組み合わせ
TailwindCSSを使用している場合は、以下の拡張機能も併用することをお勧めします：
"extensions": [
"bradlc.vscode-tailwindcss",
"esbenp.prettier-vscode"
]
トラブルシューティング
フォーマットが効かない場合
- コンテナの再ビルドを試す
-
出力パネルでPrettierのログを確認（
Ctrl+Shift+U→ "Prettier"） -
手動フォーマットでテスト（
Shift+Alt+F） - デフォルトフォーマッターの確認（右クリック → "Format Document With..."）
よくあるエラー
- 拡張機能の重複記載
- 設定ファイルの構文エラー
- ファイル形式に対応するフォーマッターの未設定
まとめ
Dev Container環境でのPrettier設定は、devcontainer.jsonファイルだけで完結します。.prettierrcファイルの作成は不要で、シンプルな設定で快適なフォーマット環境を構築できます。
特に：
- 長いHTMLタグの自動整形
- チーム開発での統一されたコードスタイル
- 保存時の自動フォーマット
- 設定ファイルの管理が簡単（devcontainer.jsonのみ）
といったメリットがあります。
この設定により、コードの可読性が大幅に向上し、開発効率も上がることでしょう。
参考リンク
- Dev Containers公式ドキュメント
- Prettier公式ドキュメント
- VSCode Dev Containers拡張機能
- VSCode Dev Containersでユーザーが追加した拡張機能を保持 - Dev Container環境での拡張機能管理について
Discussion