javascript - defineEmits 函数的 Vue linting 错误

Question

我的 Vue SPA 的 linting 有问题。我正在使用脚本设置语法糖 (https://v3.vuejs.org/api/sfc-script-setup.html) 中的 defineEmits 函数。这些错误没有任何意义，有没有人知道如何解决这个问题(无需为受影响的文件禁用这些规则，因为每次使用 defineEmits 都会发生这种情况)。奇怪的是，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 个解决方案，它解决了这个问题，但我不太确定我是否做错了。

添加 '@typescript-eslint/recommended'给您的eslintrc

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

或者

添加 '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