PHPStorm: JS Language Injection with custom tags inside template

Question

In needing html templates with embedded javascript on a PHP project I was not satisfied with any solutions I found, so, with Lodash and some regex I created the following solution :

Template:

<script id="profile_greeting" type="text/template">
    <h1>Hello</h1><br>
    My name is <b><@=this.name@></b><br>
    <@ var today = "" + new Date(); @>
    The date is : <@= today @>
</script>

Lodash settings :

_.templateSettings = {
    interpolate: /\<\@\=([\s\S]+?)\@\>/g,
    escape: /\<\@\-([\s\S]+?)\@\>/g,
    evaluate: /\<\@([\s\S]+?)\@\>/g
};

Question:

How do I setup PHPStorm to treat any code inside <@ @> and <@= @> as Javascript (syntax highlight, code completion, etc) while treating the outside as HTML ?

Note:

Code inside should be treated as HTML, and <@ @> pieces should only be treated as javascript when inside this type of tag.

x13 · Accepted Answer · 2015-10-08 10:27:24Z

3

+25

Press Alt+F7 and go to Language Injections and create a new injection that is customized to your wishes.

Maybe this can help.

Edit:

I made a RegExr with the regexp to match your wishes (/<@((?:\s|.)*?)@>/gm). Only trouble is how it should be fed to PHPStorm...

edited Oct 8, 2015 at 10:27

answered Oct 1, 2015 at 15:19

x13

2,2571 gold badge15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Joao Carlos Over a year ago

This is what I tried for several hours before I asked the question. However, I cannot get it to work. At the time, this is what I came up with (obviously does not work) : puu.sh/kuLMa/125327746e.png

x13 Over a year ago

@JoaoCarlos okay, i'm going to try and fix it. So, if you enter <@ it must inject JS until @> except the first =?

x13 Over a year ago

i must go now, i'll try to help tomorrow

Joao Carlos Over a year ago

anything inside <@ and @> is JS, anything inside <@= @> is also JS but as straight evaluation like a PHP <?php echo 'bla'; ?> can be shortened with <?='bla'?>

Joao Carlos Over a year ago

Due to the awesomeness of stackoverflow your answer was awarded the bounty, not because it was correct but because it was the only one haha. Free rep HoopHoop!

|

Collectives™ on Stack Overflow

PHPStorm: JS Language Injection with custom tags inside template

1 Answer 1

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related