3

Does anyone know how to get PHPStorm interpret {% js %} as <script> for correct syntax highlighting in PHPStorm?

Background: I'am always doing this:

{% js at endBody %}
    {% if false %}<script>{% endif %}
    document.querySelector('body').classList.add('overlay');
    {% if false %}</script>{% endif %}
{% endjs %}

which I would like to avoid.

1
  • No solution yet. Here's the topic > ticket on Jetbrains site – Leoncio Apr 19 at 14:10
9

You can do this using PhpStorm’s Language Injections feature.

In fact, as of PhpStorm 2017.3, it has included support for {% script %} tags out of the box.

To extend that to {% js %} tags, go to PreferencesEditorLanguage Injections, and search for “twig: custom statement javascript”. Double-click on it to edit it, and add the following line to the Places Patterns setting:

+ twigCustomStatement("js")

The “twig: custom statement javascript” language injection settings

Click OK and then Apply to save.

You can also add support for interpreting {% css %} tag contents as CSS by duplicating that language injection, setting its Language ID to CSS, and setting its Places Pattern to:

+ twigCustomStatement("css")
The settings for a new CSS language injection
2
  • Very nice. Any idea, if it is possible to make this valid with your solution: var host = '{{ craft.request.hostInfo }}'; Without script tags inside PHPStorm will complain. – Matthias Redl-Mann Apr 21 at 14:14
  • @MatthiasRedl-Mann I’m not sure if that’s possible, sorry. – Brandon Kelly Apr 22 at 1:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.