Anpassen des Editorverhaltens mithilfe der Sprachkonfiguration

Sie können benutzerdefinierte sprachspezifische Syntax im Visual Studio-Editor mithilfe der Sprachkonfiguration implementieren, um sprachspezifische Syntaxvorgänge zu aktivieren. Im Vergleich zur Verwendung eines Sprachservers kann die Verwendung der Sprachkonfiguration die Leistung verbessern, da alle vorgänge lokal sind.

Was ist die Sprachkonfiguration?

Visual Studio bietet intelligente Bearbeitungsfunktionen für verschiedene Programmiersprachen über Spracherweiterungen. Die Sprachkonfiguration ergänzt die Server, die das Language Server Protocol (LSP) verwenden, und stellt deklarative Daten bereit, mit denen der Visual Studio-Editor Formatierungs-, Farb- und Abschlussentscheidungen treffen kann, ohne dass eine asynchrone Abfrage an den LSP-Server vorgenommen wird. Deklarative Sprachfeatures werden in Konfigurationsdateien definiert. Html-, CSS- und typescript-basic-Erweiterungen, die mit Visual Studio gebündelt sind, bieten beispielsweise eine Teilmenge der folgenden deklarativen Sprachfeatures:

• Syntaxhervorhebung
• Snippet-Vervollständigung
• Klammerzuordnung
• Automatisches Schließen von Klammern
• Kommentare umschalten
• Automatischer Einzug

Visual Studio bietet die Möglichkeit für Erweiterungen, eine Sprachkonfiguration für jede Programmiersprache zu definieren. Die Sprachkonfigurationsdatei steuert grundlegende Bearbeitungsfeatures, z. B. Kommentar-Umschalten und Klammernabgleich und Umgebung.

Die Verwendung der Sprachkonfiguration hilft bei:

• Synchrone Bearbeitung beim Benutzertippen
• Einfachheit: Kurze JSON-Dateien mit regulären Ausdrücken sind einfacher zu verwalten als komplexer Algorithmus
• Portabilität: Erfordert keine oder minimale Änderungen zwischen Visual Studio Code und Visual Studio

Außerdem bieten Sprachkonfigurationsdateien eine einfache Möglichkeit, Visual Studio zu erweitern, um einige grundlegende Umgestaltungsfeatures über eine einfach zu lesende JSON-Datei zu unterstützen.

Hinzufügen von Sprachkonfigurationsunterstützung zu einer Visual Studio-Erweiterung

Es gibt drei Teile zum Hinzufügen der Sprachkonfigurationsunterstützung zu einer Visual Studio-Erweiterung:

1. Erstellen eines VSIX-Projekts
2. Erstellen einer Sprachkonfigurationsdatei
3. Hinzufügen einer Grammatikdatei
4. Aktualisieren der pkgdef-Datei

Sie können ein Arbeitsbeispiel im Beispiel für die Sprachkonfiguration erkunden.

Erstellen eines VSIX-Projekts

Um eine Sprachdiensterweiterung mithilfe der Sprachkonfiguration zu erstellen, stellen Sie zunächst sicher, dass die Visual Studio-Erweiterungsentwicklungsauslastung für Ihre Instanz von VS installiert ist.

Erstellen Sie als Nächstes ein neues VSIX-Projekt, indem Sie zu "Neues>Dateiprojekt" navigieren, nach "vsix" suchen und nach VSIX-Projekt suchen:

Erstellen einer Sprachkonfigurationsdatei

Beim Erstellen einer eigenen Sprachkonfigurationsdatei können Sie auswählen, welche Aspekte in der JSON-Datei integriert werden sollen. Sie können z. B. das Kommentartoggling, das automatische Schließen von geschweiften Klammern oder eine beliebige Kombination der hier beschriebenen Funktionen aktivieren.

Um Ihrer Erweiterung Unterstützung hinzuzufügen, erstellen Sie zuerst eine Sprachkonfigurationsdatei. Der Name der Datei muss einem Standard entsprechen: Verwenden Sie Bindestriche, um die Wörter im Dateinamen zu trennen, und stellen Sie sicher, dass er mit language-configuration.json endet.

Der folgende Code zeigt eine Beispiel-Sprachkonfigurationsdatei.

{
    "comments": {
      "lineComment": "***",
      "blockComment": ["{*", "*}"]
    },
    "brackets": [
      ["@", "@"],
      ["#", "#"],
      ["$", "$"],
      ["(", ")"]
    ],
    "autoClosingPairs": [
      { "open": "{", "close": "}" },
      { "open": "@", "close": "@" },
      { "open": "#", "close": "#" },
      { "open": "$", "close": "$" },
      { "open": "(", "close": ")" },
      { "open": "'", "close": "'", "notIn": ["string", "comment"] },
      { "open": "\"", "close": "\"", "notIn": ["string"] },
    ],
    "autoCloseBefore": ";:.,=}])>` \n\t",
    "surroundingPairs": [
      ["@", "@"],
      ["#", "#"],
      ["$", "$"],
      ["[", "]"],
      ["(", ")"],
      ["'", "'"],
      ["\"", "\""],
      ["`", "`"]
    ],
    "wordPattern": "(-?\\d*\\.\\d\\w*)|([^\\`\\~\\!\\@\\#\\%\\^\\&\\*\\(\\)\\-\\=\\+\\[\\{\\]\\}\\\\\\|\\;\\:\\'\\\"\\,\\.\\<\\>\\/\\?\\s]+)",
    "indentationRules": {
      "increaseIndentPattern": "^((?!\\/\\/).)*(\\{[^}\"'`]*|\\([^)\"'`]*|\\[[^\\]\"'`]*)$",
      "decreaseIndentPattern": "^((?!.*?\\/\\*).*\\*/)?\\s*[\\)\\}\\]].*$"
    }
  }

Konfigurationseinstellungen

In den folgenden Abschnitten werden die Einstellungen beschrieben, die in der Sprachkonfigurationsdatei verfügbar sind.

Kommentar-Umschalten

Sprachkonfigurationsdateien bieten zwei Befehle zum Umschalten von Kommentaren. Umschalten des Zeilenkommentars und Umschalten des Blockkommentars. Sie können comments.blockComment und comments.lineComment angeben, um festzulegen, wie Visual Studio Linien/Blöcke kommentieren soll.

{
  "comments": {
    "lineComment": "//",
    "blockComment": ["/*", "*/"]
  }
}

Diese Einstellung wirkt sich auf das Verhalten des Visual Studio-Text-Editors aus, wenn Sie STRG+K, STRG+C drücken.

Definition der Klammern

Wenn Sie den Cursor in eine hier definierte Klammer verschieben, hebt Visual Studio diese Klammer zusammen mit dem entsprechenden Paar hervor.

{
  "brackets": [["{", "}"], ["[", "]"], ["(", ")"]]
}

Automatisches Schließen

Wenn Sie eingeben ', erstellt Visual Studio ein Paar einzelner Anführungszeichen und platziert den Cursor in der Mitte: '|'. In diesem Abschnitt werden solche Paare definiert.

{
  "autoClosingPairs": [
    { "open": "{", "close": "}" },
    { "open": "[", "close": "]" },
    { "open": "(", "close": ")" },
    { "open": "'", "close": "'", "notIn": ["string", "comment"] },
    { "open": "\"", "close": "\"", "notIn": ["string"] },
    { "open": "`", "close": "`", "notIn": ["string", "comment"] },
    { "open": "/**", "close": " */", "notIn": ["string"] }
  ]
}

Der notIn Schlüssel deaktiviert dieses Feature in bestimmten Codebereichen. Wenn Sie beispielsweise den folgenden Code schreiben:

// ES6's Template String
`ES6's Template String`;

Das einfache Anführungszeichen wird nicht automatisch geschlossen.

Paare, die keine notIn Eigenschaft erfordern, können auch eine einfachere Syntax verwenden.

{
  "autoClosingPairs": [ ["{", "}"], ["[", "]"] ]
}

Automatisches Schließen vor

Standardmäßig schließt Visual Studio automatisch Paare, wenn direkt hinter dem Cursor Leerraum vorhanden ist. Wenn Sie also { im folgenden JSX-Code eingeben, erhalten Sie kein automatisches Schließen.

const Component = () =>
  <div className={>
                  ^ Does not get autoclosed by default
  </div>

Diese Definition setzt dieses Verhalten jedoch außer Kraft:

{
  "autoCloseBefore": ";:.,=}])>` \n\t"
}

Jetzt, wenn Sie { direkt vor > eingeben, schließt Visual Studio automatisch mit } ab.

Automatische Umgebungseinstellung

Wenn Sie einen Bereich in Visual Studio auswählen und eine öffnende Klammer eingeben, umgibt Visual Studio den ausgewählten Inhalt in ein Paar eckige Klammern. Dieses Feature wird als Autosurrounding bezeichnet, und hier können Sie die Autosurrounding-Paare für eine spezifische Sprache definieren.

{
  "surroundingPairs": [
    ["{", "}"],
    ["[", "]"],
    ["(", ")"],
    ["'", "'"],
    ["\"", "\""],
    ["`", "`"]
  ]
}

Wortmuster

wordPattern definiert, was als Wort in der Programmiersprache betrachtet wird. Codevorschläge verwenden diese Einstellung, um Wortgrenzen zu bestimmen, falls wordPattern festgelegt ist.

{
  "wordPattern": "(-?\\d*\\.\\d\\w*)|([^\\`\\~\\!\\@\\#\\%\\^\\&\\*\\(\\)\\-\\=\\+\\[\\{\\]\\}\\\\\\|\\;\\:\\'\\\"\\,\\.\\<\\>\\/\\?\\s]+)"
}

Einzugsregeln

indentationRulesdefiniert, wie der Editor den Einzug der aktuellen Zeile oder der nächsten Zeile beim Eingeben, Einfügen und Verschieben von Zeilen anpassen soll oder wenn Sie Text mit STRG+K, STRG+D (Dokument formatieren) und STRGK, ++F (Formatauswahl) formatieren.

{
  "indentationRules": {
    "increaseIndentPattern": "^((?!\\/\\/).)*(\\{[^}\"'`]*|\\([^)\"'`]*|\\[[^\\]\"'`]*)$",
    "decreaseIndentPattern": "^((?!.*?\\/\\*).*\\*/)?\\s*[\\)\\}\\]].*$"
  }
}

Wenn beispielsweise if (true) { mit increaseIndentPattern übereinstimmt, und Sie Enter nach der geöffneten Klammer { drücken, wird der Editor automatisch einmal eingerückt, und Ihr Code erscheint schließlich so:

if (true) {
  console.log();

Zusätzlich zu increaseIndentPattern und decreaseIndentPatter gibt es zwei weitere Einzugsregeln:

• indentNextLinePattern - Wenn eine Zeile mit diesem Muster übereinstimmt, sollte nur die nächste Zeile danach einmal eingezogen werden.
• unIndentedLinePattern - Wenn eine Zeile mit diesem Muster übereinstimmt, sollte der Einzug nicht geändert und sie nicht anhand der anderen Regeln bewertet werden.

Wenn keine Einzugsregel für die Programmiersprache festgelegt ist, rückt der Editor die Zeile ein, wenn sie mit einer geöffneten Klammer endet und rückt die Zeile zurück, wenn Sie eine schließende Klammer eingeben. Die Klammer hier ist durch bracketsdefiniert.

Drücken Sie die Eingabetaste

onEnterRules definiert eine Liste der Regeln, die ausgewertet werden sollen, wenn die EINGABETASTE im Editor gedrückt wird.

{
  "onEnterRules": [{
    "beforeText": "^\\s*(?:def|class|for|if|elif|else|while|try|with|finally|except|async).*?:\\s*$",
    "action": { "indent": "indent" }
  }]
}

Beim Drücken der EINGABETASTE wird der Text vor, nach oder nach einer Zeile oberhalb des Cursors mit den folgenden Eigenschaften überprüft:

• beforeText (verpflichtend). Ein regulärer Ausdruck, der dem Text vor dem Cursor entspricht (auf die aktuelle Zeile beschränkt).
• afterText. Ein regulärer Ausdruck, der dem Text nach dem Cursor entspricht (auf die aktuelle Zeile beschränkt).
• previousLineText. Ein regulärer Ausdruck, der dem Text eine Zeile oberhalb des Cursors entspricht.

Wenn alle angegebenen Eigenschaften übereinstimmen, wird die Regel als Übereinstimmung betrachtet, und es werden keine weiteren onEnterRules Werte ausgewertet. Eine onEnterRule kann die folgenden Aktionen angeben:

• indent (verpflichtend). Einer von none, indent, outdent, indentOutdent.
  • none bedeutet, dass die neue Zeile den Einzug der aktuellen Zeile übernimmt.
  • indent bedeutet, dass die neue Zeile relativ zur aktuellen Zeile eingezogen wird.
  • outdent bedeutet, dass die neue Zeile relativ zur aktuellen Zeile nicht eingestrichen ist.
  • indentOutdent bedeutet, dass zwei neue Zeilen eingefügt werden: die erste eingerückt und die zweite nicht eingerückt.
• appendText. Eine Zeichenfolge, die nach der neuen Zeile und nach dem Einzug angefügt wird.
• removeText. Die Anzahl der Zeichen, die aus dem Einzug der neuen Zeile entfernt werden sollen.

Eigenschafteneinstellungen

Stellen Sie im Erweiterungsprojekt sicher, dass Ihre language-configuration.json Datei die folgenden Eigenschafteneinstellungen aufweist:

Build Action = Content
Include in VSIX = True
Copy to output = Copy always 

(Optional) Hinzufügen einer Grammatikdatei

Darüber hinaus können Sie eine TextMate-Grammatikdatei hinzufügen, um syntaxfarben für die Sprache bereitzustellen. TextMate-Grammatiken sind eine strukturierte Auflistung regulärer Ausdrücke und werden als Plist-Dateien (XML) oder JSON-Dateien geschrieben. Siehe Sprachgrammatik. Wenn Sie keine sprachspezifische Grammatikdatei bereitstellen, wird eine integrierte Standardeinstellung verwendet.

Gehen Sie folgendermaßen vor, um benutzerdefinierte TextMate-Grammatik- oder Designdateien hinzuzufügen:

1. Erstellen Sie einen Ordner mit dem Namen „Grammars“ in Ihrer Erweiterung (oder einen anderen Namen Ihrer Wahl).

2. Schließen Sie im Ordner Grammatik alle *.tmlanguage, *.plist, *.tmthemeoder *.json Dateien ein, die Sie für die benutzerdefinierte Farbgebung bereitstellen möchten.

   Tipp

   Eine .tmtheme--Datei definiert, wie die Bereiche Visual Studio-Klassifizierungen (benannte Farbschlüssel) zugeordnet werden. Für einen Leitfaden können Sie auf die globale Datei .tmtheme im Verzeichnis %ProgramFiles(x86)%\Microsoft Visual Studio\<Version>\<SKU>\Common7\IDE\CommonExtensions\Microsoft\TextMate\Starterkit\Themesg verweisen.

Erstellen einer pkgdef-Datei

Erstellen Sie als Nächstes eine .pkgdef Datei. Eine .pkgdef Datei enthält alle Registrierungsinformationen, die sonst als Eintrag in die Systemregistrierung hinzugefügt würden. Weitere Informationen zu pkgdef Dateien finden Sie unter Registrieren von VSPackages und Was ist eine pkgdef-Datei? Und warum?. In Ihrer pkgdef Datei sollten Sie über den Pfad zu der language-configuration.json Datei und den Pfad für die Sprachgrammatik verfügen. Sprachdienste wie LSP fordern den Inhaltstyp des Editors an und rufen dies über die Sprachkonfiguration ab. Diese Informationen stellen die sprachspezifische Intelligenz innerhalb eines Servers bereit, die mit Entwicklungstools kommunizieren kann. Wenn kein Sprachdienst vorhanden ist, greift das Sprachkonfigurationsmodul auf die TextMate-Grammatik zurück. Ihre Datei .pkgdef sollte wie folgt aussehen:

[$RootKey$\TextMate\Repositories]
"AspNetCoreRazor="$PackageFolder$\Grammars

// Defines where the language configuration file for a given
// grammar name is (value of the ScopeName tag in the tmlanguage file).
[$RootKey$\TextMate\LanguageConfiguration\GrammarMapping]
"text.aspnetcorerazor"="$PackageFolder$\language-configuration.json"

// Defines where the language configuration file for a given
// language name is (partial value of the content type name).
[$RootKey$\TextMate\LanguageConfiguration\ContentTypeMapping]
"RazorLSP"="$PackageFolder$\language-configuration.json"

[$RootKey$\TextMate\LanguageConfiguration\GrammarMapping]
"text.html.basic"="$PackageFolder$\html-language-configuration.json"
"source.js"="$PackageFolder$\javascript-language-configuration.json"
"source.css"="$PackageFolder$\css-language-configuration.json"
"source.cs"="$PackageFolder$\csharp-language-configuration.json

Stellen Sie sicher, dass die Eigenschaften der pkgdef Datei wie folgt festgelegt werden:

Build Action = Content
Include in VSIX = True
Copy to output = Copy always 

Um die Sprachkonfigurationsinformationen für Visual Studio zugänglich zu machen, schließen Sie die language-configuration Datei in das VSIX-Paket ein. Das Einschließen dieser Datei bedeutet, dass sie mit der Visual Studio-Erweiterung ausgeliefert wird. Die Datei teilt Visual Studio mit, dass eine Sprachkonfiguration zur Verwendung verfügbar ist. Um die Datei hinzuzufügen, bearbeiten Sie Die vsixmanifest Datei, um Ihre PKGDEF-Def-Datei hinzuzufügen, z. B.:

<Asset Type="Microsoft.VisualStudio.VsPackage" Path="Test.pkgdef"/> 

Verwandte Inhalte

• Language Server-Protokoll

• Beispiel für die Sprachkonfiguration