Ctrl/Cmd+click any Eleventy include path and jump straight to the file.
Usage
Install, open an Eleventy project, and Ctrl/Cmd+click the path inside any include tag:
{% include "partials/header.njk" %}
↑ Ctrl/Cmd+click anywhere on the path
That's the whole pitch. No config needed for default Eleventy projects (_includes/ at the root).
What it handles
{% include "header.njk" %}— Nunjucks, Liquid{% extends "base.njk" %}— Nunjucks{% import "macros.njk" as m %}and{% from "macros.njk" import macro %}{% render "card.liquid" %}— Liquid{% layout "base.njk" %}- Front-matter
layout: base.njk(inside the leading---block) - Whitespace control:
{%- include "x.njk" -%} - Relative paths:
{% include "./sibling.njk" %} - Bare names without extensions:
{% include "header" %}resolves toheader.njk,header.html, etc.
Custom directory setup
If your dir.input or dir.includes isn't the default, drop this in your workspace's .vscode/settings.json:
{
"eleventyNavigator.inputDir": "src",
"eleventyNavigator.includesDir": "_includes"
}
These mirror the same-named keys in your eleventy.config.js.
All settings
| Setting | Default | Notes |
|---|---|---|
eleventyNavigator.inputDir |
"." |
dir.input |
eleventyNavigator.includesDir |
"_includes" |
dir.includes (relative to input) |
eleventyNavigator.layoutsDir |
"" |
dir.layouts (optional) |
eleventyNavigator.fallbackExtensions |
[".njk", ".html", ".liquid", ".md", ".hbs", ".ejs", ".mustache", ".11ty.js", ".11ty.cjs"] |
Used when reference has no extension |
eleventyNavigator.extraSearchDirs |
[] |
Extra dirs (relative to workspace root) |
Known limits
- Layout aliases aren't resolved. If your config calls
addLayoutAlias("post", "layouts/post.njk"), clicking onlayout: postwon't follow the alias — click on the real file path instead. - Dynamic includes aren't resolved.
{% include myVariable %}can't be looked up statically.
Special thanks to Zach — from Sunny.