Fastly Varnish Configuration Language (VCL) Support for Visual Studio Code

Brings full IDE support for Fastly Varnish Configuration Language (VCL) to Visual Studio Code, from syntax highlighting to intelligent diagnostics.

Builds upon on the open source Falco Fastly VCL developer tool.

Features

Syntax highlighting

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.

Diagnostics

Real-time linting surfaces syntax errors and best-practice violations directly in the editor.

Contextual completions and signature help

As you type, intelligent completions suggest functions, variables, and headers available in your current subroutine.

While writing a function call, a tooltip appears showing the function's signature, parameter types, and documentation.

Go to definition and peek definition

Navigate to the definition of ACLs, tables, backends, local variables, and parameters using Ctrl+Click / Cmd+Click or F12.

Peek at definitions using ⌥F12:

Documentation on hover

Upon hover, displays inline documentation for functions (including scope and parameters), variables, subroutines, and HTTP headers.

Find all references

Find all references to ACLs, tables, backends, and subroutines, local variables, and parameters using Shift+F12 or right-click and select "Find All References".

Document formatting

Format your VCL code using Shift+Alt+F (Shift+Option+F on Mac) or right-click and select "Format Document". The formatter uses falco fmt to ensure consistent code style with proper indentation and spacing.

Code folding

Collapse and expand code blocks for easier navigation. Supported regions include subroutines, ACLs, tables, backends, if/else blocks, and comment blocks.

Rename symbols

Safely rename ACLs, tables, backends, subroutines, local variables, parameters, and HTTP headers.

Symbol outline and breadcrumbs

The Outline view in the Explorer sidebar displays a tree of all symbols (subroutines, ACLs, tables, backends, directors, and penaltyboxes) in the current file for quick navigation. Breadcrumbs at the top of the editor show your current location within the document structure.

Document highlights

When the cursor is on a symbol, all occurrences of that symbol in the current document are highlighted. Works with ACLs, tables, backends, subroutines, HTTP headers (e.g., req.http.X-Custom), and local variables (e.g., var.count).

Semantic highlighting

Semantic tokens provide richer code coloring based on meaning. Built-in functions and variables like digest.hash_sha256 and req.url are visually distinguished from user-defined ones. Read-only variables like client.ip are marked differently from read-write ones. Backends appear as classes, ACLs as types, and tables as structs.

Workspace symbols

Quickly find and navigate to subroutines, backends, ACLs, tables, and other symbols across all open VCL files using Cmd+T (Ctrl+T on Windows/Linux).

Inlay hints

Inline type annotations appear next to variable assignments, showing the type of both local variables (var.*) and built-in VCL variables like beresp.ttl (RTIME) or req.backend (BACKEND).

Selection ranges

Smart expanding selection lets you progressively select larger syntactic units using Cmd+Shift+→ (Ctrl+Shift+→ on Windows/Linux). Selection expands from word to statement to block to subroutine.

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.

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-2.0.4.vsix

Requirements

NodeJS LTS.

Extension Settings

• fastly.vcl.lintingEnabled (default: true) – Enables linter diagnostics.
• fastly.vcl.maxLintingIssues (default: 100) - Specifies the maximum number of linting issues that the server will return.
• fastly.vcl.inlayHintsEnabled (default: true) – Enables inlay hints showing variable types.
• fastly.vcl.formattingEnabled (default: true) – Enables document formatting using falco fmt.
• fastly.vcl.falcoPath (default: "") - Path to a custom falco binary. If not set, the bundled falco will be used.

Known Issues

Use our GitHub issues to report a problem or request a feature.

Contributors

Special thanks to all contributors:

• Dora Militaru
• Ed Thurgood
• Hiromasa Kakehashi
• Leon Brocard

Future

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