CODEWITHSUNDEEP
typescriptvue.jseslintvuejs3
WoJ
WoJ

Reputation: 29987

How to correctly configure ESLint when having undue warnings in <script setup>?

When moving in Vue3 from a standard <script> to <script setup>, I get lots of warnings from ESLint. Specifically, anything declared that is not used within <script setup> is flagged with @typescript-eslint/no-unused-vars.

A typical example is:

WARNING in src/layouts/Infinote.vue:105:8
@typescript-eslint/no-unused-vars: 'NoteComponent' is defined but never used.
    103 | import { DateTime } from 'luxon'
    104 | import { useQuasar } from 'quasar'
  > 105 | import NoteComponent from 'components/Note.vue'
        |        ^^^^^^^^^^^^^
    106 | import _ from 'lodash'
    107 |

for a component that is used in <template>.

The "solution" could be to disable @typescript-eslint/no-unused-vars globally - but it is not a good idea. Is there a proper way to make ESLint aware of <script setup> functionality?

Upvotes: 3

Views: 2739

Answers (1)

coyotte508
coyotte508

Reputation: 9705

You can enable vue/script-setup-uses-var that is made available by the eslint vue plugin (eslint-plugin-vue).

Upvotes: 2

Related Questions