NationBuilder Liquid

The development experience for NationBuilder templates has comparitively sparse tooling. This extension is a first attempt to remedy that.

This is a VS Code extension that adds go-to-definition navigation for {% include %}, {% subpage %}, and {% tag %} tags in a NationBuilder Liquid theme codebase.

Features

Ctrl+Click (or Cmd+Click on macOS) on a quoted name inside a supported tag to jump directly to the referenced file.

{% include "my_rad_component" %}

Ctrl+Clicking on my_rad_component opens _my_rad_component.html, wherever it lives in your workspace.

{% subpage thing with "my_incredible_subpage" %}

Ctrl+Clicking on my_incredible_subpage opens _my_incredible_subpage.html the same way.

{% tag thing with "my_awesome_tag" %}

Ctrl+Clicking on my_awesome_tag opens _my_awesome_tag.html the same way.

Usage

With the extension installed, open any Liquid template file and Ctrl+Click on the quoted name inside an {% include %}, {% subpage %}, or {% tag %} statement.

File Resolution

Names are resolved by searching the workspace for a file named _<name>.html. The search is recursive, so files can live anywhere in your project.

Requirements

Your workspace should have .html files associated with the Liquid language. Add this to .vscode/settings.json:

{
    "files.associations": {
        "*.html": "liquid"
    }
}

Roadmap

Ideas for future versions:

"Find usages" for includes, subpages, and tags
Autocompletion for NationBuilder Liquid objects (reference)
Autocompletion for {% include %} file names

Contributing

Issues and pull requests are welcome at github.com/pjpscriv/vscode-nationbuilder-liquid.