vscode-xml 0.14.0: A more customizable XML extension for VS Code

vscode-xml 0.14.0: A more customizable XML extension for VS Code

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.

Figure 1: Select XML: Open XML Documentation to open the documentation homepage.

Figure 2 shows the vscode-xml documentation homepage.

The documentation homepage has links to pages that describe how to use and configure the extension.

Figure 2: The vscode-xml documentation homepage and user guide.

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.

The VS Code settings page includes a link to the Empty Elements XML formatting option.

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.

Everything you need to grow your career.

With your free Red Hat Developer program membership, unlock our library of cheat sheets and ebooks on next-generation application development.

SIGN UP

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.

Figure 4: Click the Grammars entry for information about a referenced schema.

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.

A 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 updated outline displays the content of text elements.

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 with several food elements as its children, but these elements are not defined.

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 opens a pop-up that lists the five errors in the schema. You can click on then 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.

Comparing two screens shows the improvements to error reporting for a closing tag that has 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.

Comparing two screens shows the improvements to error reporting for an opening tag that has no corresponding closing tag.

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.

Comparing two screens shows the improvements to error reporting for an incomplete closing tag.

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 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.

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.

Figure 15: Select None to leave the content unchanged.

Figure 16 shows the result of selecting on element.

The 'on element' format adds new lines after each namespace and URI.

Figure 16: Select On element to add new lines 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.

Figure 17: Select On pair to add new lines after each namespace-URI pair.

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:

Share