I'm having an issue with the linting for my Vue SPA. I'm using the defineEmits function from the script setup syntactic sugar (.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 plains 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 plaining 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-piler-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-ponent-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.

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/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 plains 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 plaining 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-piler-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-ponent-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.

• javascript
• typescript
• vue.js
• eslint
• vue-position-api

3 Answers 3

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/remended' to your eslintrc

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

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./typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/no-unused-vars.md

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

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

https://eslint.vuejs/user-guide/#piler-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']
},
...