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 log
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
log - 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
console.log("Fired---", $END$); - Applicable context: The context where this live template should take effect. In our case, this would be a Javascript Statement. So check only the Statement box in the JavaScript drop-down area as shown below
The template text field that we modified contains an identifier ($END$)
console.log("Fired---", $END$)
This $END$ is a special predefined variable for placing the cursor once the abbreviation is expanded. To test the new functionality, open up a Javascript file and type log and hit TAB and watch your IDE autocomplete it by expanding the abbreviation with the template text for you. Not only can you use this for printing out logs but also to autocomplete frequently used code.
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 fileName(), camelCase(String), 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 $name$ and $clip$, click on Edit variables. A dialog box as shown below will appear.
Set the expression value of the variables $name$ and $clip$ to fileName() and 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!