IDE Extensions

The Jig extension provides syntax highlighting for .jig template files with full support for embedded language blocks. It is available for VS Code and compatible editors.

Installation

Install from the VS Code Marketplace or click a button below to install directly in your editor:

Or install from the command line:

code --install-extension svallory.jig

Features

• Syntax highlighting for Jig tags (@if, @each, @component, etc.), mustache expressions ({{ }}), and comments ({{-- --}})
• Host language highlighting — each file extension (.html.jig, .ts.jig, .py.jig, etc.) activates the appropriate host language grammar
• Embedded language blocks via the content type suffix
• Emmet support in .jig and .html.jig files

Supported Languages

The extension ships grammars for the following host languages. Use the file extension for file-level highlighting or the embed identifiers with the : LANG suffix for inline embedded blocks.

Embedded Language Blocks

Use the content type suffix (: LANG) on any block-level tag to get syntax highlighting for the tag's body:

@if(format === 'json'): json
  {
    "name": {{ name }},
    "version": {{ version }}
  }
@end

@each(query in queries): sql
  SELECT * FROM {{ query.table }}
  WHERE id = {{ query.id }};
@end

The identifier after : must match one of the embed identifiers from the table above. Jig expressions ({{ }}) and tags (@tag) inside the block are still highlighted as Jig syntax.

Configuration

Template Disks

Configure template lookup paths in your project's Jig configuration:

jig.mount('default', join(__dirname, 'views'))

Emmet

Emmet is enabled by default for .jig and .html.jig files. If it's not working, add this to your settings.json:

{
  "emmet.includeLanguages": {
    "jig-html": "html"
  }
}