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

 

0
3 comments

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. 

2

It's almost June 2023 and almost no Vue compatibility issues have been resolved... Please fix it, to make IntelliJ IDEA Ultimate usable. Really, please. Nothing works properly. Please refer to this comment:

https://youtrack.jetbrains.com/issue/WEB-56403/Vue-3-Setup-Vue-TypeScript-Service-false-errors-not-suppressed-in-Problems-Project-Errors-tab#focus=Comments-27-7374209.0-0

0

Please sign in to leave a comment.