Smiley Happy Coder

Lyle Barras

Lyle is Smiley Happy Coder

Developing for the web since 1999, that's 16 years

PHP Storms Live Templates

I have been using PHP Storm for a long time now. I love it, its such an amazing IDE that I still just scratch the surface of.

One thing I use a lot is Live Templates.
PHP Storm Live Templates

What are Live Templates?

Live Templates are what you might think of as snippets, small chunks of code (or maybe just text) that you use and re-use all the time.
In my mind, a dark and scary place, the reason that Live Templates aren’t called snippets is because they go way above and beyond what you’d think of as a snippet.

Just snippets

Yes, you could just use Live Templates as a snippet library and that would be fine. You’d save a bunch of time and everyone would be happy. I certainly use simple templates.  Like a lot of developers I use Bootstrap a fair old bit. One thing I write, like I’m sure you do, is the syntax for a row.
Just like this
<div class="row">
</div>

Now you might be thinking that this chunk is only twenty odd characters and you’d be right. So why bother. Well in my case I just type
brow
And then hit tab.

Live Templates can be initialised by a few different keys, I leave mine as the tab key.

Now the astute amongst you will immediately spot that this is only four characters. Well thats better for me, its faster and easier.

Lets get a bit cleverer

We’ve seen pretty much the simplest implementation of a Live Template, and while its cool, we can do better. Much, much better.

Live Templates have the ability to insert your cursor for you just using a variable that you can enter.
This means that the above snippet actually looks like this.

<div class="row">
    $END$
</div>

This now means that my cursor is just sitting there in the right place, the obligatory four spaces indented, ready for me to just keep going.

Cleverer still, you say?

Okay so we’ve added a nugget that helps, but sticking with the Bootstrap theme lets get a bit cleverer.

I often use columns in Bootstrap and they’re a fair chunk of code. Something like this.

<div class="col-sm-12 col-md-6 col-lg-4">
</div>

In order to create a column I need to specify how wide this column will be at each break point.
So in this case the mobile view, it will be the full width, on tablets it’ll be half the width and on a desktop screen it’ll be a third of the width.
Now in reality we could just create a snippet for each possible permutation of these columns but as I’m sure you’ll agree there could potentially be hundreds.

Live Templates to the rescue!

We can create a snippet that’ll really simplify this process by using variables. Similar to the $END$ variable we saw above but with the ability to type into the variable.
Now my snippet looks like this.
<div class="col-sm-$small$ col-md-$medium$ col-lg-$large$">
    $END$
</div>

You’ll notice that there are three variables in this snippet, one for the number of columns at each break point.
Now when I type my abbreviation

bcol

My cursor is placed on the first variable, $small$. I type 12 and hit tab. Now my cursor moves to the $medium$ variable and I repeat the process.

All in all, generating a column takes me 9 to 11 key strokes depending on the sizes I use. Now thats an improvement by anyones standards.

One more

Tables are a pain in the ass, there’s no two ways about it. There is a load of code required so this sounds like the prefect candidate for a Live Template to me.

Again, I’m sticking with Bootstrap, I have created the following snippet.

<table class="table table-hover table-bordered table-striped">
 <thead>
  <tr>
   <td>$column1title$</td>
   <td>$column2title$</td>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <td>$column1title$</td>
   <td>$column2title$</td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <td>$column1data$</td>
   <td>$column2data$</td>
  </tr>
 </tbody>
</table>

In this template I’ve used just four variables but you’ll spot that the $column1title$ and $column2title$ variables are repeated in the table head and foot elements.
PHP Storm will just fill in what I type in the first instance of the variable in the second as well. Cool huh?

And on a side note, since PHPStorm is a code environment if you add tabs or spaces to indent your code the template will honour that for you.

Okay last one, Promise!

Another thing that takes time is forms. So as you can imagine I created some Live Templates for that too!

<div class="form-group">
 <label for="$name$">$Nice_name$</label>
 <input type="$type$" class="form-control" id="$name$" placeholder="Please enter your $placeholder$">
</div>

This snippet has a couple of clever bits to it. Firstly, as you type the name of the element the label and ID are filled in.
Then you can choose a type, say email for example.

Now the really clever part is the placeholder and $Nicename$ variables. These makes use of expressions within the Live Template.
They take the $name$ variable and change the first letter to uppercase.
The expression looks like this.

capitalize(name)

I have recently published my templates on my Github profile

  • Top