prefer-includes not working in vue templates

[Mini-ghost]

<template>
  <div v-if="['vue', 'pinia'].indexOf(pkg) > -1" />
</template>

<script setup lang="ts">
const pkg = 'vue'

console.log(['vue', 'pinia'].indexOf(pkg) > -1)
</script>

I added the rule 'unicorn/prefer-includes': 'error' to my project, which checks for and replaces .indexOf() with .includes(). While this works properly within the <script> block of a Vue SFC, it fails to detect issues within the <template> block.

I attempted to add checkVueTemplate to the prefer-includes.js rule to catch errors within the <template> block. However, I encountered issues with the automatic fixes not working as expected. Is there a way to resolve this problem?

[fregante]

Correct me if I'm wrong, but this should likely be handled by your parser plugin, not by each rule. If the parser provides v-if="['vue', 'pinia'].indexOf(pkg) > -1" as a JS string, then eslint and all the JS rules will pick it up.

[Mini-ghost]

@fregante

In the case of rules like explicit-length-check, no-instanceof-array, and number-literal-case, they all work properly in the <template> section of a Vue SFC. These rules make use of the checkVueTemplate function for handling such scenarios, so I believe it should be possible to apply a similar approach for the prefer-includes rule.

I attempted to wrap the create function in prefer-includes.js with checkVueTemplate(create). While ESLint correctly identifies the issues, the auto-fix functionality does not seem to work as expected. As I am still new to writing ESLint rules, I am unsure how to proceed further. Therefore, I raised this issue to see if it might be feasible to add <template> support for auto-fixes in the prefer-includes rule.

Here is a minimal reproducible example I set up, which I hope will be helpful for verifying the issue:

https://stackblitz.com/edit/vitejs-vite-hcr8hmge?file=.eslintrc.cjs,src/App.vue&terminal=dev

[fregante]

Is it possible that it's obsolete code? The plugin itself seems to support of parsing the template string as JS: https://www.npmjs.com/package/vue-eslint-parser

Anyway reopening in case someone knows more, e.g. @ota-meshi

[ota-meshi]

To avoid false positives from other plugin rules, the rule implementation is designed not to traverse <template> nodes unless it uses defineTemplateBodyVisitor(). This is the intended behavior by the original designers.
Therefore, most rules, such as ESLint core rules and eslint-plugin-unicorn rules, do not process scripts in <template>.
https://github.com/vuejs/vue-eslint-parser?tab=readme-ov-file#-usage-for-custom-rules--plugins