VS Code保存Laravel-Livewire的blade文件时@this被替换求助

问题描述 #

使用Laravel Livewire开发时，每次保存favorite.blade.php文件，脚本块里的@this会被自动替换成< blade this >，当前VS Code已开启PHP文件的保存自动格式化：

"[php]": {
    "editor.formatOnSave": true
}

保存前代码：

<div> something </div>
@push('scripts')
    <script>
        $(document).ready(function() {
            console.log("AAAAAAAAAAAAAAAA");
            $('.select2').select2();
            $('.select2').on('change', function(e) {
                var data = $('.select2').select2("val");
                @this
            });
        });
    </script>
@endpush

保存后代码：

<div> something </div>
@push('scripts')
    <script>
        $(document).ready(function() {
            console.log("AAAAAAAAAAAAAAAA");
            $('.select2').select2();
            $('.select2').on('change', function(e) {
                var data = $('.select2').select2("val"); <
                blade this >
            });
        });
    </script>
@endpush

解决方法 #

• 关闭PHP文件的保存自动格式化
  由于.blade.php文件会被VS Code识别为PHP文件，开启的自动格式化会错误解析Livewire的@this指令。直接修改settings.json关闭该设置：

  "[php]": {
      "editor.formatOnSave": false
  }
  

  更精准的做法是先安装Laravel Blade扩展（比如Laravel Blade Snippets），让VS Code识别.blade.php为blade文件类型，再单独设置：

  "[blade]": {
      "editor.formatOnSave": false
  }
  

• 标记代码块跳过格式化
  如果不想关闭自动格式化，可以在脚本块前后添加格式化忽略注释，让工具跳过这段代码的处理：

  {{-- @formatter:off --}}
  <script>
      $(document).ready(function() {
          console.log("AAAAAAAAAAAAAAAA");
          $('.select2').select2();
          $('.select2').on('change', function(e) {
              var data = $('.select2').select2("val");
              @this
          });
      });
  </script>
  {{-- @formatter:on --}}
  

• 调整PHP扩展的格式化规则
  如果你使用的是PHP Intelephense这类扩展，可在VS Code设置中搜索相关格式化选项，修改对blade指令的处理逻辑，或者直接禁用该扩展对blade文件的格式化功能。

内容的提问来源于stack exchange，提问作者XaBerr