Vue linting errors for defineEmits function

Question

I'm having an issue with the linting for my Vue SPA. I'm using the defineEmits function from the script setup syntactic sugar ( https://v3.vuejs.org/api/sfc-script-setup.html ). The errors just do not make any sense, does anyone know how to fix this (without disabling these rules for the affected files, because it happens to every usage of defineEmits). The weird thing is that the defineProps function works without errors, which follows the same syntax. Can anyone help me out here?

My linter complains about these errors:

22:14  error  Unexpected space between function name and paren       no-spaced-func
22:27  error  Unexpected whitespace between function name and paren  func-call-spacing
23:3   error  'e' is defined but never used                          no-unused-vars
23:27  error  'value' is defined but never used                      no-unused-vars

Code that is generating these errors (the defineEmits is the source of all the errors:

<script lang="ts" setup>
const emit = defineEmits<{
    (e: 'update:modelValue', value: string): void
}>()

defineProps<{
    modelValue: string
    name: string
    items: string[]
}>()

const onInput = (e: Event) => {
    emit('update:modelValue', (e.target as HTMLInputElement).value)
}
</script>

My linting eslintrs.js file (the imported shared rules do not modify the rules eslint is complaining about):

const path = require('path')

const prettierSharedConfig = require(path.join(__dirname, '../prettier-shared-config.json'))

module.exports = {
    settings: {
        'import/resolver': {
            typescript: {},
            node: {
                extensions: ['.js', '.ts', '.vue'],
            },
        },
    },
    env: {
        browser: true,
        es2021: true,
        'vue/setup-compiler-macros': true,
    },
    extends: ['plugin:vue/essential', 'airbnb-base'],
    parserOptions: {
        ecmaVersion: 13,
        parser: '@typescript-eslint/parser',
        sourceType: 'module',
    },
    plugins: ['vue', '@typescript-eslint'],
    rules: {
        ...prettierSharedConfig.rules.shared,
        'vue/multi-word-component-names': 'off',
        'vue/no-multiple-template-root': 'off',
    },
}

Update:

I did some further digging and saw this happening:

type EmitsType = {
    (e: 'update:modelValue', value: string): void
}

const emit = defineEmits<EmitsType>()

With the following linting output:

23:3   error  'e' is defined but never used      no-unused-vars
23:27  error  'value' is defined but never used  no-unused-vars

It seems that the linter cannot properly process these types.

Answer 1

I had the same issue, I've found 2 solutions, it fixes this problem but I'm not pretty sure if I was doing it wrong.

1. Add '@typescript-eslint/recommended' to your eslintrc

  plugins: [
    ...,
    '@typescript-eslint/recommended',
  ],

or

2. Add 'func-call-spacing' rule

  rules: {
    ...
    'func-call-spacing': 'off', // Fix for 'defineEmits'
  }

Here's the additional details about the no-unused-vars .

https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/no-unused-vars.md

Answer 2

You should use @typescript-eslint/no-unused-vars for your eslint rule. It will show the correct result.

"rules": {
    "@typescript-eslint/no-unused-vars": "error",
}

Answer 3

I did not find an ideal answer, but my current workaround is to use a different defineEmits syntax.

defineEmits(['update:modelValue'])

The downside of this is does not type the emit parameter value, but I could not find another way to make it work.