Prettier stops and breaks with some inline javascript.

[terryupton]

I am not sure if this is more generic and prettier related. I am getting errors and formatting is breaking when using inline JS / AlpineJS. I have tried to escape tis with the prettier-ignore-start and prettier-ignore-end. But this has no effect. It is related to this code:

                <div x-data="getCheckedCount()"
                     x-init="getChecked()"
                     x-on:item-selected.window="getChecked()"
                     class="pl-6 pt-6 font-medium"
                     id="courseTotals"
                >
                  <p class="text-navy-600 mb-0 leading-tight"><span x-text="countText('exam')">0 exams</span> selected</p>
                  <p class="text-lime-600 text-2xl mb-0 leading-tight" x-text="'£' + totalPrice.toFixed(2)"></p>
                </div>

Here is the error:

["ERROR" - 5:09:03 PM] Error formatting document.
Error: ERROR: Expected an Identifier
  190 |                 <div x-data="getCheckedCount()"
  191 |                      x-init="getChecked()"
> 192 |                      x-on:item-selected.window="getChecked()"
      |                                        ^
  193 |                      class="pl-6 pt-6 font-medium"
  194 |                      id="courseTotals"
  195 |                 >

Expected a valid attribute name, but instead found ".", which is not part of a valid attribute name.
	at TokenStream.error (/Users/terryupton/node_modules_local/localproject/node_modules/melody-parser/lib/index.js:1362:22)
	at new TokenStream (/Users/terryupton/node_modules_local/localproject/node_modules/melody-parser/lib/index.js:1301:18)
	at createConfiguredParser (/Users/terryupton/node_modules_local/localproject/node_modules/prettier-plugin-twig-melody/src/parser.js:50:9)
	at Object.parse (/Users/terryupton/node_modules_local/localproject/node_modules/prettier-plugin-twig-melody/src/parser.js:83:20)
	at Object.parse (/Users/terryupton/node_modules_local/localproject/node_modules/prettier/index.js:11370:19)
	at coreFormat (/Users/terryupton/node_modules_local/localproject/node_modules/prettier/index.js:14784:25)
	at format (/Users/terryupton/node_modules_local/localproject/node_modules/prettier/index.js:15019:75)
	at formatWithCursor (/Users/terryupton/node_modules_local/localproject/node_modules/prettier/index.js:15035:12)
	at /Users/terryupton/node_modules_local/localproject/node_modules/prettier/index.js:51620:12
	at Object.format (/Users/terryupton/node_modules_local/localprojectk/node_modules/prettier/index.js:51640:12)
	at t.default.<anonymous> (/Users/terryupton/.vscode/extensions/esbenp.prettier-vscode-5.1.3/dist/extension.js:1:58387)
	at Generator.next (<anonymous>)
	at s (/Users/terryupton/.vscode/extensions/esbenp.prettier-vscode-5.1.3/dist/extension.js:1:53305)
["INFO" - 5:09:03 PM] Formatting completed in 13.832597ms.

[Webarkitekt]

I have the same issue It also log the same error even with a prettier ignore tag

templates/themes/core_ui/ui/components/Tag/variations.twig 2ms
templates/themes/core_ui/ui/components/Toc/index.twig
[error] templates/themes/core_ui/ui/components/Toc/index.twig: Error: ERROR: Expected an Identifier
[error]   12 | 
[error]   13 |     {# prettier-ignore-start #}
[error] > 14 |     <template x-if="targets.length">
[error]      |                            ^
[error]   15 | 
[error]   16 |         <ul class="space-y-3">
[error]   17 |             <template x-for="(target, index) in targets" :key="target">
[error] 
[error] Expected a valid attribute name, but instead found ".", which is not part of a valid attribute name.

[drdogbot7]

It throws an error when attributes use @ or .

You can use x-on instead of @, but I don't see an alternative to .

[handplant]

Is there any news? Alpinejs should work! :)

[faheemhameed]

I have the same issue too.

Error: ERROR: Expected an Identifier
  61 |                                 {# prettier-ignore-start #}
  62 |                                 <a href="javascript:void"
> 63 |                                     ng-click="chooseVariant($event, variantType, variantItemData)">
     |                                                            ^
  64 | 
  65 |                                     <img src="{{ '{{variantItemData.picture.file_thumb}}' }}"
  66 |                                         alt="{{ '{{variantItemData.picture.caption}}' }}">

Expected a valid attribute name, but instead found "(", which is not part of a valid attribute name.