vuejs/vue-eslint-parser

Question: How `scopeManager` works in `<template>`

Opened this issue · 4 comments

eslint-plugin-unicorn user reported that unicorn/prefer-includes crashes on checking

<template><div v-if="values.some(x => x === 'foo')"></div></template>

I located the problem, when I use context.scopeManager.acquire() to get the callback function scope, it returns null.

I'm not sure scopeManager works here, is it bug?

Test added in sindresorhus/eslint-plugin-unicorn#2645, really appreciate it if you can provide some help @ota-meshi

(Wow! I didn't know that eslint-plugin-unicorn started supporting Vue templates! That's cool!)

However, we can't currently use the scope manager in templates. I think that we can add feature to this parser to make it work, but we need to consider what the API should be.

We support vue SFC years ago, this is the first one.

but we need to consider what the API should be.

If it's possible, scopeManager should work directly.

eslint-plugin-vue never need scope information?

Currently, Vue has two API styles, and the scope of a <template> written in the Options API style has a different meaning from a normal scope, so it is difficult to use the scope manager directly...

In the following case, the template's {{count}} is not a global variable 😓

<template>
  <span>Count is: {{ count }}</span>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

eslint-plugin-vue never need scope information?

eslint-plugin-vue uses its own scope analysis API, which is difficult to understand.

https://github.com/vuejs/vue-eslint-parser/blob/master/docs/ast.md#:~:text=Expression%20%7C%20null-,references,-%3A%20%5B%20Reference

Also, the information available from it is less than that from a scope manager.