XML autocomplete and validation in VSCode from xsd files

Editing XML files with VSCode can be a bit of a hassle, especially when it comes to lacking autocomplete and validation features.
The following guide will show you how I got XSD validation working in VSCode.

Setting Up XML Autocomplete and validation

Follow these steps to enable XML autocomplete and linting in VSCode:

1. Install the Red Hat XML Language Server Extension

Open VSCode and navigate to the Extensions view by clicking on the Extensions icon in the sidebar. Search for “Red Hat XML Language Server” and click the Install button to install the extension.
In some cases this is enough for the extension to do it’s magic, but it is only really reliable when the xsd file is next to the current xml file on the local machine.

2. Configure the XML Catalog

The XML Catalog is a feature that allows you to map XML namespaces to their corresponding XSD files. Here’s how to configure it:

Create an XML file (e.g., xml-catalog.xml) and define namespace-to-XSD mappings within it. Here’s an example taken from the extensions documentation:

<catalog xmlns="urn:oasis:names:tc:entity:xmlns:xml:catalog">
  <rewriteSystem
    systemIdStartString="http://www.example.com/"
    rewritePrefix="path/to/your/local/xsd/file.xsd"
  />
</catalog>

In the above example, replace http://www.example.com/ with the XML namespace you want to map, and path/to/your/local/xsd/file.xsd with the path to your XSD file on your local machine.

There are few ways to map xsd files so here’s my catalog I use for smart contracts:

<catalog xmlns="urn:oasis:names:tc:entity:xmlns:xml:catalog">
    <uri
        name="https://paiwise.tagroot.io/Schema/StateMachines.xsd"
        uri="https://paiwise.tagroot.io/Schema/StateMachines.xsd" />
    <uri
        name="https://paiwise.tagroot.io/Schema/NeuroFeatures.xsd"
        uri="https://paiwise.tagroot.io/Schema/NeuroFeatures.xsd" />
</catalog>

3. Configure VSCode Settings

Open your VSCode settings (File > Preferences > Settings) and search for “Catalogs” You should see a setting named “XML: Catalogs.” Click the “Add item” butten, and add the path to your XML Catalog file.

4. Done

Now when you edit XML files it will recognize namespaces defined in the catalog and will show you all valid tags if you just type <

#xml, #vscode