Blade directives mixed in with script tags causes formatter to fail about vscode-blade-formatter

[sadmachine]

I would also like to see proper formatting of Blade directives within script tags, or at least an "ignore" feature within script tags so that it doesn't automatically format it as garbage (similar to something like prettiers <!-- prettier-ignore -->). One huge use case of blade is passing data to javascript to create reactive layouts.

For instance, the following code:

var order = @json($array['item']->getOrder());

Gets formatted to:

var order = @json($array['item'] - > getOrder());
(notice the additional spaces)

This causes a parse error during blade compilation: Parse error: syntax error, unexpected '>' ...

This is only one small example, but the formatting errors only get worse the more complex the blade directives get.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days

[shufo]

@yasinallana1
Fixed this behaviour on v0.7.8 (v1.11.1 on blade-formatter)

@push('scripts')
    <script src="{{ asset('backend/plugins/dropzone/dropzone.min.js') }}"></script>
    <script>
        Dropzone.options.gallery = {
            url: "...",
            previewTemplate: $("#preview-template").html(),
            dictDefaultMessage: "Drop files here or click to select",
            addRemoveLinks: true,
            uploadMultiple: true,
            maxFilesize: 2,
            filesizeBase: 1024,
            acceptedFiles: "image/jpg,image/jpeg,image/png",
            init: function() {
                this.renderExistingServerFiles = function(files, fileUrls, response) {
                    for (const file in files) {
                        if (Object.hasOwnProperty.call(files, file)) {
                            const element = files[file];

                            this.files.push(element);
                            this.displayExistingFile(element, fileUrls[file], null, null, true);
                            this.emit("processing", element);
                            this.emit("complete", element);
                        }
                    }
                    this.emit("successmultiple", files, response, false);
                }

                @isset($item->images)
                    let files = [];
                    let fileUrls = [];
                    let response = { status:"success", fileHashes: [], imageIds: []};
                    @foreach ($item->images as $image)
                        @php
                            $imageUrl = asset('img/' . $image->image_hash);
                            $imagePath = public_path('img/' . $image->image_hash);
                            $imageMime = File::mimeType($imagePath);
                            $imageSize = File::size($imagePath);
                            $imageName = File::name($imagePath);
                        @endphp

                        var order = {{ @json($array['item']->getOrder()) }}

                        files.push({
                        processing: true,
                        accepted: true,
                        name: "{{ $imageName }}",
                        size: {{ $imageSize }},
                        type: '{{ $imageMime }}',
                        status: Dropzone.SUCCESS,});

                        fileUrls.push("{{ $imageUrl }}")
                        response.fileHashes.push("{{ $image->image_hash }}")
                        response.imageIds.push("{{ $image->id }}")
                    @endforeach
                    this.renderExistingServerFiles(files, fileUrls, response);
                @endisset
            },
        }

    </script>
@endpush

Now you can format directive and raw javascript mixed template.

@sadmachine

var order = @json($array['item']->getOrder());

is also ok.