Rule `vue/script-setup-uses-vars` doesn't work well with `eslint@typescript-eslint/no-unused-vars`

[Jackie1210]

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: 7.32.0
• eslint-plugin-vue version: 7.16.0
• Node version: 14.17.5
• Operating System: macOS

Please show your full configuration:

module.exports = {
  root: true,
  globals: {
    Sentry: true,
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  },
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  parser: 'vue-eslint-parser',
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'standard',
    '@vue/standard',
    '@vue/typescript/recommended'
  ],
  plugins: ['vue'],
  rules: {
    'arrow-parens': ['error', 'as-needed'],
    'quote-props': ['error', 'as-needed'],
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'max-len': ['warn', { code: 80 }],
    'object-curly-spacing': ['error', 'always'],
    'arrow-spacing': ['error', { before: true, after: true }],
    'array-bracket-spacing': ['error', 'never'],
    'no-console': process.NODE_ENV === 'production' ? 'error' : 'warn',
    'no-unused-vars': 'off',
    '@typescript-eslint/member-delimiter-style': ['error', {
      multiline: {
        delimiter: 'none',
        requireLast: false
      },
      singleline: {
        delimiter: 'semi',
        requireLast: false
      }
    }],
    '@typescript-eslint/no-unused-vars': 'error',
    'vue/script-setup-uses-vars': 'error',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/semi': ['error', 'never'],
    '@typescript-eslint/no-extra-semi': ['error'],
    '@typescript-eslint/type-annotation-spacing': ['error', {
      before: false,
      after: true,
      overrides: {
        arrow: { before: true, after: true }
      }
    }]
  }
}

What did you do?

<script setup lang='ts'>
defineProps<{
  msg: string
}>()

const fn = () => {
  // eslint-disable-next-line no-console
  console.log(123)
}
</script>
<template>
  <div @click="fn">123</div>
</template>

What did you expect to happen?
ignore 'fn' is assigned a value but never used.

What actually happened?

Rule eslint@typescript-eslint/no-unused-vars remind me 'fn' is assigned a value but never used.

Repository to reproduce this issue

[ota-meshi]

It looks to me that fn is actually unused. So I think the rules are working correctly.

ignore 'fn' is assigned a value but never used.

Why did you think it is ignore?

[Jackie1210]

@ota-meshi sorry about the code. I've changed the section of What did you do?. And I have solved this issue. Just set 'vue/script-setup-uses-vars': 'error', before '@typescript-eslint/no-unused-vars': 'error', and then it will be okay. Thank u for your replay~

[ota-meshi]

It's possible that the version of vue-eslint-parser you're using is out of date.
I've added option to function that traverse AST to vue-eslint-parser, to make the script-setup-uses-vars rule work.

[mustard-mh]

globals.xxx

LGTM 👍

[Liwoj]

I also started getting @typescript-eslint/no-unused-vars after switching to a script setup syntax. The advice in the faq helped me - after adding 'vue/script-setup-uses-vars': 'error', to the config, the errors went away...

But it seems strange as per rule documentation the rule should be already included in "plugin:vue/vue3-recommended" I was using

After changing the order of plugins/configs in the extend section of .eslintrc.js the errors went away without explicitly enabling the rule

Before:

extends: [   
    'plugin:vue/vue3-recommended',
    '@vue/standard',
    '@vue/typescript/recommended',
  ],

...note this is the default eslint config the Vue CLI 4.5.13 is generating for a new TS/Vue 3 projects

After:

extends: [
    '@vue/typescript/recommended',
    'plugin:vue/vue3-recommended',
    '@vue/standard',
  ],

Ping @ota-meshi - your comment (when closing related PR) is The order in which the rules are defined does not affect the behavior of the rules but in reality it does. Any idea ?

[wsw70]

Sorry if this is a basic question, but I am a bit lost between the question and the answer.

@Jackie1210 mentions in the question

 extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'standard',
    '@vue/standard',
    '@vue/typescript/recommended'
  ],

and then @Liwoj says that a working setup is

extends: [
    '@vue/typescript/recommended',
    'plugin:vue/vue3-recommended',
    '@vue/standard',
  ],

The first three entries in the question ( 'eslint:recommended', 'plugin:vue/vue3-recommended', 'plugin:@typescript-eslint/recommended') are the ones I had in my Quasar install. They worked, but with the issues mentioned in the question.

The solution however brings in three new (these are also the last three in the question) that I apparently do not have because I get

Error: Failed to load config "@vue/typescript/recommended" to extend from.

How can I install them?

[Jackie1210]

@wsw70 try @vue/eslint-config-typescript

[wsw70]

Thank you @Jackie1210 - running

npm i @vue/eslint-config-typescript
npm i @vue/eslint-config-standard

fixed the issues as far as I can tell.