Using PhpStorm as the primary IDE for PHP programming is a common solution for Magento developers. Mainly because PhpStorm can be easily configured to fit the needs of Magento development. Considering that not everything is available by default, in this article, I will explain how to implement specific configurations that would make the use of PhpStorm much easier for Magento developers. In particular, I will discuss how to enable the custom Knockout syntax and alternative PHP syntax in PhpStorm. Also, I will provide Magento 2 File and Live Templates.

Magento custom syntax for Knockout

To enable the syntax from the Knockout library in PhpStorm, you need to take the following steps:

Tags

Preferences / Settings -> Editor -> Inspections -> Html -> Unknown HTML tag -> Custom HTML tags (right sidebar)

1. Enable checkbox
2. Expand textarea and add these tags:

Attributes

1. Enables checkbox 
2. Expand textarea and add these tags:

Supporting JavaScript in attributes

Preferences / Settings -> Editor -> Language Injections -> Import (bottom toolbar) -> Choose the file below (Screenshot see below)

phpstorm_langugage_injections_knockout

That’s it! Now you can use the Knockout syntax in PhpStorm. 

PHP alternative syntax

Unfortunately, PhpStorm does not support alternative syntax by default like this:

However, you can enable it by following the steps below:

Solution

1. Press hotkey: Ctrl/CMD + Shift + A

2. Write in the new window Registry

3. Find the item php.brace.alt.syntax in the list and check a checkbox

4. Now you have to see that syntax is highlighted:

Troubleshooters

If your OS is MacOS, the hotkey CMD + Shift + A could open a terminal:

To disable the hotkey in OS just disable it here:

Magento 2 file templates

Magento 2 has many types of files with a different content. It is impossible for a developer to remember all of them. That’s why we copy file examples from the vendor directory. I’ve prepared file templates for Magento 2.

When you create a new file, you have only defaulted templates of IDE:

How to install

Find the item Import Setting in the navigation. It depends on your OS.

And import the archive below:

phpstorm_magento2_file_templates

Select 2 checkboxes as on the screenshot below and restart PHPStorm after:

After relaunching, you have to see new file templates when you create a new file:

How to edit content of templates

Go to Settings → Editor → File and Code Templates and scroll down templates

Preview

Magento live templates

Each frontend developer has to know the feature Emmet.

It is similar to when you write in HTML code:

It will be updated after pressing Tab to:

Shortcuts allow you to write your code faster.

I have examples to show you how to create your own shortcuts for different file types.

How to create

Let’s go to create a custom shortcut kofor to create a knockout foreach function only in HTML files:

Go to Preferences -> Editor -> Live Templates and create a new group:

For example, name it Custom:

After that, create your first live template in the group:

Fill all inputs as on the screenshot:

And after, click Define to choose a language where this shortcut should works:

If you want, you might change the button which should apply your shortcut after pressing. By default, it is Tab, but for custom shortcuts I use Space for example.

BTW, you can replace a static array with a variable to set a cursor to the right place after applying the shortcut.

Replace template text from:

To:

And now it looks like a variable and the button Edit Variables is active, click it:

Here you can set a default value and expression. In expression, you can choose the function clipboard() to set a copied value from your clipboard instead of the variable $ARRAY$ when you apply the shortcut.

How to apply shortcut

Write shortcut:

Press a key that you set. E.g. Tab or Space:

As you can see, the cursor is already in the right place where you have to put a variable of array.

Shared live templates which I’ve created

Download the archive below:

phpstorm_magento2_live_templates

Import them:

And you have to find the new group Magento 2 in Preferences -> Editor -> Live Templates with my templates:

Conclusions

These configurations can help to make the work with the Magento 2 much more effective and more accessible. With alternative PHP syntax, working with control structures would become more simple. In addition, using the described templates would save your time and reduce the routine of creating them manually every time. Feel free to use these configurations and templates to make your experience with PhpStorm more productive.

Check out our other articles and training programs that could boost your skills as an eCommerce developer.