Skip to end of metadata
Go to start of metadata

Redirection Notice



This tutorial covers the use of Template Data Language to work with mixed syntax in PhpStorm.

From time to time we are mixing different programming languages in one file. If there is only one or two occurrences of these small, embedded language islands, using Language Injections is the way to go. But what if we have a lot of them? For example, a JavaScript or CSS file in which we are making use of a PHP variable or function? How do we get mixed syntax highlighting, code completion and inspections? There's a nice trick to do this: configuring the Template Data Language.

Consider the following JavaScript file. In it, we are making use of a PHP variable which we want to show in an alert when the current document has loaded. We can also spot a syntax error: I missed the $ to access the variable. How do we make PhpStorm recognize both the JavaScript code and PHP code?

Let's go through the steps to have PhpStorm recognize different languages in one file.

1. Rename the file so PhpStorm treats it as PHP & extension differs from *.php

As a first step, we should rename our file from alert.js to alert.js.php (that's just for example; the extension can be different, so use one you are comfortable with). Why do we need to change the extension? It's essential to separate our files we would like to have custom languages in from other php files (in our case) not to screw up highlighting/completion/analysis for all files. Why .js.php? Once deployed, this file will have to be executed by PHP. Of course we can reconfigure our server to run JavaScript files through the PHP interpreter, but the current approach is probably easier. Here's the result of renaming our file:

2. Associate new file type with PHP (or other language)

We need to associate the new file type (*.js.php) with PHP (in our case) in Settings | File Types. If you do not want to use such custom extension, then you'll have to assign the full file name as a pattern, which is not recommended.

Please note that this setting is IDE-wide, so this file type association will affect all projects. Therefore, having a custom extension is the best way to proceed with it.

3. Set the Template Data Language through the project settings

Now PhpStorm recognizes the PHP syntax but no longer recognizes JavaScript. From the settings (Ctrl+Alt+S or Cmd+, on Mac OS X), find the Project Settings | Template Data Languages. In here, we can specify a secondary language for a specific file, folder or the entire project. For our example, we can select JavaScript.

Once the Template Data Language has been specified, PhpStorm recognizes both languages. Our IDE provides syntax highlighting, code completion, inspections, refactorings and so on.

We can do similar things with CSS and embedded PHP. Here's a .css.php file for which I've specified the Template Data Language as CSS. It features inspections for both the CSS part of the syntax as well as the embedded PHP.

  • No labels