Script setup + eslint = unused vars

[iamrgroot]

Is there any way to let eslint check whether the constants in a script tag with 'setup' sugar are being used in the template? I would prefer it to keep using the rule in my projects.

The following code triggers the '@typescript-eslint/no-unused-vars' eslint rule for the props and increment consts.

<template>
    <h1> {{ msg }} </h1>
    <p>
        Clicks {{ count }}
    </p>
    <p>
        <button @click="increment">
            Increment
        </button>
    </p>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue';

const props = defineProps({
    msg: {
        type: String,
        required: true,
    }
});

const count = ref(0);

const increment = (): number => count.value++;
</script>

[johnsoncodehk]

hi @iamrgroot, it may can't be fix now, relate: #34 (comment)

@soulsam480 can you share your experience?

[johnsoncodehk]

can you disable @typescript-eslint/no-unused-vars, and use tsconfig.json with noUnusedLocals: true for replacement?

noUnusedLocals is handle by volar so it can correctly report with <script setup>.

[antfu]

noUnusedLocals: true

That's an awesome tip, thanks! (maybe you can document it :P

[johnsoncodehk]

@antfu Okay, let me open a tips topic to Discussions late, there has more I can share :)

[CharlesOkwuagwu]

On this issue, to be clear are, you recommending we set noUnusedLocals: false in tsconfig.json?

Setting noUnusedLocals: true brings: 'props' is declared but its value is never read.ts(6133)

[johnsoncodehk]

@CharlesOkwuagwu this is a replacement for @typescript-eslint/no-unused-vars, if you don't use eslint with no-unused-vars, you don't need to config noUnusedLocals option because noUnusedLocals default is false.

[Liwoj]

Check this

[xinlei3166]

mark

[Johnsoct]

I know the new documentation says you don't need any special config settings with Vue + TS to get this working, but that's not the case. I'm using TS 5.X and the most updated version of Vue 3, and I still had to disable the JS and TS rules for no-unused-vars and then use noUnusedLocals in the TSConfig.

This should really, really be mentioned in this section of the documentation: https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode

It would have saved me hours.