Featured image: VS Code and XML

Red Hat's XML extension for Visual Studio Code (VS Code) has improved significantly since the last release. This article is an overview of the most notable updates in the vscode-xml extension 0.14.0 release. Improvements include embedded settings documentation, customizable document outlines, links for seamless XML catalog navigation, and error aggregation for schema validation.

Embedded settings documentation

We've improved the documentation for developers setting up XML document validation. We also added detailed, embedded descriptions for all of the available settings. The embedded documentation is the same documentation that is available from the GitHub repository for vscode-xml. You can now access the documentation directly within VS Code without requiring an internet connection.

To view the documentation in VS Code, open the command palette (Ctrl+Shift+P) and select XML: Open XML Documentation, as shown in Figure 1.

The command palette shows the option to open the documentation homepage.
Search “XML Documentation” in the command palette in order to find the command to open the documentation home page

Figure 2 shows the vscode-xml documentation homepage.

The documentation home page has links to several pages that describe how to use and configure the extension
The documentation home page has links to several pages that describe how to use and configure the extension

The setting descriptions now contain links to the documentation. As shown in Figure 3, you can use these links to get more information about a particular setting.

There is a link in the description of the Empty Elements XML formatting option in the VS Code settings page. Clicking on it navigates to the related section in the XML Documentation, which provides a more detailed description of the option, along with examples.
There is a link in the description of the Empty Elements XML formatting option in the VS Code settings page. Clicking on it navigates to the related section in the XML Documentation, which provides a more detailed description of the option, along with examples.
Figure 3: Click a link to view the detailed documentation for that setting.

The new, embedded documentation should provide a quick start for developers using the vscode-xml extension.

Show the referenced grammar

If an XML document is associated with one or more XSD or DTD schemas, a Grammars entry now appears in the document outline, as shown in Figure 4.

The Grammars entry in this screenshot shows information about the referenced schema dressSize.xsd.
The “Grammars” entry in the document outline shows information about the referenced schema “dressSize.xsd”

The document outline includes the URL location of each schema that is referenced in the document. The outline also lists whether or not the schema is being held within the local cache. As well, the outline lists the binding method that the document uses to associate with the schema. This feature should assist developers with validating XML documents with schemas.

Customize XML symbols outlines

The XML symbols outline displays DOM elements, processing instructions, and declarations for DTD elements, entities, and attribute lists by default. The outline does not automatically display DOM attributes and text nodes. Excluding attributes and text nodes improves performance, but developers sometimes need to see these elements.

With this update, we introduced a new option for configuring the symbols outline. Figure 5 shows a sample Maven POM with the default outline.

Sample Maven document, showing the default outline
Sample Maven document, showing the default outline

Figure 5: The default outline in a Maven document.">

When viewing a Maven pom.xml, it is important to be able to see the content of the text nodes. Figure 6 shows the updated document displaying these text elements.

The outline displays the content of the elements that contain text
The outline displays the content of the elements that contain text

Figure 6: The updated outline showing text elements for the same document.">

Using the new XML symbols filters

The vscode-xml extension provides a new setting called xml.symbols.filters, which you can use to select which DOM nodes are displayed as symbols in the outline. The snippet below shows the setting to display text nodes in a pom.xml files:

"xml.symbols.filters": [
  // Declaration of symbols filter for maven 'pom.xml' to show all text nodes in the outline.
  {
    "pattern": "pom.xml",
    "expressions": [
      {
        "xpath": "//text()"
      }
    ]
  }
]

Using xml.symbols.filters for Spring XML

The filter is versatile for different types of files. For example, when editing Spring XML files, you probably want to see the @id attributes. Here is the configuration to show @id attributes in a Spring XML file outline:

"xml.symbols.filters": [
  // Declaration of symbols filter for Spring beans to show all @id of the elements in the outline.
  {
    "pattern": "bean*.xml",
    "expressions": [
      {
        "xpath": "//@id"
      }
    ]
  }
]

Figure 7 shows an outline displayed in VS Code with the Spring XML @id attributes.

A Spring XML file with id attributes shown.

Figure 7: The outline now includes @id attributes.">

Note that the pattern entry is a glob pattern that the extension uses to select the files that it will filter. The expressions entry is an array of XPaths that the extension uses to filter the symbols. See the symbols filters documentation for more information about the new XML symbols filters.

Aggregate schema errors

If you reference an invalid schema, errors appear in the document that references the schema. In this update, we've grouped these errors. Schema errors are now shown at the range in the document where the schema is referenced. As an example, consider Figure 8, which shows a broken XSD schema.

The grocery-list element is defined so that several food elements are its children. However, these food item elements themselves are not defined, resulting in the schema being broken.
The grocery-list element is defined so that several food elements are its children. However, these food item elements themselves are not defined, resulting in the schema being broken.

Figure 8: A broken XSD schema displayed in VS Code.">

Now, if we make an XML document that is associated with the schema using xsi:noNamespaceSchemaLocation, the errors are reported on the xsi:noNamespaceSchemaLocation attribute, as shown in Figure 9.

Hovering over the reference to the schema shows a popup that lists the 5 errors that the schema has. You can click on the blue text in order to open the schema to the location of the errors.
Hovering over the reference to the schema shows a popup that lists the 5 errors that the schema has. You can click on the blue text in order to open the schema to the location of the errors.

Figure 9: Hover over a reference to a broken schema to see a list of errors.">

The error aggregation also works for external DTD references, xsi:schemaLocation, and the xml-model processing instruction.

Reports and quick fixes for missing closing tag errors

This update improves the diagnostics for missing closing tags in elements. The before-and-after screens in Figure 10 let you see the improvements to error reporting for a closing tag with no corresponding opening tag.

Figure 10: Changes to error reporting for a closing tag that has no corresponding opening tag.

The screens in Figure 11 highlight the difference in error reporting for an opening tag that has no corresponding closing tag.

Needs alt text.
Figure 11: Needs title.
Figure 11: Changes to error reporting for an opening tag that has no corresponding closing tag.

The screens in Figure 12 highlight the improvements to error reporting for an incomplete closing tag.

Needs alt text.
Figure 12: Needs title.
Figure 12: Changes to error reporting for an incomplete closing tag.

We also improved quick fixes for missing, incomplete, or invalid closing tags, as shown in Figure 13.

Quick fixes update incomplete closing tags in a malformed XML document.
Figure 11: Quick fixes update incomplete closing tags in a malformed XML document.

Figure 13: A quick fix updates incomplete closing tags in a malformed XML document.">

Document links in catalogs

We added new document links for the uri and catalog attributes in XML catalogs. These attributes are used to link catalogs to schemas and other catalogs. The links will point to the correct file if you use the xml:base attribute with the <group> element. Figure 14 demonstrates using the new document links between catalogs and entries.

Links create seamless navigation between catalogs and their entries.
You can use the new document links to accomplish seamless navigation between linked catalogs and their entries.
Figure 14: Use document links to navigate between linked catalogs and their entries.

New formatting options for xsi:schemaLocation

Inspired by other XML tools, we implemented new formatting styles for xsi:schemaLocation. You can now choose between three formats shown in Figure 15 through Figure 17.

Figure 15 shows the result of selecting none for the xsi:schemaLocation format.

Selecting 'none' leaves the content unchanged.
None: Leaves the content unchanged.

Figure 16 shows the result of selecting on element.

The 'on element' format adds new lines after each namespace and URI.
On element: Adds newlines after each namespace and URI.

Figure 17 shows the format for on pair.

The 'on pair' format adds new lines after each namespace-URI pair, so that each line contains one schema reference.
On pair: Adds newlines after each namespace/URI pair, so that each line contains one schema reference.

Conclusion

The updated XML extension for VS Code brings many features for editing and navigating XML documents in VS Code. We want to thank the following contributors who worked to make this update amazing:

  • Alex Boyko (BoykoAlex)
  • Max Hohenegger (Treehopper)
  • Ryan Zegray (rzgry)
  • tcheng (a2975667)
  • Yatao Li (yatli)
  • Simon Sobisch (GitMensch)

You can use the following channels to get more information about the XML extension for VS Code and report any issues with the 0.14.0 release:

Last updated: November 8, 2023