Visual Studio Code で Fastly VCL ファイルのシンタックスを色分け表示

Leon Brocard

Principal Solutions Architect, Fastly

2022年11月07日

DevOps エンジニアリング

Fastly Varnish Configuration Language (VCL) 向けの新しい Visual Studio Code 拡張機能で、Fastly VCL コードのシンタックスを色分けして表示できます。

以下は、GitHub Dark Default テーマと JetBrains Mono フォントを使用して VCL ボイラープレートを編集した様子を示す Visual Studio Code のスクリーンショットです。

概要

Fastly の Solutions Engineering チームの一員である私は、Fastly の VCL プラットフォームを使用しているお客様向けのソリューションを構築しています。

このプラットフォームは、Varnish Configuration Language を使用して設定します。広範な VCL リファレンスを提供している Fastly Developer Hub には、以下のような説明があります。

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.

私は、便利な Fastly Fiddle を利用してシンタックスの色分け表示機能を含む、小規模なソリューションを構築しています。この機能によって、「sub」や「return」などの VCL キーワードや、リクエストヘッダー、文字列、コメントなどを異なる色で表示できます。

私がプログラマーの仕事を始めた頃は、シンタックスを色分け表示できる機能はありませんでした。当初、異なる色での表示は処理時間の無駄だと思っていましたが、今では基盤となるコードの構造を見やすく色分けして表示してくれる機能がなければ非常に不便に感じるようになりました。

お気に入りのソースコードエディターである Visual Studio Code を使用して大規模なソリューションを構築することがあります。Visual Studio Code には、VCL コードのシンタックスを色分け表示する拡張機能がいくつかありますが、#FASTLY recv のようなコードマクロなどの Fastly 固有の機能をサポートする拡張機能はありませんでした。そこで、自分でそのような拡張機能を構築することにしました。必要なすべての機能を確実にサポートできるよう、VCL リファレンスを参考にして構築しました。

仕組み

Visual Studio Code の言語拡張機能は、構造化された正規表現のコレクションである JSON ファイルの TextMate 文法を使用してテキストを以下のスコープにトークン化します。

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

たとえば、この拡張機能では Fastly のコードマクロ (#FASTLY recv など) が JSON ファイルの正規表現を使用してコントロールキーワードのスコープとして設定されます。

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

GitHub Dark Default や、デフォルトの Light+ などの Visual Studio Code のテーマは、各スコープに色とスタイルを割り当てます。

GitHub のテーマでは、JavaScript オブジェクトを使用してキーワードのスコープに赤が使用されます。

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

以下の Visual Studio Code のスクリーンショットでは、Visual Studio Code のデフォルトの Light+ テーマと Cascadia Code フォントを使用して VCL ボイラープレートが編集されていますが、このテーマでスコープが色分けして表示されているのを確認できます。

インストール方法

この拡張機能は Visual Studio Code Marketplace で入手できます。Visual Studio Code にインストールするには、上記のマーケットプレイスで「Fastly」を検索し、「Fastly Varnish Configuration Language (VCL)」の拡張機能を選択して Install ボタンをクリックします。この拡張機能によって、拡張子が .vcl のすべてのファイルでコードのシンタックスが色分けされて表示されます。

編集してみましょう

Visual Studio Code を使用して VCL をローカルで編集する必要がある場合は、この便利な Fastly VCL の新しい拡張機能をぜひお試しください。

英語のみで利用可能

概要

仕組み

インストール方法

編集してみましょう