v9.0.0: regression in unused variables in script setup

[cexbrayat]

Checklist

• I have tried restarting my IDE and the issue persists.
• I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version:
• eslint-plugin-vue version:
• Node version:
• Operating System:

  System:
    OS: macOS 12.3.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 31.83 GB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.15.0 - ~/.volta/tools/image/node/16.15.0/bin/node
    Yarn: 1.22.17 - ~/.volta/tools/image/yarn/1.22.17/bin/yarn
    npm: 8.10.0 - ~/.volta/tools/image/npm/8.10.0/bin/npm
  npmPackages:
    eslint: ^8.5.0 => 8.15.0
    eslint-plugin-vue: 9.0.0 => 9.0.0
    vue: ^3.2.33 => 3.2.33

Please show your full configuration:

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  "root": true,
  "extends": [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-typescript/recommended"
  ],
  "env": {
    "vue/setup-compiler-macros": true
  }
}

What did you do?

<script setup lang="ts">
import { ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
const val = ref('Hello')
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
    {{ val }}
  </main>
</template>

What did you expect to happen?
No lint warning for the variables defined in script setup

What actually happened?

/Users/cedric/Code/temp/eslint-plugin-vue-v9/src/App.vue
  3:8  warning  'HelloWorld' is defined but never used    @typescript-eslint/no-unused-vars
  4:8  warning  'TheWelcome' is defined but never used    @typescript-eslint/no-unused-vars
  5:7  warning  'val' is assigned a value but never used  @typescript-eslint/no-unused-vars

Repository to reproduce this issue

This can be reproduced in a repository created with create-vue, where eslint-plugin-vue is bumped to v9:

npm init vue@3 -- --typescript --eslint eslint-plugin-vue-v9
cd eslint-plugin-vue-v9
npm install
# lint is ok
npm run lint 
# bump eslint-plugin-vue to v9.0.0
npm install
# lint fails
npm run lint 

See https://github.com/cexbrayat/eslint-plugin-vue-v9

[ota-meshi]

Thank you for posting this issue.
It seems that vue-eslint-parser v8 is used in your environment.
You need to explicitly install vue-eslint-parser v9 and use it.

run:

yarn add -D vue-eslint-parser@latest

& edit .eslintrc.cjs

  "env": {
    "vue/setup-compiler-macros": true
  },
+  parser: 'vue-eslint-parser',

Also, report to the package that has vue-eslint-parser v8 as a dependency to update it.

[cexbrayat]

Thanks @ota-meshi

I'll open a PR on https://github.com/vuejs/eslint-config-typescript to bump vue-eslint-parser then 👍

[ota-meshi]

Has been fixed in eslint-config-typescript v11 so I close this issue.