Vue3 <script setup> not recognized

The issue I have is actually when using Goland (latest, or EAP (but EAP does not work as the plugins are not compatible), but since this is si TS-related I guess the forum here will be more suitable. The question is copied from https://stackoverflow.com/questions/69349552/how-to-correctly-configure-eslint-when-having-undue-warnings-in-script-setup, but the solution does not work.

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?**

 

2 comments
Comment actions Permalink

Thank you Elena Pogorelova for the pointer. By running

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

and using in .eslintrc.js

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

the issues were fixed. 

1

Please sign in to leave a comment.