[SOLVED] Vue linting errors for defineEmits function


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

    modelValue: string
    name: string
    items: string[]

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

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: {
        'vue/multi-word-component-names': 'off',
        'vue/no-multiple-template-root': 'off',


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.


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


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

Answered By – EmJee

Answer Checked By – Mildred Charles (BugsFixing Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *