如何在VSCode中为script标签内的Laravel Blade指令添加语法高亮？

问题 #

我有一个基础的Laravel Blade组件，代码如下：

@if(true)
    <div class="button-comp"></div>
@endif

<script>
@if(true)
    document.querySelector('.button-comp').addEventListener('click', (e) => console.log(e) );
@endif
</script>

其中<script>标签内的Blade @if指令无法正常高亮。我已安装Laravel Extra Intellisense和Laravel Blade Snippets扩展，请问是否遗漏了相关设置？

解决方法 #

该问题由Laravel Blade Snippets扩展导致，已有其他用户遇到相同情况。目前唯一可行的解决方案是避免在<script>标签内使用Blade指令，转而将PHP变量传递给JS，用JS自身的条件语句实现逻辑。示例代码如下：

@php
    $enableClickHandler = true;
@endphp

@if($enableClickHandler)
    <div class="button-comp"></div>
@endif

<script>
    // 将PHP变量转为JS变量
    const enableClickHandler = {{ $enableClickHandler ? 'true' : 'false' }};
    
    if (enableClickHandler) {
        document.querySelector('.button-comp').addEventListener('click', (e) => console.log(e) );
    }
</script>

内容的提问来源于stack exchange，提问作者silvered.dragon