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.
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.
Real-time linting surfaces syntax errors and best-practice violations directly in the editor.
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.
Upon hover, displays inline documentation for functions (including scope and parameters), variables, subroutines, and HTTP headers.
Navigate to the definition of ACLs, tables, backends, local variables, and parameters using Ctrl+Click / Cmd+Click or F12.
Peek at definitions using ⌥F12:
Find all references to ACLs, tables, backends, and subroutines, local variables, and parameters using Shift+F12 or right-click and select "Find All References".
Collapse and expand code blocks for easier navigation. Supported regions include subroutines, ACLs, tables, backends, if/else blocks, and comment blocks.
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).
Safely rename ACLs, tables, backends, subroutines, local variables, parameters, and HTTP headers.
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).
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.
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).
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.
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.
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.vsixNodeJS LTS.
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.falcoPath(default:"") - Path to a custom falco binary. If not set, the bundled falco will be used.
Use our GitHub issues to report a problem or request a feature.
Special thanks to all contributors:
Is this useful? Let me know! Leon Brocard <leon@fastly.com>