Skip to main content
Redhat Developers  Logo
  • Products

    Featured

    • Red Hat Enterprise Linux
      Red Hat Enterprise Linux Icon
    • Red Hat OpenShift AI
      Red Hat OpenShift AI
    • Red Hat Enterprise Linux AI
      Linux icon inside of a brain
    • Image mode for Red Hat Enterprise Linux
      RHEL image mode
    • Red Hat OpenShift
      Openshift icon
    • Red Hat Ansible Automation Platform
      Ansible icon
    • Red Hat Developer Hub
      Developer Hub
    • View All Red Hat Products
    • Linux

      • Red Hat Enterprise Linux
      • Image mode for Red Hat Enterprise Linux
      • Red Hat Universal Base Images (UBI)
    • Java runtimes & frameworks

      • JBoss Enterprise Application Platform
      • Red Hat build of OpenJDK
    • Kubernetes

      • Red Hat OpenShift
      • Microsoft Azure Red Hat OpenShift
      • Red Hat OpenShift Virtualization
      • Red Hat OpenShift Lightspeed
    • Integration & App Connectivity

      • Red Hat Build of Apache Camel
      • Red Hat Service Interconnect
      • Red Hat Connectivity Link
    • AI/ML

      • Red Hat OpenShift AI
      • Red Hat Enterprise Linux AI
    • Automation

      • Red Hat Ansible Automation Platform
      • Red Hat Ansible Lightspeed
    • Developer tools

      • Red Hat Trusted Software Supply Chain
      • Podman Desktop
      • Red Hat OpenShift Dev Spaces
    • Developer Sandbox

      Developer Sandbox
      Try Red Hat products and technologies without setup or configuration fees for 30 days with this shared Openshift and Kubernetes cluster.
    • Try at no cost
  • Technologies

    Featured

    • AI/ML
      AI/ML Icon
    • Linux
      Linux Icon
    • Kubernetes
      Cloud icon
    • Automation
      Automation Icon showing arrows moving in a circle around a gear
    • View All Technologies
    • Programming Languages & Frameworks

      • Java
      • Python
      • JavaScript
    • System Design & Architecture

      • Red Hat architecture and design patterns
      • Microservices
      • Event-Driven Architecture
      • Databases
    • Developer Productivity

      • Developer productivity
      • Developer Tools
      • GitOps
    • Secure Development & Architectures

      • Security
      • Secure coding
    • Platform Engineering

      • DevOps
      • DevSecOps
      • Ansible automation for applications and services
    • Automated Data Processing

      • AI/ML
      • Data Science
      • Apache Kafka on Kubernetes
      • View All Technologies
    • Start exploring in the Developer Sandbox for free

      sandbox graphic
      Try Red Hat's products and technologies without setup or configuration.
    • Try at no cost
  • Learn

    Featured

    • Kubernetes & Cloud Native
      Openshift icon
    • Linux
      Rhel icon
    • Automation
      Ansible cloud icon
    • Java
      Java icon
    • AI/ML
      AI/ML Icon
    • View All Learning Resources

    E-Books

    • GitOps Cookbook
    • Podman in Action
    • Kubernetes Operators
    • The Path to GitOps
    • View All E-books

    Cheat Sheets

    • Linux Commands
    • Bash Commands
    • Git
    • systemd Commands
    • View All Cheat Sheets

    Documentation

    • API Catalog
    • Product Documentation
    • Legacy Documentation
    • Red Hat Learning

      Learning image
      Boost your technical skills to expert-level with the help of interactive lessons offered by various Red Hat Learning programs.
    • Explore Red Hat Learning
  • Developer Sandbox

    Developer Sandbox

    • Access Red Hat’s products and technologies without setup or configuration, and start developing quicker than ever before with our new, no-cost sandbox environments.
    • Explore Developer Sandbox

    Featured Developer Sandbox activities

    • Get started with your Developer Sandbox
    • OpenShift virtualization and application modernization using the Developer Sandbox
    • Explore all Developer Sandbox activities

    Ready to start developing apps?

    • Try at no cost
  • Blog
  • Events
  • Videos

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

 

November 10, 2020
David Thompson
Related topics:
Developer ToolsIDEsJavaSpring Boot
Related products:
Developer Tools

Share:

    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:

    • Use the vscode-xml GitHub to report an issue.
    • See the vscode-xml documentation to learn more about the updates discussed in this article.
    • Visit the vscode-xml changelog for a list of the most recent updates.
    Last updated: November 8, 2023

    Recent Posts

    • How to run AI models in cloud development environments

    • How Trilio secures OpenShift virtual machines and containers

    • How to implement observability with Node.js and Llama Stack

    • How to encrypt RHEL images for Azure confidential VMs

    • How to manage RHEL virtual machines with Podman Desktop

    Red Hat Developers logo LinkedIn YouTube Twitter Facebook

    Products

    • Red Hat Enterprise Linux
    • Red Hat OpenShift
    • Red Hat Ansible Automation Platform

    Build

    • Developer Sandbox
    • Developer Tools
    • Interactive Tutorials
    • API Catalog

    Quicklinks

    • Learning Resources
    • E-books
    • Cheat Sheets
    • Blog
    • Events
    • Newsletter

    Communicate

    • About us
    • Contact sales
    • Find a partner
    • Report a website issue
    • Site Status Dashboard
    • Report a security problem

    RED HAT DEVELOPER

    Build here. Go anywhere.

    We serve the builders. The problem solvers who create careers with code.

    Join us if you’re a developer, software engineer, web designer, front-end designer, UX designer, computer scientist, architect, tester, product manager, project manager or team lead.

    Sign me up

    Red Hat legal and privacy links

    • About Red Hat
    • Jobs
    • Events
    • Locations
    • Contact Red Hat
    • Red Hat Blog
    • Inclusion at Red Hat
    • Cool Stuff Store
    • Red Hat Summit

    Red Hat legal and privacy links

    • Privacy statement
    • Terms of use
    • All policies and guidelines
    • Digital accessibility

    Report a website issue