I encountered an issue related to Vue templates while using FlatCompat for a smooth ESLint configuration upgrade.

[dollaremeng]

First, my app.vue code is as follows:

<template>
  <div>
    {{ textInTemplate }}
  </div>
</template>

<script lang="ts" setup>
const textInTemplate = 'Hello World'
const unusedText = 'unusedText'
</script>

Here is an example of the simplest configuration:

// eslint.config.js
const { FlatCompat } = require('@eslint/eslintrc') // version "2.0.2"

const compat = new FlatCompat({ baseDirectory: __dirname })

module.exports = [
  ...compat.config({ extends: ['@nuxtjs/eslint-config-typescript'] }),

  {
    files: ['**/*.js'],
    rules: {
      '@typescript-eslint/no-var-requires': 'off'
    }
  }
]

8:7 error 'textInTemplate' is assigned a value but never used @typescript-eslint/no-unused-vars
9:7 error 'unusedText' is assigned a value but never used @typescript-eslint/no-unused-vars

// .eslintrc.js
module.exports = {
  extends: ['@nuxtjs/eslint-config-typescript'],
  overrides: [{
    files: ['**/*.js'],
    rules: {
      '@typescript-eslint/no-var-requires': 'off'
    }
  }]
}

9:7 error 'unusedText' is assigned a value but never used @typescript-eslint/no-unused-vars

It seems that when using FlatCompat for configuration, there are some issues with the detection of the variable textInTemplate that I don't understand. The configuration has already removed other interference items, but I still get incorrect results, which is not as expected.

eslint: 8.37.0
@eslint/eslintrc: 2.0.2
@nuxtjs/eslint-config-typescript: 12.0.0
vue-eslint-parser: 9.1.0

[nzakas]

This is actually an issue with typescript-eslint rather than ESLint itself. Please open an issue there.