Twig support in PhpStorm

Posted on by Maarten Balliauw

Twig is a template engine for PHP. While it evolved out of the Symfony framework, it can be used with other frameworks as well. It’s fast (compiles to optimized PHP code), it’s secure (creates a sandbox to run templates in). And it’s supported by PhpStorm!

PhpStorm provides syntax highlighting for all *.twig files in our project. Note that we can also use code folding for Twig blocks as well as for HTML tags. All HTML features are also available in the Twig editor, such as intentions, live templates and Emmet support.

Twig tags (surrounded with { and }) are recognized by the IDE and will trigger autocompletion and suggestions. For example if we want to create a block in our Twig template, PhpStorm provides autocompletion:

Autocompletion for file names in include, extends and import tags is also available. We can trigger autocompletion using the Ctrl+Space (Cmd+Space on Mac) keyboard shortcut.

Navigation support is available as well. Open file in Editor can be triggered by holding down the Ctrl (Cmd on Mac) key and clicking the referenced Twig file.

If needed, we can also modify the code style for Twig. From the File | Settings menu, we can open the Project Settings | Code Style | Twig node and specify tab size, indentation and so on.

Let us know how you are using Twig support! We appreciate your feedback in the comments below or in our forums!

Develop with pleasure!
– JetBrains PhpStorm Team

Comments below can no longer be edited.

13 Responses to Twig support in PhpStorm

  1. David Corbacho says:

    June 11, 2013

    Great addition. This will make a pleasure to develop themes in Drupal 8.

  2. Markus Kress says:

    June 12, 2013

    PHPTAL-Support would also be great => http://phptal.org/

  3. Gemorroj says:

    June 14, 2013

    Unfortunately, phpstorm always believed twig templates html documents (file.html.twig). But in fact they can be, for example, javascript documents. (file.js.twig)

  4. David says:

    June 14, 2013

    Hi,

    I can’t get autocompletion and navigation to work when templates are in different folders/bundles.

    Is there any way to get it working like in Eclipse?

    Thanks in advance.

  5. Steve Mobs says:

    May 28, 2014

    I have a block in a twig template like this:


    {% block head_js %}
    $(function(){
    ...
    });
    {% endblock %}

    Is it possible to enable Javascript Syntax Highlighting for that block ?

    • Liubov Melnikova says:

      May 28, 2014

      1) If you can – give such files some complex extension (e.g. *.twig.js). This is just to have some unique file name pattern.
      2)
      – If you did #1 – assign such pattern to “JS Files” file type in Preferences | File Types.
      – If not – you have to re-assign *.js pattern from “Twig files” to “JS files”. Only files that will be associated with “JS files” will have JS support. Remember – this affects all projects.

      3) Preferences | Template Data Language – find your file(s) or whole folder(s) and assign “Twig” in the right column to them.

  6. juan says:

    September 16, 2014

    it would be nice if Twig variables were autocompleted after their first use in a Twig template. **I’m NOT talking about autocompletion of variables passed from controllers!**. Just the variables used in the template itself. It would be optimal if this ‘local variable detection’ would allow developers to quickly Rename a Twig variable in a template (like it happens with Shift + F6 in a PHP script).

    Was really hoping these things would be possible in PhpStorm 8, released today, but I can’t do those things

Subscribe

Subscribe for updates