VS CodeでXMLを快適に編集するおすすめ拡張機能｜整形・検証・ツリー表示まで徹底解説

「VS CodeでXMLを編集しているけど、なんだか使いにくい…」
「インデントがぐちゃぐちゃで見づらい」
「タグの閉じ忘れをよくやってしまう」
「大きなXMLファイルの構造が把握しにくい」
「属性の入力ミスや構文エラーが多発する」

XMLファイルを編集していて、こんなふうに悩んだことはありませんか？

実は、Visual Studio Codeに適切な拡張機能を入れるだけで、XMLの編集体験が劇的に向上します。自動整形、タグ補完、構文チェック、ツリー表示など、「最初からこれが欲しかった！」と思うような機能が使えるようになります。

この記事では、VS CodeでXMLを編集するなら絶対に入れておきたいおすすめ拡張機能を、具体的な使い方や設定方法と一緒に詳しく紹介します。

なぜXML専用の拡張機能が必要なのか？

XMLファイルの特徴と課題

XMLはデータ交換や設定ファイルで広く使われていますが、編集時に特有の課題があります：

課題	問題点	VS Code標準での対応
タグの対応関係	開始タグと終了タグの対応が複雑	基本的なハイライトのみ
属性の管理	属性名や値の入力ミス	補完機能なし
構造の可視化	ネストが深いと構造が見えない	アウトライン機能が限定的
構文エラー	Well-formed XMLの検証	エラー表示が不十分
スキーマ検証	XSDやDTDとの整合性確認	検証機能なし

拡張機能で解決できること

適切な拡張機能を導入することで、以下のような劇的な改善が期待できます：

Before（標準のVS Code）：

<root><person id="1"><name>太郎</name><age>25</age><address><city>東京</city><zip>100-0001</zip></address></person><person id="2"><name>花子</name><age>30</age><address><city>大阪</city><zip>530-0001</zip></address></person></root>

After（拡張機能導入後）：

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <person id="1">
    <name>太郎</name>
    <age>25</age>
    <address>
      <city>東京</city>
      <zip>100-0001</zip>
    </address>
  </person>
  <person id="2">
    <name>花子</name>
    <age>30</age>
    <address>
      <city>大阪</city>
      <zip>530-0001</zip>
    </address>
  </person>
</root>

必須のXML拡張機能

1. XML Tools – オールインワンの最強拡張

基本情報

項目	内容
開発者	Josh Johnson
ダウンロード数	200万+
評価	★★★★★
最終更新	定期的に更新

主な機能

🎨 シンタックスハイライト

<!-- カラフルで見やすい色分け -->
<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
  <book id="1" category="fiction">
    <title>XMLプログラミング入門</title>
    <author>田中太郎</author>
    <price currency="JPY">2980</price>
  </book>
</bookstore>

🔧 自動整形（Pretty Print）

• ワンクリックでXMLを美しく整形
• インデントレベルの自動調整
• 改行の最適化

💡 タグ補完とバリデーション

• タグの自動閉じ補完
• 属性名の補完
• Well-formed XMLの検証

🔍 XPathクエリ実行

• XPath式でノードを検索
• 結果をハイライト表示
• デバッグに便利

インストールと基本設定

インストール手順：

1. VS Codeの拡張機能パネル（Ctrl+Shift+X）を開く
2. 「xml tools」で検索
3. 「XML Tools by Josh Johnson」を選択してインストール

基本設定例：

{
  // XML Tools の設定
  "xmlTools.enableXmlTreeView": true,
  "xmlTools.enableXmlTreeViewCursorSync": true,
  "xmlTools.enforcePrettySelfClosingTagOnFormat": true,
  "xmlTools.removeCommentsOnMinify": false,
  
  // XMLファイルの基本設定
  "[xml]": {
    "editor.defaultFormatter": "DotJoshJohnson.xml",
    "editor.formatOnSave": true,
    "editor.insertSpaces": true,
    "editor.tabSize": 2
  }
}

実践的な使用例

整形機能の使用：

<!-- 整形前：読みにくいXML -->
<config><database><host>localhost</host><port>3306</port><name>mydb</name></database><logging><level>info</level><file>/var/log/app.log</file></logging></config>

<!-- 整形後：Shift + Alt + F または右クリック → Format Document -->
<config>
  <database>
    <host>localhost</host>
    <port>3306</port>
    <name>mydb</name>
  </database>
  <logging>
    <level>info</level>
    <file>/var/log/app.log</file>
  </logging>
</config>

XPathクエリの実行：

1. コマンドパレット（Ctrl+Shift+P）を開く
2. 「XML Tools: Evaluate XPath」を選択
3. XPath式を入力（例：//book[@category='fiction']）
4. 該当ノードがハイライト表示される

2. XML (Red Hat) – 高機能なスキーマ対応拡張

基本情報と特徴

Red Hatが提供する公式のXML拡張機能で、YAMLで有名なRed Hat製の信頼性の高いツールです。

主な機能：

• XSDスキーマによる高度なバリデーション
• インテリセンス（タグ・属性の補完）
• ドキュメントアウトライン（ツリー表示）
• DTD・XML Schema・RelaxNG対応
• 名前空間の適切な処理

インストールと設定

{
  // Red Hat XML拡張の設定
  "xml.validation.enabled": true,
  "xml.validation.schema.enabled": "always",
  "xml.completion.autoCloseTags": true,
  "xml.format.enabled": true,
  
  // スキーマファイルの関連付け
  "xml.fileAssociations": [
    {
      "pattern": "**/*.xml",
      "systemId": "http://example.com/schema.xsd"
    },
    {
      "pattern": "**/config/*.xml",
      "systemId": "file:///C:/schemas/config.xsd"
    }
  ],
  
  // カタログファイルの設定
  "xml.catalogs": [
    "file:///C:/schemas/catalog.xml"
  ]
}

スキーマ検証の実例

XSDスキーマファイル（book.xsd）：

<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xs:element name="bookstore">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="book" maxOccurs="unbounded">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="title" type="xs:string"/>
              <xs:element name="author" type="xs:string"/>
              <xs:element name="price" type="xs:decimal"/>
            </xs:sequence>
            <xs:attribute name="id" type="xs:integer" use="required"/>
            <xs:attribute name="category" type="xs:string"/>
          </xs:complexType>
        </xs:element>
      </xs:sequence>
    </xs:complexType>
  </xs:element>
</xs:schema>

XMLファイル（books.xml）：

<?xml version="1.0" encoding="UTF-8"?>
<bookstore xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:noNamespaceSchemaLocation="book.xsd">
  <book id="1" category="programming">
    <title>XML入門</title>
    <author>田中太郎</author>
    <price>2980</price>
  </book>
  <!-- スキーマに従った補完が効く -->
  <book id="2" category="web">
    <title><!-- ここでタイトルの入力補完 --></title>
    <author><!-- ここで著者の入力補完 --></author>
    <price><!-- 数値型の検証 --></price>
  </book>
</bookstore>

3. XML Tree View – 構造可視化の専門ツール

基本情報

XMLファイルの階層構造をサイドバーにツリー形式で表示する専用拡張機能です。

主な機能

📁 ツリー表示

• XMLの階層構造を視覚化
• 折りたたみ・展開が自由自在
• 大規模XMLファイルでのナビゲーション

🎯 ジャンプ機能

• ツリーのノードをクリックで該当行にジャンプ
• 編集とプレビューの連携

🔄 リアルタイム更新

• ファイル編集時の即座な反映

設定例

{
  // XML Tree View の設定
  "xmlTreeView.autoReveal": true,
  "xmlTreeView.enableCursorSync": true,
  "xmlTreeView.collapseLevel": 2,
  
  // サイドバーでの表示設定
  "workbench.view.alwaysShowHeaderActions": true
}

実例での活用

複雑なXMLファイルの場合：

<!-- config.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<application>
  <database>
    <connections>
      <connection name="primary">
        <host>db1.example.com</host>
        <port>5432</port>
        <credentials>
          <username>app_user</username>
          <password>secret123</password>
        </credentials>
      </connection>
      <connection name="backup">
        <host>db2.example.com</host>
        <port>5432</port>
        <credentials>
          <username>backup_user</username>
          <password>backup456</password>
        </credentials>
      </connection>
    </connections>
  </database>
  <logging>
    <appenders>
      <appender name="console" type="console">
        <pattern>%d{ISO8601} [%thread] %-5level %logger{36} - %msg%n</pattern>
      </appender>
      <appender name="file" type="file">
        <file>/var/log/application.log</file>
        <pattern>%d{ISO8601} [%thread] %-5level %logger{36} - %msg%n</pattern>
      </appender>
    </appenders>
  </logging>
</application>

Tree Viewでの表示例：

📁 application
├── 📁 database
│   └── 📁 connections
│       ├── 📁 connection[name="primary"]
│       │   ├── 📄 host: "db1.example.com"
│       │   ├── 📄 port: "5432"
│       │   └── 📁 credentials
│       │       ├── 📄 username: "app_user"
│       │       └── 📄 password: "secret123"
│       └── 📁 connection[name="backup"]
│           ├── 📄 host: "db2.example.com"
│           ├── 📄 port: "5432"
│           └── 📁 credentials
│               ├── 📄 username: "backup_user"
│               └── 📄 password: "backup456"
└── 📁 logging
    └── 📁 appenders
        ├── 📁 appender[name="console"]
        │   └── 📄 pattern: "%d{ISO8601}..."
        └── 📁 appender[name="file"]
            ├── 📄 file: "/var/log/application.log"
            └── 📄 pattern: "%d{ISO8601}..."

その他の便利な拡張機能

4. Auto Rename Tag – タグ名の自動同期

機能

• 開始タグを変更すると終了タグも自動変更
• HTMLとXMLの両方に対応
• ネストしたタグでも正確に動作

使用例

<!-- <book> を <product> に変更すると -->
<!-- Before -->
<book id="1">
  <title>XMLガイド</title>
</book>

<!-- After（自動で終了タグも変更される） -->
<product id="1">
  <title>XMLガイド</title>
</product>

5. XML Formatter – 高度な整形オプション

機能

• カスタマイズ可能な整形ルール
• 属性の改行設定
• コメントの処理方法選択

設定例

{
  "xmlformatter.maxLineLength": 120,
  "xmlformatter.indentLevel": 2,
  "xmlformatter.attributeWrap": "force",
  "xmlformatter.preserveComments": true
}

6. XMLDoc Comment – ドキュメンテーション支援

機能

<!-- XMLDoc形式のコメント支援 -->
<method name="processData">
  <!-- 
    @param data 処理対象のデータ
    @return 処理結果
    @throws ProcessingException 処理エラーの場合
  -->
  <parameter name="data" type="string"/>
  <return type="object"/>
</method>

用途別の推奨設定

Web開発者向け設定（HTML/XML混在）

{
  // HTML/XMLの共通設定
  "[xml]": {
    "editor.defaultFormatter": "DotJoshJohnson.xml",
    "editor.formatOnSave": true
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  
  // Auto Rename Tagの設定
  "auto-rename-tag.activationOnLanguage": ["html", "xml", "xhtml"],
  
  // Emmetの設定
  "emmet.includeLanguages": {
    "xml": "html"
  }
}

データ交換用XML設定

{
  // データ用XMLの設定
  "xml.validation.enabled": true,
  "xml.completion.autoCloseTags": true,
  
  // 大きなファイル用の最適化
  "xml.maxItemsComputed": 5000,
  "xml.validate.enabled": true,
  
  // 名前空間の処理
  "xml.completion.autoCloseRemovesContent": false
}

設定ファイル用XML設定

{
  // 設定ファイル用の厳密なチェック
  "xml.validation.schema.enabled": "always",
  "xml.validation.disallowDocTypeDeclaration": false,
  
  // カスタムスキーマの関連付け
  "xml.fileAssociations": [
    {
      "pattern": "**/config/**/*.xml",
      "systemId": "file:///schemas/config-schema.xsd"
    },
    {
      "pattern": "**/spring/**/*.xml",
      "systemId": "http://www.springframework.org/schema/beans/spring-beans.xsd"
    }
  ]
}

効率的なワークフロー設定

自動保存と自動整形

{
  // 自動保存の設定
  "files.autoSave": "onDelay",
  "files.autoSaveDelay": 1000,
  
  // 保存時の自動処理
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  
  // XMLファイル専用設定
  "[xml]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "editor.detectIndentation": false,
    "editor.defaultFormatter": "DotJoshJohnson.xml",
    "editor.formatOnType": true
  }
}

キーボードショートカットの設定

// keybindings.json
[
  {
    "key": "ctrl+shift+x",
    "command": "xmlTools.evaluateXPath",
    "when": "editorTextFocus && resourceLangId == xml"
  },
  {
    "key": "ctrl+shift+f",
    "command": "editor.action.formatDocument",
    "when": "editorTextFocus && resourceLangId == xml"
  },
  {
    "key": "ctrl+shift+m",
    "command": "xmlTools.minifyXml",
    "when": "editorTextFocus && resourceLangId == xml"
  }
]

トラブルシューティング

よくある問題と解決法

1. 整形が正しく動作しない

症状： Format Documentが期待通りに動作しない

解決法：

{
  // デフォルトフォーマッターを明示的に設定
  "[xml]": {
    "editor.defaultFormatter": "DotJoshJohnson.xml"
  },
  
  // 他の拡張機能との競合を避ける
  "xmlTools.enforcePrettySelfClosingTagOnFormat": true
}

2. スキーマ検証が効かない

症状： XSDファイルが認識されない

解決法：

{
  // ファイル関連付けの確認
  "files.associations": {
    "*.xml": "xml",
    "*.xsd": "xml",
    "*.xsl": "xml"
  },
  
  // スキーマの明示的な指定
  "xml.fileAssociations": [
    {
      "pattern": "*.xml",
      "systemId": "schema.xsd"
    }
  ]
}

3. パフォーマンスが悪い

症状： 大きなXMLファイルで動作が重い

解決法：

{
  // パフォーマンス最適化
  "xml.maxItemsComputed": 5000,
  "xmlTools.enableXmlTreeViewCursorSync": false,
  
  // 大きなファイルでの制限
  "editor.largeFileOptimizations": true
}

エラーメッセージの解読

Well-formed XMLエラー

エラー例：

The element type "book" must be terminated by the matching end-tag "</book>".

解決方法：

• タグの対応関係をチェック
• Auto Rename Tag拡張機能の活用
• XML Toolsの構文チェック機能を使用

スキーマ検証エラー

エラー例：

Element 'unknown-element' is not allowed under element 'root'.

解決方法：

• XSDスキーマファイルの確認
• 要素名のスペルチェック
• 名前空間の設定確認

実践的な使用例

Web設定ファイルの編集

web.xml（Java Webアプリケーション）：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
         http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         version="3.0">
  
  <display-name>My Web Application</display-name>
  
  <servlet>
    <servlet-name>MainServlet</servlet-name>
    <servlet-class>com.example.MainServlet</servlet-class>
    <init-param>
      <param-name>config</param-name>
      <param-value>/WEB-INF/config.properties</param-value>
    </init-param>
  </servlet>
  
  <servlet-mapping>
    <servlet-name>MainServlet</servlet-name>
    <url-pattern>/main/*</url-pattern>
  </servlet-mapping>
  
  <filter>
    <filter-name>EncodingFilter</filter-name>
    <filter-class>com.example.EncodingFilter</filter-class>
  </filter>
  
  <filter-mapping>
    <filter-name>EncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  
</web-app>

データ交換用XMLの作成

商品データのXML：

<?xml version="1.0" encoding="UTF-8"?>
<catalog xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="catalog.xsd">
  
  <products>
    <product id="P001" category="electronics">
      <name>スマートフォン</name>
      <description>最新の5G対応スマートフォン</description>
      <price currency="JPY">89800</price>
      <specifications>
        <spec name="display">6.1インチ</spec>
        <spec name="storage">128GB</spec>
        <spec name="camera">12MP</spec>
      </specifications>
      <availability>
        <inStock>true</inStock>
        <quantity>150</quantity>
        <supplier>TechCorp</supplier>
      </availability>
    </product>
    
    <product id="P002" category="computers">
      <name>ノートパソコン</name>
      <description>軽量でパワフルなノートPC</description>
      <price currency="JPY">129800</price>
      <specifications>
        <spec name="cpu">Intel Core i7</spec>
        <spec name="memory">16GB</spec>
        <spec name="storage">512GB SSD</spec>
      </specifications>
      <availability>
        <inStock>true</inStock>
        <quantity>75</quantity>
        <supplier>CompuTech</supplier>
      </availability>
    </product>
  </products>
  
</catalog>

VS Code設定ファイル完全版

完全版settings.json

{
  // === XML基本設定 ===
  "xml.validation.enabled": true,
  "xml.validation.schema.enabled": "always",
  "xml.completion.autoCloseTags": true,
  "xml.format.enabled": true,
  "xml.hover": true,
  
  // === エディタ設定 ===
  "[xml]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "editor.detectIndentation": false,
    "editor.defaultFormatter": "DotJoshJohnson.xml",
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.autoIndent": "advanced"
  },
  
  // === XML Tools設定 ===
  "xmlTools.enableXmlTreeView": true,
  "xmlTools.enableXmlTreeViewCursorSync": true,
  "xmlTools.enforcePrettySelfClosingTagOnFormat": true,
  "xmlTools.removeCommentsOnMinify": false,
  "xmlTools.xmlFormatterImplementation": "classic",
  
  // === ファイル関連付け ===
  "files.associations": {
    "*.xml": "xml",
    "*.xsd": "xml",
    "*.xsl": "xml",
    "*.xslt": "xml",
    "*.dtd": "xml",
    "*.rng": "xml"
  },
  
  // === スキーマ設定 ===
  "xml.fileAssociations": [
    {
      "pattern": "**/*.xml",
      "systemId": "schema.xsd"
    }
  ],
  
  // === Auto Rename Tag設定 ===
  "auto-rename-tag.activationOnLanguage": ["xml", "html", "xhtml"],
  
  // === その他の便利設定 ===
  "files.autoSave": "onDelay",
  "files.autoSaveDelay": 1000,
  "editor.renderWhitespace": "boundary",
  "editor.guides.indentation": true,
  "editor.bracketPairColorization.enabled": true,
  
  // === パフォーマンス設定 ===
  "xml.maxItemsComputed": 5000,
  "editor.largeFileOptimizations": true
}

まとめ：VS CodeでXML編集を劇的に改善しよう

適切な拡張機能を導入することで、VS CodeでのXML編集体験は劇的に向上します。

今回紹介した必須拡張機能

拡張機能	主な用途	重要度
XML Tools	整形・XPath・基本機能	★★★★★
XML (Red Hat)	スキーマ検証・高度な補完	★★★★☆
XML Tree View	構造可視化・ナビゲーション	★★★☆☆
Auto Rename Tag	タグ名同期・編集効率化	★★★☆☆

導入効果のまとめ

生産性の向上：

• 自動整形でインデント問題を解決
• タグ補完で入力ミスを削減
• ツリー表示で構造把握が容易

コード品質の向上：

• スキーマ検証で仕様準拠を保証
• 構文エラーの早期発見
• 一貫したフォーマット