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.

Blevins

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

Prophesy

Adding '@vue/typescript/recommended' helped – Throckmorton

This is not a solution. This simply breaks all linting. – Aruba

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",
}

Unicef

Answer 3

I had a similar issue and the solution from the documentation did not help me

https://eslint.vuejs.org/user-guide/#compiler-macros-such-as-defineprops-and-defineemits-generate-no-undef-warnings

You need to use vue-eslint-parser v9.0.0 or later.

I'm on version 9.3.1 and the only solution that worked for me was adding these lines into my eslintrc.js:

...
parser: 'vue-eslint-parser',
parserOptions: {
    parser: '@typescript-eslint/parser',
    extraFileExtensions: ['.vue']
},
...

Inertia