在 webStorm/phpStorm 中启用 Liquid 模板语法高亮

Posted 2023-02-15

技术标签:

【中文标题】在 webStorm/phpStorm 中启用 Liquid 模板语法高亮【英文标题】：Enabling Liquid templating syntax highlight in webStorm/phpStorm 【发布时间】：2015-05-21 07:17:47 【问题描述】：

我想知道是否有人设法在WebStorm IDE 中启用Liquid templating engine 语法突出显示，我在Shopify 商店上工作了很多，并且非常喜欢为此目的使用Webstorm。有没有人设法让这个工作？

我在 JetBrain 的论坛上找到了一些关于这个问题的资源，虽然它并没有让我很了解，但有一个家伙建议使用“tmBundle”，如果你做一些黑魔法，这可能会奏效。

线程是：RUBY-7210 以及官方插件请求：JetBrain's plugins: Liquid Templating language request

【问题讨论】：

好的，我想出了一些办法，虽然它不是一个完整的解决方案，而且我对它很不满意，只是遵循“RUBY-7210”线程的建议，建议使用 'tmBundle'启用 .liquid 突出显示。为此，您可以下载以下软件包：github.com/Shopify/liquid-tmbundle 转到“webStorm 设置 > 插件”并确保您启用了“TextMate 捆绑包支持”。接下来转到“设置 > 编辑器 > TextMate Bundles”按“+”并指向您从 gitHub 下载的包的位置。打开一个“.liquid”文件，然后walla，得到了突出显示，一个不好的。还有一件事，确保在“设置 > 编辑器 > TextMate Bundles”部分中，通过按默认的“Mac Classic”并选择其他内容，将“TextMate 颜色方案”更改为当前方案，它使它看起来更好一些，但如果 WebStorm 可以将此文件视为普通的“html”文件并带有这个额外的 'tmBundle' 突出显示，我会非常高兴。 【参考方案1】：

我发现 Twig 的语法与 Liquid 非常相似，启用 Twig 插件将突出显示 Liquid 语法，并保持 HTML 突出显示/自动完成/emmet 功能正常工作，而不是“textMate Liquid 包”。

转到Settings > Editor > File Types，在该列表中找到“Twig”，并通过将*.liquid 添加到已注册模式部分，将 Liquid 文件与其关联。

如果找不到 Twig，请从“浏览存储库”或“安装 JetBrains 插件”中下载官方插件。如果在那里找不到，请下载插件并通过按“从磁盘安装插件”手动安装：https://plugins.jetbrains.com/plugin/7303?pr=

您还需要将*.scss.liquid 关联到.scss 文件， *.css.liquid 到 .css 文件和 *.js.liquid 到 .js 文件，这样 Twig 就不会在这些类型的文件上运行。

最终结果就像一个魅力！在一些官方插件出来之前，这是最好的解决方案，希望它可以帮助某人。

【讨论】：

我发现在将 *.liquid 关联到“Twig”之前，您需要关联 *.scss.liquid、*.css.liquid 和 *.js.liquid。就我而言，如果我首先将 *.liquid 与“Twig”相关联，phpStorm 会将 *.scss.liquid、*.js.liquid 和 *.css.liquid 识别为“Twig”文件。 Twig 使用 # # 作为评论风格，我希望将其更改为 % comment % 任何想法？使用默认键盘快捷键会很好过时了，PHPStorm 无法跟上，所以改用 Visual Studio Code。 Twig 插件导致我的 WebStorm 在最近的一些更新后崩溃。不知道发生了什么，如果只是我，或者完全是别的什么。当我卸载插件时，一切正常。安装插件后，我正在编辑的所有文件都会随机关闭，整个项目也会关闭。【参考方案2】：

为了跟进Ilia luk's answer，PHP Storm 现在内置了 Twig 支持——如果还没有，只需启用插件即可。

【讨论】：

【参考方案3】：

为 Shopify 添加样式，因为它为设置添加了 JSON。在

中启用模式标记之间的 JSON 包装