VSCodeでYAMLを編集する方法について

採用はこちら

VSCode(Visual Studio Code)では、.yamlまたは.yml形式のファイルを開くだけでYAMLを編集できます。

ただし、YAMLはインデントやデータ構造のミスによってエラーが発生しやすいため、実務で利用する場合はYAML向けの拡張機能を導入するのがおすすめです。

VSCodeでは、入力補完や構文チェック、フォーマット、JSON Schemaを利用した検証などを組み合わせることで、YAMLを効率よく編集できます。

Docker ComposeやGitHub Actions、Kubernetes、CI/CDの設定ファイルを扱う場合にも役立ちます。

目次

VSCodeでYAMLファイルを作成する

.yamlまたは.ymlファイルを作成する

VSCodeでYAMLを編集する場合は、拡張子が.yamlまたは.ymlのファイルを作成します。

たとえば、次のようなファイルです。

config.yaml
settings.yml
compose.yaml
workflow.yml
deployment.yaml

VSCodeでは、.yamlと.ymlの両方をYAMLファイルとして扱えます。

VSCodeにおけるYAMLの言語識別子はyamlです。

YAMLの基本的な書き方

YAMLでは、キーと値を:で区切って記述します。

app:
  name: sample-app
  version: "1.0"

server:
  host: localhost
  port: 8080

階層構造はインデントによって表現します。

YAMLではインデントそのものがデータ構造の意味を持つため、インデントのズレには注意が必要です。

VSCodeにYAML拡張機能をインストールする

Red HatのYAML拡張機能を利用する

VSCodeでYAMLを本格的に編集する場合は、Red Hatが提供している「YAML」拡張機能を利用すると便利です。

拡張機能IDは次のとおりです。

redhat.vscode-yaml

VSCode左側にある「拡張機能」を開き、「YAML」と検索すると見つけられます。

Red HatのYAML拡張機能では、主に次の機能を利用できます。

  • YAMLの構文チェック
  • 入力補完
  • ホバーによる情報表示
  • 自動フォーマット
  • アウトライン表示
  • JSON Schemaによる検証
  • SchemaStoreとの連携
  • Kubernetes Schemaのサポート

単純なテキスト編集よりも、入力ミスを発見しやすい環境を構築できます。

YAMLを入力補完しながら編集する

Ctrl + Spaceで候補を表示する

YAML拡張機能を利用すると、入力中にキーや値の候補を表示できます。

WindowsやLinuxでは、一般的に次のショートカットで入力候補を表示できます。

Ctrl + Space

macOSでは、通常は次のショートカットです。

Control + Space

特にJSON Schemaが設定されているYAMLでは、利用可能なプロパティや値が候補として表示されるため、設定項目を覚えていなくても入力しやすくなります。

YAMLの構文エラーをチェックする

インデントミスを確認する

YAMLでは、インデントが正しくないと構文エラーや意図しないデータ構造になる場合があります。

たとえば、次のYAMLはインデントが一致していません。

server:
  host: localhost
 port: 8080

正しくは、次のように同じ階層のインデントを揃えます。

server:
  host: localhost
  port: 8080

Red HatのYAML拡張機能を導入していれば、こうした構文上の問題をVSCode上で確認できます。

JSON Schemaが関連付けられている場合は、単純なYAML構文だけでなく、設定項目や値の型が正しいかどうかも検証できます。

YAMLではスペースでインデントする

タブではなくスペースを使用する

YAMLのインデントには、基本的にスペースを使用します。

タブ文字をインデントとして使用するのは避けましょう。

たとえば、次のようにスペースで階層を表します。

database:
  host: localhost
  port: 3306
  options:
    timeout: 30
    reconnect: true

Red HatのYAML拡張機能では、YAMLファイルについてスペースを使用する設定や、2スペースのタブサイズがデフォルトとして用意されています。

2スペースは必須ではない

YAMLそのものが「必ず2スペースでインデントしなければならない」と定めているわけではありません。

重要なのは、同じ階層でインデント幅を統一することです。

ただし、VSCodeや多くのYAMLファイルでは2スペースがよく利用されています。

プロジェクトにコーディングルールがある場合は、そのルールに合わせるのが適切です。

YAMLを自動整形する

Format Documentを使用する

YAML拡張機能では、YAMLファイルをフォーマットできます。

コマンドパレットから、

Format Document

を実行します。

OSごとの代表的なデフォルトショートカットは次のとおりです。

Windows:Shift + Alt + F
macOS:Shift + Option + F
Linux:Ctrl + Shift + I

ショートカットが変更されている環境では、コマンドパレットから実行するほうが確実です。

保存時に自動フォーマットする

YAMLを頻繁に編集する場合は、保存時に自動フォーマットするよう設定しておくと便利です。

settings.jsonに次のように設定します。

{
  "[yaml]": {
    "editor.formatOnSave": true
  }
}

YAMLだけに設定を適用したい場合は、[yaml]という言語別設定を利用します。

フォーマッターを明示する

複数のフォーマッターをインストールしている場合は、利用するフォーマッターを明示すると競合を避けやすくなります。

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

Red HatのYAML拡張機能をメインのYAMLフォーマッターとして使用する場合に便利な設定です。

YAMLで配列を記述する

ハイフンを使って配列を作成する

YAMLでは、-を使って配列を記述できます。

languages:
  - JavaScript
  - TypeScript
  - Python

オブジェクトの配列も作成できます。

users:
  - name: Taro
    role: admin

  - name: Hanako
    role: editor

配列の中にオブジェクトを記述するときも、インデント位置を揃えることが重要です。

YAMLでコメントを書く

#を使ってコメントを記述する

YAMLでは、#を使ってコメントを記述できます。

# Webサーバーの設定
server:
  host: localhost
  port: 8080 # HTTPポート

VSCodeのコメント切り替えショートカットも利用できます。

WindowsやLinuxでは一般的に、

Ctrl + /

macOSでは、

Cmd + /

です。

複数行を選択してコメントアウトしたい場合にも便利です。

YAMLのアウトラインを表示する

大きなYAMLファイルを効率よく移動する

Red HatのYAML拡張機能では、YAMLの構造をアウトラインとして表示できます。

たとえば、次のようなYAMLがあるとします。

application:
  name: sample

database:
  host: localhost

logging:
  level: info

application、database、loggingなどの項目を一覧から確認し、目的の場所へ移動しやすくなります。

WindowsやLinuxでは、次のショートカットからシンボル検索も利用できます。

Ctrl + Shift + O

数百行規模のKubernetes ManifestやCI/CD設定を編集するときに便利です。

JSON Schemaを使ってYAMLを検証する

JSON Schemaとは

JSON Schemaは、YAMLやJSONなどのデータ構造に対してルールを定義する仕組みです。

YAML編集では、Schemaを利用することで次のような情報を検証できます。

  • 使用できるプロパティ
  • 必須項目
  • データ型
  • 使用可能な値
  • データ構造
  • 階層関係

Schemaが設定されていれば、入力補完の精度も高くなります。

yaml.schemasでSchemaを関連付ける

VSCodeのsettings.jsonでは、yaml.schemasを使ってYAMLファイルとSchemaを関連付けられます。

{
  "yaml.schemas": {
    "./schema.json": "config.yaml"
  }
}

この設定では、config.yamlがschema.jsonに基づいて検証されます。

複数のYAMLファイルを対象にする場合は、ファイルパターンを指定できます。

{
  "yaml.schemas": {
    "./schema.json": [
      "config/*.yaml",
      "config/*.yml"
    ]
  }
}

プロジェクト独自の設定ファイルを作成している場合に便利です。

YAMLファイル内からSchemaを指定する

modelineを使ってSchemaを設定する

YAMLファイルの先頭にSchemaを直接指定する方法もあります。

# yaml-language-server: $schema=./schema.json

server:
  host: localhost
  port: 8080

この方法であれば、VSCodeのsettings.jsonを変更しなくても、YAMLファイル自身に使用するSchemaを指定できます。

プロジェクトメンバー間でSchema設定を共有したい場合にも便利です。

SchemaStoreを利用する

一般的な設定ファイルは自動認識される場合がある

Red HatのYAML拡張機能はSchemaStoreと連携できます。

SchemaStoreには、さまざまなツールやサービス向けのJSON Schemaが公開されています。

そのため、よく知られているYAMLファイルでは、ファイル名や配置場所などから適切なSchemaが自動的に関連付けられる場合があります。

すべてのYAMLファイルに手動でSchemaを設定しなければならないわけではありません。

YAML 1.1とYAML 1.2を切り替える

デフォルトではYAML 1.2を利用する

Red HatのYAML拡張機能では、基本的にYAML 1.2が利用されます。

古いシステムとの互換性などでYAML 1.1が必要な場合は、次のように設定できます。

{
  "yaml.yamlVersion": "1.1"
}

新しくYAMLを作成する場合は、特別な理由がなければYAML 1.2を利用するのが一般的です。

YAML 1.1と1.2では、一部の値の解釈などに違いがあるため注意しましょう。

Docker ComposeのYAMLを編集する

ComposeファイルもYAML形式で記述する

Docker Composeでは、サービス構成をYAMLで記述します。

services:
  web:
    image: nginx
    ports:
      - "8080:80"

Docker Composeでは、YAMLとして正しいだけではなく、Compose仕様として正しい設定である必要があります。

そのため、構文チェックに加えて、Compose向けのSchemaやDocker関連のVSCode拡張機能を利用すると便利です。

専用拡張機能を利用している場合は、Red Hat YAML拡張機能側のSchema検出と役割が重なる場合もあります。

VSCodeではこうした競合を避けるための仕組みも用意されています。

GitHub ActionsのYAMLを編集する

Workflowファイルを編集する

GitHub ActionsのWorkflowもYAML形式で記述します。

通常は次のディレクトリに配置します。

.github/workflows/

たとえば、次のようなWorkflowを記述できます。

name: CI

on:
  push:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Run tests
        run: npm test

ただし、この例はYAML構造を説明するための簡易例です。

実際にNode.jsプロジェクトのCIを実行する場合は、Node.jsのセットアップや依存関係のインストールが必要になることがあります。

たとえば、次のような構成です。

steps:
  - uses: actions/checkout@v4

  - uses: actions/setup-node@v4
    with:
      node-version: 22

  - run: npm ci

  - run: npm test

GitHub Actionsでは、jobs、steps、uses、run、with、envなど独自の設定項目があります。

そのため、YAMLとして正しいかどうかだけでなく、GitHub Actionsとして正しいかどうかも確認する必要があります。

GitHub Actions向けの専用拡張機能やSchemaを併用すると、入力補完や検証をより活用できます。

KubernetesのYAMLを編集する

ManifestをYAMLで記述する

Kubernetesでは、DeploymentやServiceなどのリソースをYAMLで記述するケースが一般的です。

apiVersion: apps/v1
kind: Deployment

metadata:
  name: sample-app

spec:
  replicas: 3

  selector:
    matchLabels:
      app: sample

  template:
    metadata:
      labels:
        app: sample

    spec:
      containers:
        - name: sample
          image: nginx

Kubernetesには非常に多くの設定項目があります。

そのため、Schemaによる補完や検証を活用すると、プロパティ名の入力ミスや設定漏れを防ぎやすくなります。

Kubernetes Schemaを設定する

Red HatのYAML拡張機能では、Kubernetes Schemaを利用できます。

たとえば、次のように関連付けられます。

{
  "yaml.schemas": {
    "kubernetes": "k8s/*.yaml"
  }
}

Kubernetes Manifestを大量に編集する場合には特に便利です。

環境によってはKubernetesバージョンを指定する設定も利用できます。

YAMLのおすすめ設定

settings.jsonを調整する

VSCodeでYAMLを頻繁に編集するのであれば、次のような設定にしておくと使いやすくなります。

{
  "[yaml]": {
    "editor.defaultFormatter": "redhat.vscode-yaml",
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "editor.formatOnSave": true
  }
}

この設定では、

  • YAMLのインデントにスペースを使用する
  • インデント幅を2スペースにする
  • Red Hat YAML拡張機能をフォーマッターとして使用する
  • 保存時に自動フォーマットする

という編集環境になります。

プロジェクトで別のインデント幅やフォーマッターが指定されている場合は、そのルールを優先しましょう。

YAMLを編集するときの注意点

インデントを統一する

YAMLでは、インデントによってデータ構造を表現します。

database:
  host: localhost
  port: 3306

同じ階層にある項目は、同じ位置に揃える必要があります。

コピー&ペーストをした後などは、インデントが崩れていないか確認しましょう。

コロンの後にスペースを入れる

一般的なキーと値の組み合わせでは、:の後にスペースを入れます。

name: sample

次のような記述は避けましょう。

name:sample

意図したキーと値の組み合わせとして解釈されない可能性があります。

文字列として扱いたい値は引用符で囲む

YAMLでは、値の内容によって数値や真偽値、nullなどとして解釈される場合があります。

文字列として扱いたい値は引用符で囲むと安全です。

version: "1.0"
code: "00123"
enabled: "true"

特に、ID、コード、郵便番号、バージョン番号などは、数値ではなく文字列として扱うケースがあります。

YAML 1.1と1.2の違いにも注意する

YAML 1.1と1.2では、一部の値の解釈が異なります。

古いYAMLファイルを編集するときは、そのファイルがどのバージョンを前提としているか確認すると安全です。

YAMLとして認識されない場合の対処法

Language Modeを確認する

.yamlや.ymlファイルを開いても補完や構文チェックが機能しない場合は、VSCode右下に表示されているLanguage Modeを確認します。

Plain Textなどになっている場合はクリックし、

YAML

を選択します。

YAMLとして正しく認識されれば、YAML向けの言語機能を利用できるようになります。

VSCodeでYAMLを効率よく編集するポイント

VSCodeでは、YAMLファイルをそのままテキストとして編集できます。

しかし、実務で利用する場合は、Red HatのYAML拡張機能を導入し、

構文チェック
↓
入力補完
↓
自動フォーマット
↓
JSON Schemaによる検証

という流れを活用するのがおすすめです。

特にYAMLでは、インデントミスやプロパティ名の入力ミスが設定エラーにつながりやすいため、Language ServerやSchemaによる支援が効果的です。

Docker Compose、GitHub Actions、Kubernetes、CI/CDなど、YAMLを頻繁に扱う環境では、フォーマット設定やSchema設定まで整えておくことで、VSCodeを使ったYAML編集をより効率化できます。

以上、VSCodeでYAMLを編集する方法についてでした。

最後までお読みいただき、ありがとうございました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次