How to deal with <script-setup> component imports and eslint rules like no-unused-vars

Question

When using Vue composition API with <script setup>, components are just imported like

import Component from '@/components/Component.vue';

How do I keep eslint from applying the no-unused-var rule here, without disabling the rule completely? I would like it to detect "real" unused variables but those imports are in fact used in the template section.

Answer 1

You have to configure your eslint config to include eslint-plugin-vue and @vue/eslint-config-standard.

Add vue in your eslint config

module.exports = {
  extends: [
    '@vue/standard',
    '@vue/prettier'
  ],
  plugins: ['vue'],
 rules: {
    'vue/script-setup-uses-vars': 'error'
  }
  // Your file
};