VS CodeでYAMLファイルをプレビュー表示する方法｜見やすく管理する便利ツールも紹介

KubernetesやCI/CDの設定ファイル、Docker Composeなど、最近はさまざまな場面で「YAML（ヤムル）」を使うことが増えました。しかし、YAMLファイルはインデント（空白の位置）がとても重要で、見た目のミスが原因で動かないことも多いですよね。

そこで便利なのが、Visual Studio Code（VS Code）でのYAMLプレビュー機能 です。この記事では、VS CodeでYAMLファイルをきれいに確認する方法や、おすすめの拡張機能を初心者向けにわかりやすく紹介します。

そもそもYAMLってどんなファイル？

YAMLの基本

YAML（YAML Ain’t Markup Language）は、データを階層的に表現できるテキストフォーマットです。JSONよりもシンプルに書けるので、設定ファイルや構成ファイルとしてよく使われます。

YAMLの特徴

読みやすさ

人間が読みやすい形式
コメントを書ける（# を使用）
複雑な階層構造も直感的に理解できる

インデントの重要性

スペースで階層を表現する
タブとスペースの混在はエラーの原因
インデントのズレで簡単にエラーになる

YAMLの基本構文

基本的な構造

# Docker Composeの例
version: "3.8"
services:
  web:
    image: nginx:latest
    ports:
      - "80:80"
    environment:
      - NODE_ENV=production
  database:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: secret

リスト形式

# 配列の表現
fruits:
  - apple
  - banana
  - orange

# または
fruits: [apple, banana, orange]

YAMLがよく使われる場面

Kubernetes：Pod、Service、Deploymentの設定
CI/CD：GitHub Actions、GitLab CI、Jenkins
Docker Compose：コンテナの構成管理
Ansible：自動化の設定ファイル
Hugo、Jekyll：静的サイトジェネレーターの設定

YAMLは見やすい反面、ちょっとのズレでエラーになるため、正しくプレビューしながら編集するのが大切です。次はVS Codeでの基本的な確認方法を紹介します。

VS CodeでYAMLをきれいに表示する

VS Code標準機能

VS CodeにはYAMLファイルを見やすく表示するための基本機能がそろっています：

シンタックスハイライト

キーワードや値が色分けされる
構造が視覚的にわかりやすくなる

インデント支援

自動インデント機能
インデント幅の調整可能

折りたたみ機能

大きなYAMLファイルの一部を折りたたんで表示
アウトライン表示で構造を把握

基本設定の調整

インデント設定

VS CodeでYAMLファイルを開いて、以下の設定を調整しましょう：

Ctrl + ,（Mac: Cmd + ,）で設定画面を開く
「yaml」で検索
以下の項目を設定：

{
  "[yaml]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false
  }
}

ファイル関連付け

特定の拡張子をYAMLとして認識させる場合：

{
  "files.associations": {
    "*.yml": "yaml",
    "*.yaml": "yaml",
    "docker-compose*.yml": "yaml"
  }
}

アウトライン表示の活用

エクスプローラーサイドバーの「アウトライン」セクションを使うと、YAMLの構造をツリー形式で確認できます：

エクスプローラーサイドバーを開く
「アウトライン」セクションを展開
YAMLファイルの構造が階層表示される

これだけでもYAMLを管理するのがかなり楽になります。さらに便利に使うためには拡張機能を入れるのがおすすめです。

YAMLをプレビューできるおすすめ拡張機能

YAML（redhat.vscode-yaml）

Red Hatが提供する公式のYAML拡張機能です。

主な機能

リアルタイムバリデーション

文法エラーを即座に検出
エラー箇所が波線で表示される
ツールチップで具体的なエラー内容を確認

スキーマサポート

JSON Schemaを使った入力補完
設定値の候補を自動表示
型チェック機能

フォーマット機能

自動インデント調整
構造の整理

インストール方法

VS Codeの拡張機能タブ（Ctrl + Shift + X）を開く
「YAML」で検索
「YAML」（Red Hat製）をインストール

設定例

{
  "yaml.schemas": {
    "https://json.schemastore.org/github-workflow.json": "/.github/workflows/*.yml"
  },
  "yaml.format.enable": true,
  "yaml.validate": true
}

Kubernetes（ms-kubernetes-tools.vscode-kubernetes-tools）

Kubernetesの設定を扱う場合に特に便利な拡張機能です。

主な機能

リソースプレビュー

Kubernetesリソースの構造をツリー表示
リソース間の関係性を視覚化

クラスター管理

VS Code内でクラスター状態を確認
リソースの一覧表示

デプロイ支援

YAMLファイルから直接デプロイ
設定の事前検証

インストールと使用方法

拡張機能タブで「Kubernetes」を検索
Microsoft製のKubernetes拡張をインストール
コマンドパレット（Ctrl + Shift + P）で「Kubernetes」を検索して各種機能にアクセス

その他の便利な拡張機能

Prettier（esbenp.prettier-vscode）

YAMLファイルの自動フォーマットに対応：

{
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

YAML Sort（pascalreitermann93.vscode-yaml-sort）

YAMLファイルのキーを自動でソートする拡張機能です。

これらの拡張機能を使えばYAMLの構造を見やすくしたり、エラーを事前に発見したりできます。次は具体的なプレビュー例を紹介します。

実際にプレビューして確認する

エラー検出の例

Red HatのYAML拡張を入れると、以下のようにYAMLファイルを開くだけでエラーを検出できます：

正しいYAML

# Docker Composeファイル
version: "3.8"
services:
  web:
    image: nginx:alpine
    ports:
      - "80:80"
    depends_on:
      - database
  database:
    image: postgres:13
    environment:
      POSTGRES_PASSWORD: secret

エラーがあるYAML

# インデントエラーの例
version: "3.8"
services:
  web:
    image: nginx:alpine
  ports:  # この行のインデントが間違っている
      - "80:80"

エラーがある場合：

該当行に赤い波線が表示される
マウスホバーで「Incorrect indentation」などのメッセージ
問題パネルにエラーの詳細が表示される

Kubernetesリソースのプレビュー

Kubernetes拡張では、以下のようにリソースをツリー表示できます：

# deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: nginx-deployment
spec:
  replicas: 3
  selector:
    matchLabels:
      app: nginx
  template:
    metadata:
      labels:
        app: nginx
    spec:
      containers:
      - name: nginx
        image: nginx:1.21
        ports:
        - containerPort: 80

アウトライン表示では：

Deployment: nginx-deployment
├─ metadata
│  └─ name: nginx-deployment
├─ spec
│  ├─ replicas: 3
│  ├─ selector
│  │  └─ matchLabels
│  │     └─ app: nginx
│  └─ template
│     ├─ metadata
│     │  └─ labels
│     │     └─ app: nginx
│     └─ spec
│        └─ containers
│           └─ [0]
│              ├─ name: nginx
│              ├─ image: nginx:1.21
│              └─ ports
│                 └─ [0]
│                    └─ containerPort: 80

このように構造を視覚的に確認できます。

YAMLをもっと便利に管理するテクニック

自動フォーマットの設定

Prettierの設定

.prettierrc ファイルを作成してYAMLフォーマットを調整：

{
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": false,
  "quoteProps": "preserve"
}

保存時の自動フォーマット

VS Codeの設定で保存時に自動フォーマットを有効にする：

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

スキーマを使った入力補完

GitHub Actionsの例

.vscode/settings.json に以下を追加：

{
  "yaml.schemas": {
    "https://json.schemastore.org/github-workflow.json": [
      "/.github/workflows/*.yml",
      "/.github/workflows/*.yaml"
    ]
  }
}

これにより、GitHub Actionsの設定ファイルで入力補完が使えるようになります。

ファイル分割とモジュール化

大きなYAMLファイルは複数に分割して管理：

Docker Composeの分割例

# docker-compose.yml
version: "3.8"
services:
  web:
    extends:
      file: services/web.yml
      service: web
  database:
    extends:
      file: services/database.yml
      service: database

# services/web.yml
version: "3.8"
services:
  web:
    image: nginx:alpine
    ports:
      - "80:80"

デバッグとトラブルシューティング

よくあるエラーと対処法

インデントエラー

# ❌ 間違い
services:
web:  # インデントが足りない
  image: nginx

# ✅ 正解
services:
  web:  # 正しいインデント
    image: nginx

タブとスペースの混在

VS Codeの「空白文字の表示」（Ctrl + Shift + P → “Toggle Render Whitespace”）で確認
設定で常にスペースを使用するよう設定

引用符の問題

# 数値として扱われる
port: 80

# 文字列として扱いたい場合
port: "80"

まとめ

VS CodeでYAMLをプレビューしながら編集すれば、インデントや構造のミスを大幅に減らせます。重要なポイントをまとめると：

必須の拡張機能

Red HatのYAML拡張：リアルタイムバリデーションとスキーマサポート
Kubernetes拡張：Kubernetesリソースの構造プレビュー
Prettier：自動フォーマット機能

効率的な設定

インデント設定の統一（スペース2つ推奨）
保存時の自動フォーマット
スキーマファイルによる入力補完

実践的なテクニック

アウトライン表示での構造確認
エラー箇所のリアルタイム表示
ファイル分割による管理の簡素化

そもそもYAMLってどんなファイル？

YAMLの基本

YAMLの特徴

YAMLの基本構文

基本的な構造

リスト形式

YAMLがよく使われる場面

VS CodeでYAMLをきれいに表示する

VS Code標準機能

基本設定の調整

インデント設定

ファイル関連付け

アウトライン表示の活用

YAMLをプレビューできるおすすめ拡張機能

YAML（redhat.vscode-yaml）

主な機能

インストール方法

設定例

Kubernetes（ms-kubernetes-tools.vscode-kubernetes-tools）

主な機能

インストールと使用方法

その他の便利な拡張機能

Prettier（esbenp.prettier-vscode）

YAML Sort（pascalreitermann93.vscode-yaml-sort）

実際にプレビューして確認する

エラー検出の例

正しいYAML

エラーがあるYAML

Kubernetesリソースのプレビュー

YAMLをもっと便利に管理するテクニック

自動フォーマットの設定

Prettierの設定

保存時の自動フォーマット

スキーマを使った入力補完

GitHub Actionsの例

ファイル分割とモジュール化

Docker Composeの分割例

デバッグとトラブルシューティング

よくあるエラーと対処法

まとめ

Youtube

カテゴリー別人気記事

コメント