Skip to content
Documentation and sample for using VS Code custom data format
Branch: master
Clone or download
Latest commit edae233 Sep 16, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
media Add WC sample and update description Aug 29, 2019
samples Update sample Sep 16, 2019
web-data Add ARIA link Sep 4, 2019
.gitignore Initial commit Aug 28, 2019
LICENSE Initial commit Aug 28, 2019 Add web-data Sep 4, 2019 Initial commit Aug 28, 2019


Documentation, sample and data for using VS Code's HTML/CSS custom data format.


VS Code ships with rich language feature support for HTML/CSS, such as auto-completion and hover information. The core of these language support are implemented in vscode-html-languageservice and vscode-css-languageservice. In the past, these libraries were coupled to outdated schemas that define HTML/CSS entities. Custom data decouples these libraries from the data they use and allows VS Code to offer up-to-date support for latest HTML/CSS proposals or frameworks built on top of HTML/CSS.


Take this HTML auto-completion example:


  • vscode-html-languageservice determines that it should provide a list of tag names, such as div, span, p.
  • By default, VS Code provides data extracted from HTML spec to vscode-html-languageservice, so <| completes all HTML tags described in the HTML spec.
  • The html.customData setting and contributes.html.customData allows you to extend this list to include your own definition of HTML tags.

On the one hand, we continuously curate the data VS Code provides to the HTML/CSS language services. For example, VS Code pulls data from mdn/data and mdn/browser-compat-data to provide latest information on CSS properties' usage, syntax and browser compatibility. By continously following the latest web spec, VS Code can provide latest information & up-to-date language support for new HTML/CSS entities.

CSS completion

On the other hand, for users and framework authors who build new technologies and frameworks on top of HTML/CSS, custom data offers an easy way for them to add support for their custom frameworks. For example:

  • WebComponents-based frameworks can statically analyze their components and emit a JSON file following the custom data schema to get language support.
  • Vue language server can analyze Vue components and load custom data into its vscode-html-languageservice based Language Server to provide Vue-specific auto-completions.
WebComponents completion


Schemas and Versioning


  • Schemas are versioned in the format of <Major>.<Minor>.
  • Minor changes are backwards compatible. Custom data that satisfies V1.X spec would be valid according to V1.0 spec.
  • Major changes introduce breaking changes. Custom data that satisfies V2.X spec would likely be invalid according to V1.0 spec.


Web Data

/web-data contains the data collection pipelines and the actual data being used in the VS Code HTML extension and CSS extension. It pulls data from sources such as HTML/CSS spec and MDN and massages them into the custom data format ready to use.


This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact with any additional questions or comments.

You can’t perform that action at this time.