Interpret TWIG's {% js %} as <script> in PHPStorm

Question

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.

Answer 1

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 Preferences → Editor → Language 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")

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")