Vue项目content组件已注册使用仍被Lint提示未使用问题咨询

报错原因 #

• 核心诱因是content为HTML原生保留标签，Vue配套的ESLint规则（通常是eslint-plugin-vue提供的vue/no-unused-components校验规则）识别模板标签时，会默认将和原生HTML标签重名的标签判定为系统原生标签，而非你注册的自定义组件，因此会误判你注册的content组件未被使用。

解决方案 #

可任选以下一种方式修复：

1. 重命名自定义组件（最推荐）
   避开HTML原生保留标签，将组件名修改为MainContent、AppContent这类专属命名，同步修改注册和调用处的代码即可，修改后示例：

<template>
    <div>
        <Top />
        <AppContent />
    </div>
</template>

<script>
    import AppContent from './components/content.vue'
    import Top from './components/top.vue'
    export default {
        name: 'App',
        components: { Top, AppContent }
    }
</script>

<style>
    * {
        padding: 0;
        margin: 0;
    }
</style>

同时也符合Vue官方推荐的自定义组件使用大驼峰（PascalCase）或短横线分隔（kebab-case）的命名规范，从根源避免和原生标签命名冲突。

2. 调整ESLint规则配置
   如果不想修改组件名，可以在项目的ESLint配置文件（通常是.eslintrc.js、.eslintrc.json等）中添加规则例外，忽略这类误判：

{
  "rules": {
    "vue/no-unused-components": ["error", {
      "ignoreWhenBindingPresent": true
    }]
  }
}

内容的提问来源于stack exchange，提问作者exoticism4869