有没有办法在一个 PhpStorm 文件中使用多种语言？

Question

所以我有一个潜在的新用例。我正在尝试采用单文件组件方法为 Drupal 8 内容创建代码和模板。有一个很棒的 Drupal 模块可以实现这一点 (https://www.drupal.org/project/sfc)，但我想在 PhpStorm 2020.1 中改进这些文件的代码提示和语法突出显示。

我必须使用 .sfc 扩展名。我将此扩展名添加到 PHP 文件类型，在大多数情况下，一切都按预期工作。该文件以 XHTML 开头，然后有一个 PHP 部分。 HTML/XHTML 和 PHP 都正确突出显示和提示。 .sfc 文件还包含 JavaScript 和 CSS，这两个部分也被正确突出显示和提示，大概是因为它们由 PhpStorm 的 XHTML 或 PHP 识别处理。

文件看起来像这样：

<template>
  <article class="test-class">
    <h2>Test content</h2>
    <p>This is some test content.</p>
  </article>
</template>

<style>
  .test-class {
    background-color: red;
  }
</style>

<script data-type="attach">
  console.log('JavaScript attached');
</script>

<?php
$definition = [
  'overrides' => [
    'node__article__teaser',
  ],
];

SFC 模块的功能还有很多，这是一个非常基本的模板。顺便说一句，<template> 标签用于从 PHP/XHTML 文档中提取 Twig 模板。该标签不在最终结果中。

<style> 和 <script> 标签可能会触发对 JavaScript 和 CSS 的识别。当我想使用 SCSS 和 Twig 而不是 CSS 和 XHTML 时，我的问题就开始了。像这样：

<template>
  <article {{ attributes.addClass('test-class') }}>
    {{ content.title }}
    {{ content.body }}
  </article>
</template>

<style>
  .test-class {
    background-color: red;
    p:last-child {
      margin-bottom: 0;
    }
  }
</style>

<script data-type="attach">
  console.log('JavaScript attached');
</script>

<?php
$definition = [
  'overrides' => [
    'node__article__teaser',
  ],
];

对于 Twig 或 SCSS 代码块，我当然没有得到正确的 highlighting/hinting/tabbing。我尝试了各种版本的语言注入，但它们似乎也不起作用。像这样的东西：

<template>
  <!-- language=twig -->
  ...
</template>

<style>
  /** language=scss **/
  ...
</style>

我假设我需要在 PHP 文件中为 SCSS 和 Twig 创建某种新的语言注入配置，但我找不到关于如何进行的良好文档这样做。

有什么建议吗？

Answer 1

SCSS -- 是的，Twig -- 不是。

树枝:

不可能，因为它不是可注入语言，它是一种模板语言，只能用作其他语言的 'master' 语言。例如。在此处查看 Twig 可注入 PHP 字符串的评论：https://youtrack.jetbrains.com/issue/WI-38370).

您可以尝试 Handlebars/Mustache（单独的插件）：它具有类似 Twig 的语法，因此至少可以涵盖某些语法（它是可注入的）。

SCSS:

使用 <style type="text/scss"> 以便 IDE 可以以不同于标准普通 CSS（自 2017.1 版本开始提供：）的方式来识别这个。

在旧版本（2016.3 及更早版本）中，您还需要创建自定义语言注入规则，如下所示：

Answer 2

正如@LazyOne 向我解释的那样，我可以通过将 .sfc 文件更改为以下内容来解决 SCSS 问题：

<style type="text/scss">
  .test-class {
    background-color: red;
    p:last-child {
      margin-bottom: 0;
    }
  }
</style>

目前看来，使用 PhpStorm 无法将 Twig 模板语言注入另一种语言。我已经打开一个功能请求，看看是否可以启用：https://youtrack.jetbrains.com/issue/WI-53909

有没有办法在一个 PhpStorm 文件中使用多种语言？

Is there a way to use multiple languages in a single PhpStorm file?

phpstorm

drupal-8