defineEmits 函数的 Vue linting 错误

Question

我的 Vue SPA 检测有问题。我正在使用脚本设置语法糖 (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

我没有找到理想的答案，但我目前的解决方法是使用不同的 defineEmits 语法。

defineEmits(['update:modelValue'])

这样做的缺点是没有输入发射参数值，但我找不到其他方法让它工作。

Answer 2

我遇到了同样的问题，我找到了 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

Answer 3

您应该使用 @typescript-eslint/no-unused-vars 作为您的 eslint 规则。它将显示正确的结果。

"rules": {
    "@typescript-eslint/no-unused-vars": "error",
}

defineEmits 函数的 Vue linting 错误

Vue linting errors for defineEmits function

javascript

typescript

vue.js

eslint

vue-composition-api