Stencil for Visual Studio Code.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.vscode
images
snippets
syntaxes
.gitignore
.vscodeignore
CHANGELOG.md
LICENSE.txt
README.md
package.json
stencil-html-language-configuration.json
stencil-language-configuration.json

README.md

Stencil for Visual Studio Code

This extension adds support for the Stencil template language.

Features

Syntax highlighting

This extension includes a TextMate grammar wirtten specifically for Stencil. This should allow for the best possible syntax highlighting:

Stencil syntax highlighting

Also included is a Stencil for HTML language that supports both Stencil and HTML:

Stencil for HTML syntax highlighting

Snippets

Snippets are included for all common tags:

  • block: a block tag.
  • extends: an extends tag.
  • filter: a filter tag.
  • for: a for tag to iterate over an array.
  • forempty: a for tag to iterate over an array that includes an empty tag.
  • fordict: a for tag to iterate over a dictionary.
  • fordictempty: a for tag to iterate over a dictionary that includes an empty tag.
  • if: an if tag.
  • ifelse: an if tag that includes an else tag.
  • ifif: an if tag that includes an elif tag.
  • ififelse: an if tag that includes both an elif tag and an else tag.
  • include: an include tag.

Snippets include tab stops so you can easily move around:

Snippets

Autoclosing pairs are set up for {{, {% and {# so you can easily type variables, tags and comments:

Autoclosing pairs

You can also use the Toggle Comment keyboard shortcut to create comments. This will generate a {# #} comment in Stencil templates and a <!-- --> comment in Stencil for HTML templates.

Indentation

Indentation rules are included for both Stencil and Stencil for HTML. Thanks to these rules, Visual Studio Code will suggest the proper indentation.

This makes moving lines around a lot easier:

Indentation

Even better, the Reindent Lines command will just work:

Reindent command

Configuration

This extension is set up to use the following file extensions:

  • .stencil: Stencil templates.
  • .html.stencil: Stencil for HTML templates.

If you use Stencil exclusively for HTML and would like to use the .stencil extension for Stencil for HTML instead, add the following to your Visual Studio Code preferences:

"files.associations": {
    "*.stencil": "stencil-html"
}

Known Issues

Mixed grammars are not without issues and neither is Stencil for HTML. Because of the way grammars are embedded, Stencil will not be supported in embedded CSS or JavaScript. The template will work fine, but syntax highlighting and indentation will be off. I am looking into ways to improve this, but a perfect solution may not be possible.