Description
Checklist
- I have tried restarting my IDE and the issue persists.
- I have read the FAQ and my problem is not listed.
Tell us about your environment
- ESLint version: 8.32.0
- eslint-plugin-vue version: 9.9.0
- Node version: 16.18.1
- Operating System: Windows 11 22621
Please show your full configuration:
module.exports = {
// https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
// This option interrupts the configuration hierarchy at this file
// Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
root: true,
parserOptions: {
parser: '@babel/eslint-parser',
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
sourceType: 'module' // Allows for the use of imports
},
env: {
browser: true,
'vue/setup-compiler-macros': true
},
// Rules order is important, please avoid shuffling them
extends: [
// Base ESLint recommended rules
// 'eslint:recommended',
// Uncomment any of the lines below to choose desired strictness,
// but leave only one uncommented!
// See https://eslint.vuejs.org/rules/#available-rules
'plugin:vue/vue3-recommended', // Priority A: Essential (Error Prevention)
// 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
// 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
'standard'
],
plugins: [
// https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
// required to lint *.vue files
'vue',
],
globals: {
ga: 'readonly', // Google Analytics
cordova: 'readonly',
__statics: 'readonly',
__QUASAR_SSR__: 'readonly',
__QUASAR_SSR_SERVER__: 'readonly',
__QUASAR_SSR_CLIENT__: 'readonly',
__QUASAR_SSR_PWA__: 'readonly',
process: 'readonly',
Capacitor: 'readonly',
chrome: 'readonly'
},
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow paren-less arrow functions
'arrow-parens': 'off',
'one-var': 'off',
'no-void': 'off',
'multiline-ternary': 'off',
'import/first': 'off',
'import/named': 'error',
'import/namespace': 'error',
'import/default': 'error',
'import/export': 'error',
'import/extensions': 'off',
'import/no-unresolved': 'off',
'import/no-extraneous-dependencies': 'off',
'prefer-promise-reject-errors': 'off',
// allow debugger during development only
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}What did you do?
Sample Project containing the Vue3 ESLint error: https://github.com/nicholaszuccarelli/quasar-broken-popover-inside-field
Essentially, I've created a component and used a mixin on the component (using options API).
The mixin contains the emits[] array of some properties that the component can emit.
The component example:
<template>
<div>
<q-btn @click="$emit('sample')" />
</div>
</template>
<script>
import sampleMixin from './sampleMixin'
export default defineComponent({
name: 'IndexPage',
mixins: [sampleMixin]
})
</script>
The mixin:
export default {
emits: ['sample']
}What did you expect to happen?
ESLint should recognise that the mixin contains a 'sample' emitter property (should not show warning).
While this is a simple use-case, I have 10+ components which inherit a single mixin which emits an event - it becomes troublesome having to define these same emits[] arrays in each of the components which share the single mixin.
What actually happened?
55:18 warning The "sample" event has been triggered but not declared on emits option vue/require-explicit-emits
✖ 1 problem (0 errors, 1 warning)
Repository to reproduce this issue
https://github.com/nicholaszuccarelli/quasar-broken-popover-inside-field
(npm install then quasar dev to run project)