Just add.html.twig to defaultTemplateExtensions and update your template file extension to.html.twig. PHPStorm will pick up both html and twig syntax highlighting. Configuration. All of your system's general configuration settings go in here. Twig Support is an official plugin from Jetbrains bundled with PhpStorm, so just enable it in the settings and you are done. Auto-Complete Craft CMS 3 APIs in Twig with PhpStorm The Symfony plugin combined with a little magic will give you full auto-complete of all Craft CMS APIs in your Twig templates with PhpStorm! PhpStorm is a fantastic editor for developing web-based projects as well as backend projects. 使用PhpStorm和Xdebug，您现在可以在这两个流行模板引擎的原始未编译.twig和.blade.php文件中进行步骤调试 。 这里提供了所有调试优势：查看上下文，本地和全局变量，添加监视，逐步运行等等！.
A password manager, digital vault, form filler and secure digital wallet. 1Password remembers all your passwords for you to help keep account information safe. The newest version of 1Password for Windows was released in May 2018. 1Password 7 for Windows is available as part of a 1Password membership or as a standalone license. It supports 1Password accounts, local folders, and Dropbox. 1Password 7 for Windows is included with your subscription if you have a 1Password membership, or if you belong to a team or family account. One password 7.
Drupal VM comes preconfigured to support Xdebug but being super new at Twig debugging/Xdebug, it took quite a bit of research to get it to the point where I can debug Twig templates within PHPStorm. I tried to document my journey for others to check out, hopefully it helps!
Requirements:
- Drupal 8.6.x site running in Drupal VM (I’m also using BLT)
- PHPStorm 2018/2019
- Devel module enabled
Configure the VM to use Xdebug
This bit of YAML is what is in my VM configuration file. I’m using this with Acquia’s BLT but, it should work with regular Drupal VM configurations too.
After changing your configuration, re-provision your VM by running vagrant provision.
Something that was specifically tripping me up was the php_xdebug_cli_disable setting. By default, mine was set to yes, which lead me to be unsuccessful in ever verifying that it was running, so make sure that is set to ‘no’ before running the next step.
Verify Xdebug is running
Confirm that xdebug is running on your VM by running
Then once logged into the VM, run:
And this should produce an output similar to the following screenshot:
Disable Drupal caches
I followed the information in this Drupal.org community documentation page: Disable Drupal 8 caching during development. If you don’t have a local.settings.php file or something similar, there are instructions in the previous link on how to create one.
Since I’m using BLT, my needs were slightly different, so it was important to understand how BLT handles settings.php files. There is a hierarchy of files that is definitely good to know when changing your settings.
Verify the following is in local.settings.php or settings.local.php (whatever you’re using). Keep in mind that these settings may already been defined in your settings files, so I wouldn’t mindlessly paste this, use it as a reference of what should be enabled at a glance.
In sites/development.services.yml
Now clear those caches with drush cr
Configure PHPStorm
Confluence cheat sheet. In PHPStorm go to Preferences > Language & Frameworks > PHP, then click the three dots … next to “CLI Interpreter:”
Now click the + symbol and choose the option for “From Docker, Vagrant, VM, Remote…” In my case, PHPStorm figured out the rest and I was left with my CLI Interpreters screen looking like this:
Add the JavaScript bookmarklet
I used the bookmarklet that was suggested by the PHPStorm documentation. It’s called Xdebug helper.
This extension will send debugging info to PHPStorm so there’s a connection between your IDE and development site.
Turn on listening in PHPStorm
Go to Run > Start Listening for PHP Debug Connections.
Get debugging!
Lastly, go into whichever Twig template you want to debug and insert a {{ devel_breakpoint() }} to trigger a breakpoint in PHPStorm.
Helpful resources
To put this post together, I gathered information from a bunch of sources. Here they are in case you’d like to dive even deeper.
FeaturesPhpstorm Time Tracking
Twig is a template engine for PHP. While it evolved out of the Symfony framework, it can be used with other frameworks as well. It’s fast (compiles to optimized PHP code), it’s secure (creates a sandbox to run templates in). And it’s supported by PhpStorm!
PhpStorm provides syntax highlighting for all *.twig files in our project. Note that we can also use code folding for Twig blocks as well as for HTML tags. All HTML features are also available in the Twig editor, such as intentions, live templates and Emmet support.
Twig tags (surrounded with { and }) are recognized by the IDE and will trigger autocompletion and suggestions. For example if we want to create a block in our Twig template, PhpStorm provides autocompletion: Handbrake for mac latest version.
Autocompletion for file names in include, extends and import tags is also available. We can trigger autocompletion using the Ctrl+Space (Cmd+Space on Mac) keyboard shortcut.
Phpstorm Twig Support
Navigation support is available as well. Open file in Editor can be triggered by holding down the Ctrl (Cmd on Mac) key and clicking the referenced Twig file.
If needed, we can also modify the code style for Twig. From the File | Settings menu, we can open the Project Settings | Code Style | Twig node and specify tab size, indentation and so on.
Let us know how you are using Twig support! We appreciate your feedback in the comments below or in our forums!
Phpstorm Twig Type Hint
Develop with pleasure!
– JetBrains PhpStorm Team