False positive no-unused-vars when importing typescript type in .vue file

[WIStudent]

I am getting a false positive error no-unused-vars when importing and using a typescript type in a .vue file.
My eslintrc.js:

module.exports = {
  root: true,
    env: {
      node: true
    },
    extends: [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript"
    ],
    parserOptions: {
      "parser": "@typescript-eslint/parser"
    },
    rules: {
      "@typescript-eslint/semi": ["error"]
    }
};

One possible workaround I found is to disable the no-used-vars rule for .vue files and enable @typescript-eslint/no-unused-vars:

overrides: [
  // Fix no-used-vars when importing ts types in .vue files
  {
    files: ["*.vue"],
    rules: {
      'no-unused-vars': 'off',
      '@typescript-eslint/no-unused-vars': 'error'
    }
  }
]

[ux-engineer]

Same here and not just for imported types...

[Livijn]

I am also receiving the same error. Here is a reproducible example.

<script lang="ts">
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String as PropType<String>
  }
})
</script>

Throws error:
ESLint: 'PropType' is defined but never used.(no-unused-vars)

[backbone87]

I have a similar problem with eslint core rule no-undef and global types.

The reason is that some eslint core rules should be disabled.

• no-undef is disabled by plugin:@typescript-eslint/eslint-recommended
• no-unused-vars is disabled by plugin:@typescript-eslint/recommended (also extends the above config)

@vue/eslint-config-typescript only extends plugin:@typescript-eslint/eslint-recommended, but not plugin:@typescript-eslint/recommended, so no-unused-vars is not disabled. So extending plugin:@typescript-eslint/recommended should fix this issue.

In my case no-undef gets triggered inside vue files anyway. The reason for this is that plugin:@typescript-eslint/eslint-recommended only disables core rules for .ts/x files, but not .vue files. Except for copying over the rule disables, i have no solution here, yet.

edit:
The following override can be added to the .eslintrc.js to enable plugin:@typescript-eslint/eslint-recommended for vue files (should be early in the overrides):

  overrides: [
    {
      files: ['*.vue'],
      rules: require('@typescript-eslint/eslint-plugin').configs['eslint-recommended'].overrides[0].rules,
    },
  ],

[pr3tori4n]

I'm seeing similar issues in our codebase. Can verify there's issues with no-unused-vars. Can also verify that WIStundent's workaround in the first comment fixes those.

Also was seeing issues with globals. I was able to resolve those by adding them to the globals in the config

globals: {
  foo: 'readonly',
}

[agentschmitt]

i have also problem with the rule no-undef when using the ruleset @vue/typescript/recommended

error: 'NotificationPermission' is not defined (no-undef) at src\views\Navigation.vue:72:28
public notification(): NotificationPermission {