During development, isn’t it several 100 times that we need to print something on the screen? (Maybe just to check the flow of execution, especially with the advent of modular development?) Well, we end up typing the same syntax over and over again. Certainly we could do a copy-paste each time but even then you’d need to type the whole thing the first time at least! and the effort involved in copy-pasting from different files is sometimes just so tedious that I’d honestly prefer typing it out! Now for a lazy developer like myself, that’s a lot eh! So why not shorten the syntax ? Live Templates brings us this custom autocomplete feature with PhpStorm/WebStorm.
How do you add custom Live Templates?
In your IDE, Navigate to Settings->Editor->Live Templates. Here you can add the abbreviation and the accompanying autocomplete code as per your wish. As an example, I will show you how you could insert a
console.log('Fired'); statement using the abbreviation
Create a Template Group
The dialog displays a list of already existing templates. What you could do is click on the + button on the extreme right and choose “Template Group” to create a new template group. Give it a name of your choosing. I name it as “custom”
Create the Live Template
Now again hit the + button and choose “Live Template” this time. You will be prompted to enter the following
- Abbreviation: which could be anything of your choosing. Lets set this as
- Description (which is optional): a short readable description of what this template is used for. We will set it as ‘This will print out console.log(); statement’
- Template text: The actual content that will replace the abbreviation. Set this as
The template text field that we modified contains an identifier ($END$)
Further Customization using Variables
Custom variables are quite interesting in the sense that they help you print out expressions. Besides, using them with a combination of a few predefined functions like
clipboard(), etc that can be inserted directly into the Template text will help you customize it further. (A full list of the available functions can be found here)
A custom variable can be simply declared by inserting
$myVar$ (you can use any name of your choosing) into the Template Text field. Its value can be set by clicking on the Edit variables button.
As an example, lets print out the file name in the log along with the system’s clipboard contents. To do this, modify the Template text field as follows:
// we delcare 2 variables $name$ and $clip$ console.log("Inside File $name$", $clip$);
To edit the value of the newly declared variables
$clip$, click on Edit variables. A dialog box as shown below will appear.
Set the expression value of the variables $name$ and $clip$ to
clipboard() respectively and hit OK. That’s it! Simple huh? It’s ready to be tested. If you followed everything correctly, the expanded result should have something like this:
console.log("Inside File app.js", promise); // where app.js is the filename // and the word `promise` was in my clipboard
Live Templates Use Cases
A few more Use-cases of Live Templates could be to generate custom HTML biolerplate code, autocomplete for React/Angular Components (with predefined properties), or in twig (to shorten the path/form_row syntax), or in Php (Symfony, to generate forms/actions) and the possibilities are endless.
Make the most of this handy feature!