1

I am using AlpineJS with Templ and golang in Visual Studio Code. How can I get format document (Ctrl+Shift+i) to work for the x-data, x-init, etc attributes to work in Visual Studio Code?

I currently have the Alpine.js IntelliSense (adrianwilczynski.alpine-js-intellisense) extension installed but it doesn't seem to offer formatting of the x-* attributes

As an example for the formatting x-init

 x-init='
        const chart = new ApexCharts(document.querySelector("#temperature"), options);
        chart.render();
        '

and x-data

x-data='{
                    options: {
                        colors: ["purple"],
                        series: [{
                            name: "Temperature",
                            data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10]
                        }],
                        chart: {
                            type: "area",
                            height: 350,
                            zoom: {
                                enabled: false
                            }
                        },
                        dataLabels: {
                            enabled: false
                        },
                        title: {
                            text: "Temperature",
                            align: "center"
                        },
                        legend: {
                            showForSingleSeries: true,
                            tooltipHoverFormatter: function(val, opts) {
                                return val + " - <strong>" + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + "</strong>"
                            }
                        },
                            markers: {
                            size: 0,
                            hover: {
                                sizeOffset: 6
                            }
                        },
                        tooltip: {
                            y: [
                                {
                                    title: {
                                        formatter: function (val) {
                                            return val;
                                        }
                                    }
                                },
                            ]
                        }
                    }
                }'

Edit: added code examples for formatting

4
  • Can you give a short code example that allows one to reproduce the failure to format x-data attributes? You could open a bug/feature issue on the extension's repository. Commented May 17 at 16:25
  • @CorneliusRoemer I added it to the question. Commented May 18 at 4:35
  • Please provide enough code so others can better understand or reproduce the problem. Commented May 18 at 7:09
  • @Community how much is needed? with what I posted you can see it doesn't work format in VSCode. Commented May 19 at 15:51

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.