Configuring Fastly services is simple: from trivial UI toggles to adding small snippets of logic. When configuring complex code for customers, I find myself editing large Fastly Varnish Configuration Language (VCL) files in my editor of choice, Visual Studio Code.

Previously, I introduced a VS Code extension for Fastly VCL that added syntax highlighting, letting the handsome hues highlight the structure of the underlying code. This used VS Code’s declarative language extension mechanism to tokenize the text into scopes.

Then we shared an update which added diagnostics, contextual completions, signature help and documentation on hover, helping improve your development velocity by highlighting important information. This used VS Code’s programmatic language extension APIs to add contextual information.

Recently I expanded upon the extension, adding full VS Code functionality for all the useful editor features I could find. Instead of just detailing the upgrades, I’ll let the results speak for themselves, using test code. It's time to show, not tell, what this extension can now provide.

Go to definition

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

Peek definition

Peek at definitions using ⌥F12

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"

Code folding

Collapse and expand code blocks for easier navigation

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.

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.

Summary

We added all the Fastly VCL editing features you might require. Many of these features are powered by the falco VCL developer tool, which we contribute to.

To install the extension directly in VS Code, simply search for the Fastly Varnish Configuration Language (VCL) extension. Once added, you can conquer your configurations with the full might of a professional IDE behind you.