I am encountering an issue with the linting of my Vue SPA. I am using the defineEmits function from the script setup syntactic sugar (https://v3.vuejs.org/api/sfc-script-setup.html). The error messages are perplexing, and I am seeking assistance on how to resolve them without having to disable rules for each affected file since it occurs consistently with every usage of defineEmits. Strangely, defineProps works seamlessly without any errors, even though it employs the same syntax. Can someone provide guidance on this matter?
Here are the errors being flagged by my linter:
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
The code snippet causing these errors (defineEmits is the root cause):
<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>
This is my linting configuration in eslintrs.js (the shared rules imported do not affect the issues reported by eslint):
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:
After further investigation, I observed the following scenario:
type EmitsType = {
(e: 'update:modelValue', value: string): void
}
const emit = defineEmits<EmitsType>()
Resulting in the following linting errors:
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 struggles to interpret these types correctly.