Recently entering the realm of Vue, I'm in the process of achieving pristine eslint-plugin-vue outcomes on a trial project. However, when inspecting the test file named Home.vue displayed below, an alert is triggered:
The "HelloWorld" component has been used but not registered (vue/no-unregistered-components)Could this be simply a drawback of the vue/no-unregistered-components ESLint rule itself? Is it possible that the rule does not acknowledge the
export default class Home extends Vue {}@Component(...) structure?
<template>
<v-container fluid>
<v-layout column align-center>
<!-- Warning from ESLint: The "HelloWorld" component has been used but not registered. (eslint vue/no-unregistered-components)" is being notified on the HelloWorld tag below -->
<HelloWorld
quote="Hello world!"
author="Jiminy Cricket"
/>
</v-layout>
</v-container>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import HelloWorld from '@/components/HelloWorld.vue'
@Component({
components: {
HelloWorld
}
})
export default class Home extends Vue {}
</script>
Update:
Below is my .eslintrc.js configuration along with version details of additional tools.
module.exports = {
env: {
node: true
},
/* ESLint + Prettier config */
extends: [
'plugin:vue/base',
'plugin:vue/essential',
'plugin:vue/strongly-recommended',
'eslint:recommended',
'@vue/typescript/recommended',
'@vue/prettier',
'@vue/prettier/@typescript-eslint'
],
parserOptions: {
ecmaVersion: 2020
},
rules: {
'@typescript-eslint/explicit-module-boundary-types': 'off',
'vue/no-unregistered-components': [
'warn',
{ ignorePatterns: ['v(-\\w+)+', 'router-link', 'router-view'] }
],
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'space-before-function-paren': [
'error',
{
anonymous: 'always',
named: 'never',
asyncArrow: 'always'
}
]
},
overrides: [
{
// deactivating typescript guidelines for *.config.js files
files: ['*.config.js'],
plugins: ['@typescript-eslint'],
rules: {
// Unfortunately, there's no direct way to disable all @typescript-eslint/* rules for a *.js file.
'@typescript-eslint/no-var-requires': 0
}
},
{
// enforcing the guideline specifically for TypeScript files
files: ['*.ts', '*.tsx'],
rules: {
'@typescript-eslint/explicit-module-boundary-types': ['error']
}
},
{
// how to enforce the rule solely on Typescript *.vue files???
//files: ['*.vue?lang=ts'],
files: ['*.vue'],
rules: {
'@typescript-eslint/explicit-module-boundary-types': ['warn']
}
}
]
}
When running the command
npx vue-cli-service lint --no-fix src\views\Home.vuewarning: The "HelloWorld" component has been used but not registered (vue/no-unregistered-components) at src\views\Home-min.vue:4:7:
2 | <v-container fluid>
3 | <v-layout column align-center>
> 4 | <HelloWorld
| ^
5 | quote="Hello world!"
6 | author="Jiminy Cricket"
7 | />
1 warning found.
The same red flag pops up within VSCode when utilizing the dbaeumer.vscode-eslint extension. My environment consists of eslint 6.8.0, @vue/cli-service 4.5.9, and eslint-plugin-vue 7.11.1.