It's now easier than ever to write Fastly VCL

Last year, we introduced our Visual Studio Code extension that adds syntax highlighting, code completion, snippets, documentation and linter diagnostics for Fastly Varnish Configuration Language (VCL) files. In case you missed it, Leon wrote about implementing syntax highlighting for your favorite source code editor.

Now, with an exciting upgrade, we have supercharged the editing experience to make it even easier to write Fastly VCL. Let's explore the latest additions.

Diagnostics

A major change to the extension is that we have included the open-source falco VCL parser and linter. This digs through all source code in a workspace and highlights any issues that it finds, such as undefined variables, type mismatches, and constructs that are defined, but not used. These are marked inline and listed in the Problems panel:

VCL extension blog image 1

Highlighting diagnostics alerts you to potential logic errors within your code.

Contextual completions

As you write VCL, the extension suggests completions for VCL functions and variables, HTTP headers, subroutine snippets and Fastly macros:

VCL extension blog image 2

Contextual completions mean having the next part of the code at your fingertips.

Signature help

As you write code that uses a VCL function, the extension pops up a function synopsis, the parameters and types it takes, and a link to find out more:

VCL extension blog image 3

Signature help means not having to look up additional documentation, so you can concentrate on your logic.

Documentation on hover

If you leave the mouse over a variable, function, built-in subroutine or HTTP header, the extension pops up some documentation about it, with helpful links from our Developer Hub:

VCL extension blog image 4

How to install

The extension is available for free on the Visual Studio Code Marketplace. https://marketplace.visualstudio.com/items?itemName=fastly.vscode-fastly-vcl

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. 

To install from the command line, run:

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

How to upgrade

If you have previously installed the extension, then Visual Studio Code will prompt you to update the extension. A reload is required.

Edit away!

Need to edit VCL locally using Visual Studio Code? Edit away with our nifty new Fastly VCL extension and its fancy fresh features.

The extension activates automatically for any file with a .vcl extension.

Dora Militaru
Developer Relations Engineer
Leon Brocard
Principal Solutions Architect
Published

2 min read

Want to continue the conversation?
Schedule time with an expert
Share this post
Dora Militaru
Developer Relations Engineer

Dora is a developer relations engineer at Fastly. She cut her developer teeth on building a global news website and cultivated her compassion by leading data protection and site reliability engineering teams. Working at a tiny kitchen table in London, she dreams of helping others build a faster, more secure, more reliable — and better — web for everyone.

Leon Brocard
Principal Solutions Architect

Leon Brocard is an orange-loving Principal Solutions Architect at Fastly with many varied contributions to the Perl community. He loves using open source to get things done. https://fosstodon.org/@orangeacme

Ready to get started?

Get in touch or create an account.