Zurück zum Blog

Folgen und abonnieren

Nur auf Englisch verfügbar

Diese Seite ist momentan nur auf Englisch verfügbar. Wir entschuldigen uns für die Unannehmlichkeiten. Bitte besuchen Sie diese Seite später noch einmal.

Syntaxhervorhebung von Fastly VCL Dateien mit Visual Studio Code

Leon Brocard

Principal Solutions Architect, Fastly

DevOps Entwicklung

Mit unserer neuen Erweiterung von Visual Studio Code, Fastly Varnish Configuration Language (VCL), können Sie Fastly VCL Code jetzt in der Syntax hervorheben.

Der nachfolgende Screenshot von Visual Studio Code zeigt, wie Sie die VCL Standardvorlage mit dem Thema GitHub Dark Default und der Schriftart JetBrains Mono bearbeiten können:

Übersicht

Ich bin Mitglied des Lösungsentwicklerteams bei Fastly und entwickle Lösungen für Kunden, die die VCL Plattform von Fastly nutzen.

Diese Plattform wird mit Varnish Configuration Language konfiguriert. Der Fastly Developer Hub enthält eine umfassende VCL Reference, in der Folgendes steht:

Fastly's cache servers run an evolution of Varnish which diverged from the community project at version 2.1. Varnish Configuration Language (VCL) remains the primary way to configure our cache behaviors, and our VCL syntax derives from Varnish 2.1.5, but has been significantly upgraded and extended for Fastly-specific features.
While it's possible that VCL written for the open source Varnish will work on Fastly, our VCL variant should be seen as a separate language.

Ich erstelle kleine Lösungen mit dem fabelhaften Fastly Fiddle, das auch Syntaxhervorhebung bietet. Es zeigt VCL Keywords wie „sub” und „return” in einer anderen Farbe als Anfrage-Header, Strings und Kommentare an. 

Als ich mit dem Programmieren anfing, gab es noch keine Syntaxhervorhebung. Anfangs hielt ich die Regenbogenfarben für reine Verschwendung von Verarbeitungszeit. Inzwischen habe ich aber festgestellt, dass die leuchtenden Farben die Struktur des zugrundeliegenden Codes hervorheben, und ohne sie komme ich mir jetzt sogar ein bisschen verloren vor.

Gelegentlich entwickle ich umfassendere Lösungen, die ich dann mit meinem bevorzugten Quellcode-Editor, Visual Studio Code, bearbeiten muss. Es gibt zwar mehrere Erweiterungen von Visual Studio Code, die die Syntax von VCL Code hervorheben, aber keine davon unterstützt die für Fastly spezifischen Features, zum Beispiel Code-Makros wie #FASTLY recv. Also habe ich selbst eine entwickelt. Indem ich auf unsere VCL Reference zurückgreife, stelle ich sicher, dass meine Erweiterung alle erforderlichen Features unterstützt.

So funktioniert’s

Eine Spracherweiterung von Visual Studio Code verwendet eine JSON TextMate Sprachgrammatik, eine strukturierte Sammlung von Mustern (RegEx), um den Text in Scopes wie Folgende zu tokenisieren:

  • keyword.control.vcl
  • variable.other.vcl
  • string.quoted.double.vcl
  • comment.line.number-sign.vcl

Ein Beispiel: Die Erweiterung klassifiziert Code-Makros von Fastly (beispielsweise #FASTLY recv) als Kontroll-Keywords und verwendet dazu Muster (RegEx) in JSON:

{
  "name": "keyword.control.vcl",
  "match": "^\\s*#FASTLY\\s+(deliver|error|fetch|hash|hit|log|miss|pass|recv)\\s*$"
}

Visual Studio Code Schemata, wie zum Beispiel GitHub Dark Default oder die Standard-Datenstruktur Light+ ordnen Bereichen Farben und Stile zu.

Das GitHub Schema ordnet dem Keyword-Bereich mithilfe eines JavaScript-Objekts die Farbe Rot zu:

{
  scope: "keyword",
  settings: {
    foreground: lightDark(scale.red[5], scale.red[3])
  }
}

In diesem Screenshot von Visual Studio Code, in dem die VCL Standardvorlage mit der Standard-Datenstruktur Light+ und der Schriftart Cascadia Code bearbeitet wird, sehen Sie, wie die einzelnen Scopes und das Schema zusammenkommen:

Installation

Die Erweiterung ist im Visual Studio Code Marketplace zu finden. Um sie in Visual Studio Code zu installieren, wechseln Sie zur Erweiterungsansicht und suchen Sie nach „Fastly”. Wählen Sie die Erweiterung „Fastly Varnish Configuration Language (VCL)” aus und klicken Sie auf „Install”. Die Erweiterung hebt den Syntaxcode für jede Datei mit der Erweiterung .vcl hervor.

Viel Spaß beim Bearbeiten!

Wenn Sie VCL lokal mit Visual Studio Code bearbeiten wollen, können Sie dies direkt mit der neuen raffinierten VCL Erweiterung von Fastly tun.

Fastly
© Fastly 2024