Benutzerdefiniertes Datenformat: Sich entwickelnde HTML- und CSS-Sprachfunktionen

24. Februar 2020 von Pine Wu, @octref

Das Web entwickelt sich weiter und mit ihm seine Sprachen. Neue Entitäten landen weiterhin in den HTML- und CSS-Spezifikationen. Custom Elements und Houdini ermöglichen es Benutzern, HTML- und CSS-Semantiken zu erweitern. Viele Entwickler verwenden heute Programmiersprachen, die HTML und CSS einbetten. Obwohl HTML und CSS zunehmend flexibel eingesetzt werden, hinkt die Editor-Unterstützung für neue Funktionen oft hinterher.

Um die HTML- und CSS-Sprachunterstützung in Visual Studio Code zu modernisieren, haben wir das Custom Data Format entwickelt, ein deklaratives JSON-Format zur Beschreibung von HTML- und CSS-Entitäten. Die HTML- und CSS-Sprachserver von VS Code können Daten lesen, die in diesem Format definiert sind, und Sprachunterstützung für die neu definierten HTML- und CSS-Entitäten bereitstellen.

In diesem Blogbeitrag erklären wir das Datenformat und wie Benutzer und Erweiterungsautoren davon profitieren können.

Verwendung des Custom Data Formats

VS Code stellt Informationen über HTML/CSS-Entitäten in Auto-Vervollständigung und Hover-Informationen bereit

HTML and CSS Language Features

Mit dem Custom Data Format können Benutzer einfach neue HTML/CSS-Entitäten definieren und Auto-Vervollständigungen, Hover-Informationen und andere Sprachfeatures erhalten.

Um zu beginnen, können Benutzer eine JSON-Datei html.html-data.json schreiben

{
  "version": 1.1,
  "tags": [
    {
      "name": "my-button",
      "description": "My button. You should use it as in `<my-button type='alert'></mybutton>`.",
      "references": [
        {
          "name": "Bootstrap buttons",
          "url": "https://getbootstrap.com/docs/4.0/components/buttons/"
        }
      ]
    }
  ]
}

Definieren Sie dann einen html.customData-Wert in Ihren Benutzer- oder Arbeitsbereichs-Einstellungen, der auf diese Datendatei verweist

{
  "html.customData": ["./html.html-data.json"]
}

Sie erhalten dann Sprachfeatures für die definierten Entitäten

Custom Data helloworld

Sie können diese Funktion ausprobieren, indem Sie das vorkonfigurierte Custom Data Hallo-Welt-Beispiel mit VS Code öffnen. Sie können die HTML/CSS-Custom-Data-Dateien bearbeiten, um die Definitionen von benutzerdefinierten Entitäten hinzuzufügen, zu entfernen oder zu verfeinern und die Sprachfeatures anzupassen.

Die Einstellungen html.customData und css.customData dienen als guter Ausgangspunkt für die Verwendung von Custom Data. Es gibt jedoch auch andere Möglichkeiten, Custom Data zu nutzen. In den folgenden Abschnitten beschreiben wir, wie Erweiterungsautoren kuratierte Custom Data-Sets teilen oder Custom Data nutzen können, um Sprachunterstützung zu erstellen.

Teilen von Custom Data über Erweiterungen

Heute basieren viele Web-Frameworks auf HTML. Das Projekt Mavo erweitert beispielsweise die HTML-Syntax um verschiedene mv-Attribute. Custom Data erleichtert die Unterstützung solcher Web-Frameworks

Generieren Sie Custom Data für alle Mavo-Attribute.
Verweisen Sie in der contributes.html.customData-Erweiterung auf die Custom Data-Datei Contribution Point.
Veröffentlichen Sie die Erweiterung, um anderen die Nutzung des Mavo-Frameworks in VS Code zu erleichtern.

Durch den Download der Mavo-Erweiterung erhalten Benutzer Auto-Vervollständigung und Hover-Informationen für alle Mavo-Attribute in HTML-Dateien

Mavo demo

Der Quellcode der Erweiterung befindet sich im Repository vscode-mavo. Wir hoffen, dass das Projekt als Ausgangspunkt für die Implementierung von Web-Framework- oder Sprachunterstützung in VS Code dient. Weitere Informationen zu den Contribution Points contributes.html.customData und contributes.css.customData finden Sie unter vscode-custom-data.

Verwendung von Custom Data für Sprachserver

Die Bibliotheken vscode-html-languageservice und vscode-css-languageservice ermöglichen es Erweiterungsautoren, einfach Sprachserver für Sprachen zu implementieren, die HTML und CSS erweitern oder einbetten. Kürzlich haben wir eine API zum Laden von benutzerdefinierten Daten hinzugefügt

import { getLanguageService } from 'vscode-html-languageservice'

getLanguageService({
  customDataProviders: [...]
})

Unser integrierter HTML-Sprachserver nutzt diese API, um einen kuratierten Satz von benutzerdefinierten Daten zu laden, die wir aus verschiedenen Quellen gesammelt haben

W3C-Spezifikationen von HTML, CSS und WAI-ARIA
Mozilla Developer Network
Mozillas Pakete mdn-data und mdn-browser-compat-data
Rangliste der CSS-Eigenschaftennutzung von Chrome

Wir haben diesen Datensatz auf NPM veröffentlicht. Sie finden die Daten auch auf GitHub. Sprachserver-Autoren können dieses Dataset in Kombination mit unseren HTML/CSS-Sprachdiensten verwenden, um Unterstützung für ihre Sprachen zu implementieren, die HTML/CSS erweitern oder einbetten, oder sie könnten diese Daten verwenden, um Unterstützung für Sprachen zu implementieren, die zu HTML/CSS transpilieren, wie Pug oder Stylus. Abschließend werden wir dieses Dataset weiterhin kuratieren, um eine aktuelle Sprachunterstützung für HTML/CSS in VS Code bereitzustellen.

Zusammenfassung

Das VS Code-Team ist bestrebt, eine gute Bearbeitungserfahrung für Websprachen zu bieten. Durch das Custom Data Format bleiben wir nah an den neuesten HTML- und CSS-Sprachfunktionen und bieten eine einfache Schnittstelle für Benutzer und Erweiterungsautoren, um ihre HTML- und CSS-Bearbeitungserfahrung anzupassen.

Simple interface

Sie können mehr über das Custom Data Format im Repository vscode-custom-data lesen, wo Sie Issues und Feature-Anfragen eröffnen können.

Viel Spaß beim Programmieren!

Pine Wu, Mitglied des VS Code Teams @octref