Skip to content
Documentation and sample for using VS Code custom data format
JavaScript
Branch: master
Clone or download
Latest commit edae233 Sep 16, 2019
Permalink
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
CODE_OF_CONDUCT.md
LICENSE Initial commit Aug 28, 2019
README.md Add web-data Sep 4, 2019
SECURITY.md Initial commit Aug 28, 2019

README.md

vscode-custom-data

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

Synopsis

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.

Example

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

Documentation

Schemas and Versioning

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.

Samples

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.

Contributing

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 https://cla.opensource.microsoft.com.

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 opencode@microsoft.com with any additional questions or comments.

You can’t perform that action at this time.