TIL: ESLint | Fix "'props' is assigned a value but never used @typescript-eslint/no-unused-vars"

Story

This is a continuation of script setup syntax usage. eslint thinks that variables like props, emits etc. are not used, but actually they are.

Question

How to fix ESLint error 'props' is assigned a value but never used @typescript-eslint/no-unused-vars?

Answer

Add vue/script-setup-uses-vars rule to eslint.

ESLint no-unused-vars rule does not detect variables in <script setup> used in <template>. This rule will find variables in <script setup> used in <template> and mark them as used.

module.exports = {
  // Use the rule set.
  extends: ['plugin:vue/base'],
  rules: {
    // Enable vue/script-setup-uses-vars rule
+     'vue/script-setup-uses-vars': 'error',
  }
}

Links

• https://eslint.vuejs.org/rules/script-setup-uses-vars.html
• https://eslint.vuejs.org/user-guide/#the-variables-used-in-the-template-are-warned-by-no-unused-vars-rule