vscode-fastly-vcl

A Visual Studio Code extension which adds syntax highlighting for Fastly Varnish Configuration Language (VCL) files.

Dark and light screenshots

Features

This uses a JSON TextMate language grammar: syntaxes/vcl.tmLanguage.json, a structured collection of regular expressions, to tokenize the text into scopes such as:

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

For example, the extension scopes Fastly code macros as control keywords using a regular expression in JSON:

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

Visual Studio Code themes such as GitHub Dark Default or the default Light+ map scopes to colours and styles.

The GitHub Dark default theme maps the keyword scope to red using a JavaScript object:

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

This was built entirely from the public VCL reference.

The screenshots above are of VCL boilerplate using the GitHub Dark Default theme and the JetBrains Mono font and using Visual Studio Code's default Light+ theme and the Cascadia Code font.

Installation from Marketplace

The extension is in the Visual Studio Code Marketplace. To install in Visual Studio Code, switch to the Extensions View and search for “Fastly”. Select the “Fastly Varnish Configuration Language (VCL)” extension and use the Install button. The extension will syntax highlight code for any file with a .vcl extension.

Installation from GitHub

Alternatively, to install the extension from GitHub:

Uninstall (or disable) any previously-enabled VCL extensions.

Download the latest GitHub release and then run:

code --install-extension vscode-fastly-vcl-1.0.4.vsix

Development

Contributing

Please open a pull request with your changes.

Dependencies

Install NPM - Node.js Package Manager

brew install npm

Install VSCE - Visual Studio Code Extensions is a command-line tool for packaging, publishing and managing VS Code extensions

npm install -g vsce

Install Electron - Node module helps you test VS Code extensions

npm i @vscode/test-electron

Building and Installing

vsce package && code --install-extension vscode-fastly-vcl-1.0.4.vsix

Testing

To run the grammar tests:

npm test

The test cases are stored as markdown files under test/colorize-fixtures. Grammar test results are stored under test/colorize-results, which are automatically generated from the fixtures.

Requirements

None.

Extension Settings

None.

Known Issues

None.

Release Notes

[1.0.4] - 2022-11-03

Changed

Document that the extension in now in the Visual Studio Marketplace.
Add a beautiful new icon.
Document how the extension works.
Fix link to the language file in the README.

[1.0.3] - 2022-10-10

Added

Add highlighting for elseif and elsif.

[1.0.2] - 2022-10-04

Changed

Note that previously-enabled VCL extensions can be disabled as well as uninstalled.
Clarify that this is an extension specifically for Fastly VCL, not general VCL.
Rename from vscode-vcl to vscode-fastly-vcl.
Colorize "#" and "//" as comments even if there are no letters behind.
Add more dependencies to the README.
Add list of contributors.

[1.0.1] - 2022-09-07

Added

Documented that only one VCL extension should be installed.

Changed

Tighten up #FASTLY macro matching.

[1.0.0] - 2022-09-06

Initial release.

TODO

Syntax highlight VCL embedded into Markdown documents.
Syntax highlight regular expressions.

Contributors

Special thanks to all contributors:

Future

Is this useful? Let me know! Leon Brocard <leon@fastly.com>