Intro to PHPStorm Live Templates

Improve your development speed by using repeatable template keywords.

PHPStorm comes with a handy feature called live templates, which helps you avoid repetitive typing.

Let’s say that you are writing SASS and you find yourself repeating a breakpoint over and over:

@include breakpoint($breakpoint-md) {
// Some CSS attributes.

With live templates, you can instead type a shortcode that will generate the breakpoint for you. In this example we'll be using ibk as an abbreviation for include breakpoint and we will generate another variant that includes the $breakpoint-md as an argument passed to the mixin.

ibk will generate @include breakpoint() with no arguments predefined and position the cursor inside the mixin parameter. ibk:md will generate @include breakpoint($breakpoint-md)

To begin setting up a Live Template, go to File -> Settings -> Editor -> Live Templates

You’ll see the following window with some live templates already available, depending on which plugins you have installed. For this example we will generate a new “Template group” by clicking on the “+” icon:

Live Template configuration interface

PHPStorm is going to prompt for a name for the new group. In this example, we will name the group SASS.

Once you have the SASS template group created, you need to click on the “+” icon again and add the actual live template.

You can now add the abbreviation ibk, a short description, and the code.

The cursor will be positioned on $breakpoint$ first and then to $END$.

Define the language as CSS, check the box “Reformat code according to style”, hit “Apply” and “OK” to close the dialog box. The result should look something like this:

Live Template configuration interface

The following shows the Live Template in action:

Live Template in use

If you want to save more time, you can avoid typing the breakpoint variable as well, with a variant of the breakpoint Live Template you’ve created.

Live Template creation interface

With this variation, you eliminate the need to explicitly typing $breakpoint-md as an argument for the mixin. See the Live Template in action below:

Live Template in use

Wrapping a Selection with Live Templates

If you need to wrap a selection in a breakpoint, you can add a new parameter $SELECTION$ to a live template:

Important: You need to use the keyword $SELECTION$ for this to work.

After editing ibk:md the code should now look like this:

@include breakpoint($breakpoint-md) {

You can achieve the following by selecting the code you want to wrap and using the keyboard shortcut Control + Alt + J.

Live Template in use

Live Templates are great for increasing development speed and productivity whenever you must repeat code. Reach out to us at @ChromaticHQ on Twitter and let us know how you have used them and how they have helped improve your development process.