JSON bearbeiten mit Visual Studio Code

JSON ist ein Datenformat, das häufig in Konfigurationsdateien wie package.json oder project.json verwendet wird. Wir verwenden es auch ausgiebig in Visual Studio Code für unsere Konfigurationsdateien. Beim Öffnen einer Datei mit der Endung .json bietet VS Code Funktionen, die das Schreiben oder Ändern des Dateiinhaltes vereinfachen.

IntelliSense und Validierung

Für Eigenschaften und Werte, sowohl für JSON-Daten mit als auch ohne Schema, schlagen wir Ihnen während der Eingabe Vorschläge mit IntelliSense vor. Sie können Vorschläge auch manuell mit dem Befehl Vorschläge auslösen anzeigen (⌃Space (Windows, Linux Ctrl+Space)).

Wir führen auch eine Struktur- und Wertprüfung basierend auf einem zugehörigen JSON-Schema durch, was Ihnen rote Wellenlinien anzeigt. Um die Validierung zu deaktivieren, verwenden Sie die json.validate.enable Einstellung.

Paket- und Projekt-Abhängigkeiten

Wir bieten auch IntelliSense für spezifische Wertebereiche wie Paket- und Projekt-Abhängigkeiten in package.json, project.json und bower.json an.

Schnelle Navigation

JSON-Dateien können groß werden, und wir unterstützen die schnelle Navigation zu Eigenschaften mit dem Befehl Gehe zu Symbol (⇧⌘O (Windows, Linux Ctrl+Shift+O)).

Hover-Infos

Wenn Sie mit der Maus über Eigenschaften und Werte für JSON-Daten mit oder ohne Schema fahren, erhalten Sie zusätzliche Informationen.

Formatierung

Sie können Ihr JSON-Dokument mit ⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I) oder Dokument formatieren aus dem Kontextmenü formatieren.

Faltung (Code-Faltung)

Sie können Quellcodebereiche mithilfe der Faltungsicons in der Leiste zwischen Zeilennummern und Zeilenanfang umbrechen. Faltungsbereiche sind für alle Objekt- und Array-Elemente verfügbar.

JSON mit Kommentaren

Zusätzlich zum Standard-JSON-Modus, der der JSON-Spezifikation folgt, verfügt VS Code auch über einen Modus JSON mit Kommentaren (jsonc). Dieser Modus wird für VS Code-Konfigurationsdateien wie settings.json, tasks.json oder launch.json verwendet. Im Modus JSON mit Kommentaren können Sie einzeilige (//) sowie mehrzeilige Kommentare (/* */) wie in JavaScript verwenden. Der Modus akzeptiert auch nachgestellte Kommas, diese werden jedoch nicht empfohlen und der Editor zeigt eine Warnung an.

Der aktuelle Editor-Modus wird in der Statusleiste des Editors angezeigt. Wählen Sie die Modusanzeige aus, um den Modus zu ändern und zu konfigurieren, wie Dateierweiterungen mit Modi verknüpft werden. Sie können auch direkt die files.associations Einstellung ändern, um Dateinamen oder Muster von Dateinamen mit jsonc zu verknüpfen.

JSON-Schemas und Einstellungen

Um die Struktur von JSON-Dateien zu verstehen, verwenden wir JSON-Schemas. JSON-Schemas beschreiben die Form der JSON-Datei sowie Wertebereiche, Standardwerte und Beschreibungen. Die mit VS Code ausgelieferte JSON-Unterstützung unterstützt alle Entwurfsversionen von Entwurf 4 bis Entwurf 7, mit eingeschränkter Unterstützung für die Entwürfe 2019-09 und 2020-12.

Server wie JSON Schema Store stellen Schemas für die meisten gängigen JSON-basierten Konfigurationsdateien bereit. Schemas können aber auch in einer Datei im VS Code-Arbeitsbereich sowie in den VS Code-Einstellungen definiert werden.

Die Zuordnung einer JSON-Datei zu einem Schema kann entweder in der JSON-Datei selbst über das Attribut $schema oder in den Benutzer- oder Arbeitsbereichseinstellungen (Datei > Einstellungen > Einstellungen) unter der Eigenschaft json.schemas erfolgen.

VS Code-Erweiterungen können auch Schemas und Schema-Zuordnungen definieren. Deshalb kennt VS Code bereits das Schema einiger bekannter JSON-Dateien wie package.json, bower.json und tsconfig.json.

Zuordnung in der JSON-Datei

Im folgenden Beispiel gibt die JSON-Datei an, dass ihr Inhalt dem CoffeeLint-Schema folgt.

{
  "$schema": "https://json.schemastore.org/coffeelint",
  "line_endings": "unix"
}

Beachten Sie, dass diese Syntax VS Code-spezifisch ist und nicht Teil der JSON Schema-Spezifikation ist. Das Hinzufügen des $schema-Schlüssels ändert die JSON selbst, was Systeme, die die JSON verwenden, möglicherweise nicht erwarten, zum Beispiel kann die Schema-Validierung fehlschlagen. In diesem Fall können Sie eine der anderen Zuordnungsmethoden verwenden.

Zuordnung in den Benutzereinstellungen

Der folgende Auszug aus den Benutzereinstellungen zeigt, wie .babelrc-Dateien dem babelrc-Schema zugeordnet werden, das sich unter https://json.schemastore.org/babelrc befindet.

"json.schemas": [
    {
        "fileMatch": [
            "/.babelrc"
        ],
        "url": "https://json.schemastore.org/babelrc"
    }
]

Tipp: Stellen Sie neben der Definition eines Schemas für .babelrc auch sicher, dass .babelrc dem JSON-Sprachmodus zugeordnet ist. Dies geschieht ebenfalls in den Einstellungen über die Einstellung im Array files.association.

Zuordnung zu einem Schema im Arbeitsbereich

Um ein Schema zuzuordnen, das sich im Arbeitsbereich befindet, verwenden Sie einen relativen Pfad. In diesem Beispiel wird eine Datei im Stammverzeichnis des Arbeitsbereichs namens myschema.json als Schema für alle Dateien verwendet, die auf .foo.json enden.

"json.schemas": [
    {
        "fileMatch": [
            "**/*.foo.json"
        ],
        "url": "./myschema.json"
    }
]

Zuordnung zu einem in den Einstellungen definierten Schema

Um ein Schema zuzuordnen, das in den Benutzer- oder Arbeitsbereichseinstellungen definiert ist, verwenden Sie die Eigenschaft schema. In diesem Beispiel wird ein Schema definiert, das für alle Dateien namens .myconfig verwendet wird.

"json.schemas": [
    {
        "fileMatch": [
            "/.myconfig"
        ],
        "schema": {
            "type": "object",
            "properties": {
                "name" : {
                    "type": "string",
                    "description": "The name of the entry"
                }
            }
        }
    }
]

Zuordnung eines Schemas in einer Erweiterung

Schemas und Schema-Zuordnungen können auch von einer Erweiterung definiert werden. Schauen Sie sich den jsonValidation contribution point an.

Syntax für Dateimuster

Die Syntax für Dateimuster unterstützt den '*' Wildcard. Außerdem können Sie Ausschlussmuster definieren, die mit '!' beginnen. Damit eine Zuordnung übereinstimmt, muss mindestens ein Muster übereinstimmen, und das letzte übereinstimmende Muster darf kein Ausschlussmuster sein.

  "json.schemas": [
    {
      "fileMatch": [
        "/receipts/*.json",
        "!/receipts/*.excluded.json"
      ],
      "url": "./receipts.schema.json"
    }
  ]

Snippets in JSON-Schemas definieren

JSON-Schemas beschreiben die Form der JSON-Datei sowie Wertebereiche und Standardwerte, die von der JSON-Sprachunterstützung für Vervollständigungsvorschläge verwendet werden. Wenn Sie ein Schemaautor sind und noch individuellere Vervollständigungsvorschläge anbieten möchten, können Sie auch Snippets im Schema angeben.

Das folgende Beispiel zeigt ein Schema für eine Tastenkombination-Einstellungen-Datei, das ein Snippet definiert

{
    "type": "array",
    "title": "Keyboard shortcuts configuration",
    "items": {
        "type": "object",
        "required": ["key"],
        "defaultSnippets": [
            {
                "label": "New keyboard shortcut",
                "description": "Binds a key to a command for a given state",
                "body": { "key": "$1", "command": "$2", "when": "$3" }
            }
        ],
        "properties": {
            "key": {
                "type": "string"
            }
            ...
        }
    }
}

Dies ist ein Beispiel in einem JSON-Schema

Verwenden Sie die Eigenschaft defaultSnippets, um eine beliebige Anzahl von Snippets für das gegebene JSON-Objekt anzugeben.

• label und description werden im Dialog zur Auswahl von Vervollständigungen angezeigt. Wenn kein Label angegeben ist, wird stattdessen eine stringifizierte Objekt-Darstellung des Snippets als Label angezeigt.
• body ist das JSON-Objekt, das stringifiziert und eingefügt wird, wenn die Vervollständigung vom Benutzer ausgewählt wird. Snippet-Syntax kann innerhalb von Zeichenkettenliteralen verwendet werden, um Tabstopps, Platzhalter und Variablen zu definieren. Wenn eine Zeichenkette mit ^ beginnt, wird der Zeichenketteninhalt unverändert eingefügt, nicht stringifiziert. Sie können dies verwenden, um Snippets für Zahlen und Booleans anzugeben.

Beachten Sie, dass defaultSnippets nicht Teil der JSON-Schema-Spezifikation ist, sondern eine VS Code-spezifische Schema-Erweiterung.

Rich Formatting in Hovers verwenden

VS Code verwendet das Standardfeld description aus der JSON Schema-Spezifikation, um Informationen über Eigenschaften beim Hovern und während der Autovervollständigung bereitzustellen.

Wenn Sie möchten, dass Ihre Beschreibungen Formatierungen wie Links unterstützen, können Sie dies durch die Verwendung von Markdown in Ihrer Formatierung mit der Eigenschaft markdownDescription tun.

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "The name of the entry",
      "markdownDescription": "The name of the entry. [See the documentation](https://example.com)"
    }
  }
}

Beachten Sie, dass markdownDescription nicht Teil der JSON-Schema-Spezifikation ist, sondern eine VS Code-spezifische Schema-Erweiterung.

Offline-Modus

json.schemaDownload.enable steuert, ob die JSON-Erweiterung JSON-Schemas von http und https abruft.

Ein Warnungsdreieck wird in der Statusleiste angezeigt, wenn der aktuelle Editor Schemas verwenden möchte, die nicht heruntergeladen werden können.