vue/prefer-template tries to apply to style scoped

[sky0matic]

What rule do you want to change?
vue/prefer-template

Does this change cause the rule to produce more or fewer warnings?
Fewer

How will the change be implemented? (New option, new default behavior, etc.)?
The rule doesn't check for style scoped or there's a way to disable it on a per-line basis.

Please provide some example code that this change will affect:

<script setup lang="ts">
  const someWidth = computed(() => 
    // Some computation process
  );
</script>

<style scoped>
.some-element {
  width: v-bind(someWidth + 'px');
}

.some-other-element {
  /* same issue if we try to disable the rule, it doesn't seem to work */
  /* eslint-disable-next-line vue/prefer-template */
  width: v-bind(someWidth + 'px');
}
</style>

What does the rule currently do for this code?
It want us to replace someWidth + 'px' with :

`{someWidth}px`

and this is not valid CSS handled by the IDE (VSCode in this case) so it shows another error.

What will the rule do after it's changed?
Either :

• Not react to style scoped
• Allow to disable the rule on the style somehow or react to the eslint-disable-next-line properly.

Additional context
The only way we are able to skip this issue entirely for now is to create a new computed which does :

const someWidthStr = computed(() => `${someWidth.value}px`);

which makes us need to maintain yet another computed which we would prefer to avoid.

[FloEdelmann]

Oh that's a bug; the rule should only search those patterns in the <template> block.

[FloEdelmann]

I tried reproducing the error in the playground but it always reports Parsing error: t is undefined. @ota-meshi do you know why?

[ota-meshi]

Thank you for letting me know, I fixed the playground 😉