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