在一个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',
  ],
];

证监会模块中有更多的内容，capabilities and this is a very basic template. By the way, the的标记用于从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代码块，我没有得到正确的高亮/暗示/制表。我尝试了各种版本的语言注入，但它们似乎也不起作用。比如：

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

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

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

有什么建议吗？

Answer 1

SCSS -是的，Twig -不。

花枝：

由于不是一种可注入的语言，所以它是一种模板语言，只能作为其他语言的“主”语言使用。例如，查看这里的注释，以获得注入到PHP中的Twig：https://youtrack.jetbrains.com/issue/WI-38370)。

您可以尝试使用手键/小胡子(单独的插件)：它具有类似Twig的语法，因此至少可以涵盖一些语法(它是可注入的)。

SCSS:

使用<style type="text/scss">，这样IDE就可以区别于标准的普通CSS (从2017.1版本开始使用：https://stackoverflow.com/a/36331588/783119)。

在旧版本(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