ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Craft-Twig

A Craft CMS influenced Twig bundle for Sublime Text and Textmate

Details

Installs

  • Total 13K
  • Win 5K
  • Mac 7K
  • Linux 2K
Mar 28 Mar 27 Mar 26 Mar 25 Mar 24 Mar 23 Mar 22 Mar 21 Mar 20 Mar 19 Mar 18 Mar 17 Mar 16 Mar 15 Mar 14 Mar 13 Mar 12 Mar 11 Mar 10 Mar 9 Mar 8 Mar 7 Mar 6 Mar 5 Mar 4 Mar 3 Mar 2 Mar 1 Feb 29 Feb 28 Feb 27 Feb 26 Feb 25 Feb 24 Feb 23 Feb 22 Feb 21 Feb 20 Feb 19 Feb 18 Feb 17 Feb 16 Feb 15 Feb 14 Feb 13
Windows 0 0 0 1 0 1 0 0 1 0 0 0 1 0 1 0 0 0 0 0 1 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0
Mac 0 1 1 1 0 0 1 2 0 0 1 0 0 1 1 0 1 0 0 0 0 1 0 0 0 1 0 0 0 0 0 1 0 0 1 0 0 0 2 0 0 1 0 0 0
Linux 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Readme

Source
raw.​githubusercontent.​com

Craft Twig

A Craft CMS influenced Twig bundle for Sublime Text and Textmate, customized to work with Craft CMS specific Twig extensions.

Craft-Twig Demo Video

Features

Craft Twig provides syntax highlighting for Craft templates, several snippets available via tab trigger, a couple key bindings, and comment support.

Twig Tags (via key bindings)

ctrl+shift+[      {{  }}
ctrl+shift+5      {%  %}
command + /       {#  #}

Twig Tags (via tab trigger)

}}                {{  }}
%%                {%  %}
##                {#  #}

do                {% do ... %}
extends           {% extends "template" %}
from              {% from "template" import "macro" %}
import            {% import "template" as name %}
importself        {% import _self as name %}
inc, include      {% include "template" %}
incp              {% include "template" with params %}
inckv             {% include "template" with { key: value } %}
use               {% use "template" %}

autoescape        {% autoescape "type" %}...{% endautoescape %}
block, blockb     {% block name %} ... {% endblock %}
blockf            {{ block("...") }}
embed             {% embed "template" %}...{% endembed %}
filter, filterb   {% filter name %} ... {% endfilter %}
macro             {% macro name(params) %}...{% endmacro %}
set, setb         {% set var = value %}
spaceless         {% spaceless %}...{% endspaceless %}
verbatim          {% verbatim %}...{% endverbatim %}

if, ifb           {% if condition %} ... {% endif %}
ife               {% if condition %} ... {% else %} ... {% endif %}
for               {% for item in seq %} ... {% endfor %}
fore              {% for item in seq %} ... {% else %} ... {% endfor %}

else              {% else %}
endif             {% endif %}
endfor            {% endfor %}
endset            {% endset %}
endblock          {% endblock %}
endfilter         {% endfilter %}
endautoescape     {% endautoescape %}
endembed          {% endembed %}
endfilter         {% endfilter %}
endmacro          {% endmacro %}
endspaceless      {% endspaceless %}
endverbatim       {% endverbatim %}

Twig Tags, Customized for Craft (via tab trigger)

The following tab triggers output a simple example of a loop for their respective Craft tags.

asset                    craft.assets.one()
assets                   craft.assets loop
categories               craft.categories loop
entries                  craft.entries loop
feed                     craft.feeds.getFeedItems loop
tags                     craft.tags loop
users                    craft.users loop

cache                    {% cache %}...{% endcache %}
children                 {% children %}
exit                     {% exit 404 %}
header                   {% header "HEADER" %}
hook                     {% hook "name" %}
ifchildren               {% ifchildren %}...{% endifchildren %}
matrix, matrixif         Basic Matrix field loop using if statements
matrixifelse             Basic Matrix field loop using if/elseif
matrixswitch             Basic Matrix field loop using switch
nav                      {% nav item in items %}...{% endnav %}
paginate                 Outputs example of pagination and prev/next links
redirect                 {% redirect "login" %}
redirectinput            {{ redirectInput("url") }}
requirelogin             {% requireLogin %}
requirepermission        {% requirePermission "spendTheNight" %}
switch                   {% switch variable %}...{% endswitch %}

// Paths
alias                    alias("@baseUrl/images/image.png")
svg                      svg("@webroot/assets/svgs/icon.svg")

// CSS/JS
css                      {% css %}...{% endcss %}
js                       {% js %}...{% endjs %}
registercssfile          {% do view.registerCssFile ("/resources/css/global.css") %}
registerjsfile           {% do view.registerJsFile("/resources/js/global.js") %}

// Output Helpers
csrf                     {{ csrfInput() }}
head                     {{ head() }}
beginbody                {{ beginBody() }}
endbody                  {{ endBody() }}

// craft.app.request
getparam                 craft.app.request.getParam()
getbodyparam             craft.app.request.getBodyParam()
getqueryparam            craft.app.request.getQueryParam()
getsegment               craft.app.request.getSegment()

// Settings
app                      craft.app.SETTING
config                   craft.app.config.general.SETTING
getenv                   getenv("VARIABLE")

// Sites and Locales
ismultisite              craft.app.isMultiSite
language                 craft.app.language
locale                   craft.app.locale

alllocales               craft.app.i18n.allLocales
applocales               craft.app.i18n.appLocales
editablelocaleids        craft.app.i18n.editableLocaleIds
editablelocales          craft.app.i18n.editableLocales
getlocalebyid            craft.app.i18n.getLocaleById(1)
primarysitelocale        craft.app.i18n.primarySiteLocale
sitelocaleids            craft.app.i18n.siteLocaleIds
sitelocales              craft.app.i18n.siteLocales

// Closing tags
case                     {% case "value" %}
endcache                 {% endcache %}
endifchildren            {% endifchildren %}
endcss                   {% endcss %}
endjs                    {% endjs %}
endnav                   {% endnav %}

Craft Twig Functions (via tab trigger)

ceil                     ceil()
classname                className(${1:object})$0
clone                    clone(${1:object})$0
floor                    floor()
max                      max()
min                      min()
round                    round()
shuffle                  shuffle()
siteurl, siteurla        siteurl('path'), siteurla('path', params, 'https', siteIds)
url, urla                url('path'), url('path', params, 'https', false)

Debugging

dump            <pre>{{ dump() }}</pre>

PHP

dd              Craft::dd();

Installation

TextMate, and most editors that support TextMate bundles, allow the installation of bundles simply by extracting an archive or cloning the repository into the application's bundle directory. This bundle is no different. Below is a list of common bundle directories.

Sublime Text

To install this bundle in Sublime Text, download the bundle via Package Control or, if you wish to install the theme manually, a few extra steps are required:

  1. Open Sublime Text and in the Preferences menu click Browse Packages.
  2. Copy Craft-Twig.tmbundle into the Packages folder
  3. Restart Sublime Text.

A note on upgrading

If you are upgrading to a new major version (e.g. v3 => v4) you may run into a few errors having to do with cache or sessions. If you run into errors, try the following (this example use paths for OSX and Sublime Text 3):

  1. Uninstall your previous version of Craft-Twig
  2. Delete any cached version of Craft-Twig in
    ~/Library/Application Support/Sublime Text 3/Cache/
  3. Delete the Sublime session in
    ~/Library/Application Support/Sublime Text 3/Local/Session.sublime_session
  4. Delete the Package Control cache in
    ~/Library/Application Support/Sublime Text 3/Packages/User/Package Control.cache
  5. Restart Sublime Text
  6. Reinstall the Craft-Twig package

TextMate

  • /Library/Application Support/TextMate/Bundles

Textmate 2

You can install this bundle in TextMate 2 by opening the preferences and going to the bundles tab. After installation it will be automatically updated for you.


Themes

This bundle comes with two themes,

  • Artisan Light
  • Artisan Dark

These Themes are designed for use with the Craft-Twig bundle, but also fit general use. Feel free to use them as a base theme for constructing your own custom theme as well.

Scopes

To aid customizing your own theme, here's a list of what each Twig element is scoped to:

Tags:
    {{ }}:
        Tag:       punctuation.definition.tag.output.twig
        Scope:     meta.tag.output.twig
    {% %}:
        Tag:       punctuation.definition.tag.expression.twig
        Scope:     meta.tag.expression.twig
    {# #}:
        Tag:       punctuation.definition.tag.comment.twig
        Scope:     comment.block.twig

Embedded:
    {% css %}: source.css.embedded.twig
    {% js %}:  source.js.embedded.twig

Constants:
    Language:      constant.language.twig
    Numeric:       constant.numeric.twig
    Entities:      constant.character.entity.html

Operators:
    Arithmetic:    keyword.operator.arithmetic.twig
    Assignment:    keyword.operator.assignment.twig
    Bitwise:       keyword.operator.bitwise.twig
    Comparison:    keyword.operator.comparison.twig
    Logical:       keyword.operator.logical.twig

Strings:
    Single:        string.quoted.single.twig
    Double:        string.quoted.double.twig

Arrays:            punctuation.section.twig
    Accessor:
        Begin:     punctuation.section.twig
        End:       punctuation.section.twig
    Separator:     punctuation.separator.twig
        Keys:      support.type.argument.twig
Hashes:            punctuation.section.twig
    Accessor:
        Begin:     punctuation.section.twig
        End:       punctuation.section.twig
    Separator:     punctuation.separator.twig
        Keys:      support.type.argument.twig

Tags:              entity.name.tag.twig
Macros:            entity.name.function.twig

Functions:         entity.name.function.twig
    Parens:
        Begin:     punctuation.section.twig
        End:       punctuation.section.twig
    Arguments:     support.other.variable

Filters:           support.function.filters.twig
    Parens:
        Begin:     punctuation.section.twig
        End:       punctuation.section.twig
    Arguments:     support.other.variable

Tests:             support.function.tests.twig

Extras

There are a few additional things in /Extras folder

  • A Craft-Twig Unit Test.twig file for testing the Grammar and Themes
  • Sublime Text Keymaps

Maintenance & Contributions

It's an ongoing project to keep the Craft-Twig bundle updated with changes in Craft and there are plenty of ways the bundle could be improved. If you'd like to contribute to the Craft-Twig bundle, please consider submitting a pull request, reporting an issue, providing examples of how you would like to see the behavior of the bundle improved, or just giving someone in the community a high five in the hallway!

As Language Grammars are a bit hard to get involved with, I've begun documenting the experience a bit in the off chance it will help someone else save a few hours: Notes on how to create a Language Grammar and Custom Theme for a Textmate Bundle.

References


Notes & Thanks

This repo has been forked from the popular PHP-Twig Textmate bundle. A lot of updates have been made, a lot of comments have been added, and parts of the bundle have been re-written from scratch (there is really no other way to make sense of maintaining a Language Grammar)!

The Craft Twig fork:

  • Adds heavy commenting and new structure to the Craft-Twig.tmLanguage file
  • Adds auto-pair key bindings for Twig action tags {% %}, output tags {{ }}
  • Adds support to use the comment shortcut command + /
  • Adds several additional twig snippets
  • Adds several additional Craft-specific snippets
  • Adds quick documentation snippets for referencing Craft template tags and syntax
  • Add css and javascript syntax highlighting support within the appropriate Craft tags
  • Adds two Themes: Artisan Light and Artisan Dark
  • Updates various scopes in the Language Grammar in attempt to accommodate more Themes
  • Updates the README to document the existing features and new snippets
  • Updates the README so the language refers to this fork
  • Has not been tested on Windows or Linux

Happy tabbing.