Twig Language 2 installs statistics

<div align="center">

Twig Language 2

Syntax highlighting, snippets, hover hints, and Twig formatting for Twig templates in VS Code

Open a .twig file and get highlighting, 113 Twig and Craft CMS snippets, and a formatter for the whole document or a selection.

<p align="center"> <a href="https://marketplace.visualstudio.com/items?itemName=mblode.twig-language-2"> <img src="https://vsmarketplacebadges.dev/version-short/mblode.twig-language-2.svg?style=flat&colorA=000000&colorB=000000" /> </a> <a href="https://github.com/mblode/vscode-twig-language-2/blob/master/LICENSE.md"> <img src="https://img.shields.io/github/license/mblode/vscode-twig-language-2?style=flat&colorA=000000&colorB=000000" /> </a> </p> </div>

Install

Search for Twig Language 2 in the VS Code extensions view, or run this in the Quick Open bar (Cmd+P):

ext install mblode.twig-language-2

Quickstart

Open any .twig or .html.twig file. The language activates on its own and both .twig and .html.twig are already associated with it.

Type a snippet prefix and press Tab:

{# type "ife" then Tab #}
{% if condition %}
	{# body #}
{% else %}
	{# body #}
{% endif %}

Then run Format Document (Shift+Alt+F). Formatting also works on a selection through Format Selection. JSON, CSS, SCSS, JavaScript, and TypeScript inside a template are highlighted as themselves.

Snippets

113 prefixes, covering plain Twig and Craft CMS. A sample of what each expands to:

Prefix	Expands to
if, ife	{% if %}, with an {% else %} branch
for, fore	{% for item in items %}, with an {% else %} branch
block, extends, inc, embed	template inheritance and includes
set, macro, filter, verbatim	the matching Twig tag pair
entries, assets, categories, users	a craft.* query loop
cache, nav, paginate, switch, redirect	Craft CMS tags
formlogin, formuserregistration, formsearch	a complete Craft form, CSRF token included

Hovering a Twig tag, filter, or function shows what it does. src/snippets/snippets.json is the full list; entries marked "craft": true are Craft CMS snippets.

Snippets write Twig strings with double quotes, such as {% include "template" %}. Set twig-language-2.snippetQuotes to single for {% include 'template' %}; HTML attribute quotes stay double. Set twig-language-2.craftSnippets to false to hide the Craft CMS snippets (switch, nav, cache, entries, the Craft forms and helpers) and keep the plain Twig ones.

Project-specific tests, filters and functions from your own Twig extensions can be added for completion and hover. Any name after is or is not is highlighted as a test.

"twig-language-2.customTests": { "numeric": "True when the value is numeric." }

Go to template

Ctrl/Cmd-click, Go to Definition (F12) or Peek Definition on a template name opens it. This works for include, extends, embed, import, from and use tags, include() and source() calls, and arrays of names. Names resolve against twig-language-2.templatePaths in the workspace folder (templates, views, src/templates, then the folder itself), then the current file's folder. Names without an extension also try .twig, .html.twig, .html and index files, as in Craft. @Namespace/ names use twig-language-2.templateNamespaces:

"twig-language-2.templateNamespaces": { "App": "src/App/templates" }

Names built at runtime, and names that do not match a file, have no definition.

Formatting

Version 0.11 replaces PrettyDiff with a formatter built for Twig and HTML. Run Format Document, Format Selection, or enable format on save:

"[twig]": {
  "editor.defaultFormatter": "mblode.twig-language-2",
  "editor.formatOnSave": true,
  "editor.insertSpaces": true,
  "editor.tabSize": 2
}

Twig expressions are recognized before HTML attributes, so comparisons and nested quotes stay intact. Formatting preserves attribute case and order, inline text boundaries, string contents, comments, whitespace trim markers, and raw/verbatim/pre/textarea bodies. HTML and Twig nesting are tracked separately to support conditional HTML wrappers. Selection formatting uses the surrounding document's indentation and edits only complete selected lines.

JavaScript and CSS in script/style elements use bundled Prettier when safely parseable. Twig-generated code that cannot be parsed independently, custom js/css/scss blocks, data scripts, and multiline Twig expressions stay unchanged. No PHP, Rust, project dependencies, or Prettier configuration is required. Workspace Prettier plugins and Tailwind class sorting are not loaded.

Existing line breaks and blank lines are retained; inline elements and text are not expanded or reflowed. Leading line indentation can change rendered whitespace, especially with CSS white-space rules or captured template output. Keep exact-whitespace sections inside an ignore region:

{# twig-ignore-start #}
  content to keep exactly as written
{# twig-ignore-end #}

HTML comment markers and paired prettier-ignore-start/end and legacy parse-ignore-start/end markers also work. Unclosed tokens return no edits and a short status message, with details in the Twig Language 2 Output channel. Formatting runs in a cancellable worker with a 2 MiB document limit.

Configuration

Settings apply immediately and support workspace, folder, and [twig] overrides.…