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
x-dataattributes? You could open a bug/feature issue on the extension's repository.