DefineEmits 函数的 Vue linting 错误

Question

我的 Vue SPA 的 linting 存在问题。我正在使用脚本设置语法糖（https://v3.vuejs.org/api/sfc-script-setup.html）中的defineEmits函数。这些错误没有任何意义，有谁知道如何解决这个问题（无需为受影响的文件禁用这些规则，因为它发生在定义Emits的每次使用中）。奇怪的是，defineProps 函数运行时没有错误，它遵循相同的语法。有人可以帮我从这里出去吗？

我的 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

生成这些错误的代码（defineEmits 是所有错误的来源：

<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>

我的 linting eslintrs.js 文件（导入的共享规则不会修改 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',
    },
}

更新：

我做了一些进一步的挖掘并看到了这种情况的发生：

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

const emit = defineEmits<EmitsType>()

具有以下 linting 输出：

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

看起来 linter 无法正确处理这些类型。

Answer 1

我遇到了同样的问题，我找到了 2 个解决方案，它解决了这个问题，但我不太确定我是否做错了。

1. 添加'@typescript-eslint/recommended'到您的eslintrc

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

或者

2. 添加'func-call-spacing'规则

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

以下是有关 的其他详细信息no-unused-vars。

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