如何配置JetBrains IDE使text/x-twig类型脚本识别为Twig模板？

算力阿峰

2026-6-22

解决方法：将text/x-twig MIME类型关联到Twig模板

当然可以把text/x-twig MIME类型关联到Twig模板，下面分主流IDE给出具体操作步骤：

JetBrains系列IDE（PhpStorm、WebStorm等）

1. 关联MIME类型到Twig

打开设置（快捷键Ctrl+Alt+S），导航到Languages & Frameworks > Template Languages > Twig
在File Types区域，点击加号+，输入text/x-twig作为MIME类型，确认后保存，IDE就会把该MIME类型的内容识别为Twig语法。

2. 修复语言注入规则

如果之前的XML标签注入规则找不到Twig选项，按以下步骤操作：

进入设置里的Languages & Frameworks > Language Injections
删除之前创建的规则，重新点击加号+选择XML Tag Injection
设置XPath为//script[@type="text/x-twig"]
在Inject language or reference下拉框里直接输入Twig（如果下拉没显示，手动输入即可识别）
保存规则后重启IDE，此时<script type="text/x-twig">标签内的内容会自动启用Twig语法高亮。

注意事项

如果找不到Twig语言选项，先检查插件：

打开Plugins市场（设置里的Plugins），搜索Twig，确保对应的插件已安装并启用（WebStorm需要手动安装，PhpStorm一般内置）
插件安装完成后必须重启IDE才会生效。

VS Code

先安装Twig语法插件（比如Twig Language 2）

打开设置（快捷键Ctrl+,），点击右上角的打开设置(JSON)按钮，添加以下配置：

"editor.languageInjection": {
  "text/html": [
    {
      "language": "twig",
      "pattern": "<script type=\"text/x-twig\">(.*?)</script>",
      "contentCapture": 1
    }
  ]
}