树枝模板
除了通用模板支持之外,Symfony 插件还提供了针对Twig 模板语言的补全、导航和代码检查。
Twig 模板中的代码完成
在编辑器中,按下Ctrl+Space以调用代码完成并执行以下任一操作:
为任何TWIG文件中的适当功能提供模板和块。
提供自定义或从第三方安装的扩展、过滤器和宏。
提供单个资产和完整的捆绑包。
Twig 模板中的代码导航
要导航到模板、块、扩展、过滤器、宏或资产的声明,请将插入符号放在其使用处,然后按Ctrl+B。或者,Ctrl+Click用法。

Twig 模板中的代码检查
如果我们引用应用程序未知的资产(例如,如果资产尚不存在),PhpStorm 会显示来自缺失资产检查的相应警告。.

使用 Twig 变量
在 Twig 模板中,您可以使用{# variable_name variable_value #}
语法定义变量,例如:
一旦定义了变量,代码完成 ( Ctrl+Space) 和导航到声明 ( Ctrl+B) 就变得可用。
以类似的方式,您可以通过添加注释来定义使用模板的控制器,controller
例如:
一旦我们这样做了,PhpStorm 将为传递到模板中的所有变量提供代码完成和导航。

Twig 模板中的语言注入
使用 Twig 模板时,您可以在模板块中注入代码片段。PhpStorm 将为您提供全面的语言帮助来编辑该代码片段。
将插入符号放在要在其中注入语言的模板块内,然后按Alt+Enter,或单击
。
选择注入语言或参考,然后从弹出菜单中选择要注入的语言。
自动将 JavaScript 注入 Twig 模板块
PhpStorm 可以根据定义的注入规则自动将代码注入到 Twig 模板块中。开箱即用,自动注入 JavaScript 代码的规则可用。
在 Twig 模板中,执行以下任一操作:
javascript
添加一个如下命名的块:{% block javascript %} //注入的 JavaScript 代码 {% endblock %}添加自定义
script
块,如下所示:{% script %} //注入的 JavaScript 代码 {% endscript %}
PhpStorm 会自动将 JavaScript 注入到模板块中。
自定义 Twig 语法
在某些情况下,可能需要自定义 Twig 语法。这可能很有用,例如,避免与其他模板语言(如AngularJS )发生冲突。
在您的代码中,按照Twig 文档中的描述自定义 Twig 语法。
在 PhpStorm 中进行相应的调整,使其能够正确识别该语法。
在设置/首选项对话框 ( Ctrl+Alt+S) 中,转到 并键入要用于 、 和 块的
Tag
所需Comment
值Variable
。
调试 Twig 模板
您可以使用与常规 PHP 文件相同的技术来调试 Twig 模板。
在开始之前,请确保已设置以下Twig 环境选项:
启用 Twig 调试
启动调试会话
按照Ultimate 调试指南中的说明启动调试会话。最简单和推荐的方法是使用零配置调试:
选择并安装适合您浏览器的浏览器扩展。
在 PhpStorm 工具栏上,切换
以开始侦听传入的 PHP 调试连接,或选择 从主菜单
在代码中设置断点。
使用已安装的浏览器扩展在浏览器中启动调试会话。
在调试会话期间,检查程序状态:查看变量值、计算表达式、逐步执行程序等。
在调试会话期间,PhpStorm 会在模板断点不可达的情况下向您发出警告,这种情况发生在模板行未映射到编译的 PHP 文件中的任何行时。
