eslint报错Component name “home“ should always be multi-word，文件命名规则导致问题解决方案

一、问题描述

新建vue项目的时候，往往需要配置eslint进行代码的格式化，但使用过程中也是会遇到各种问题，就比如：Component name “Home” should always be multi-word.eslintvue/multi-word-component-names

报错：Component name “home“ should always be multi-word

<script>     export default { 
    name: 'App',     data() {         return { 
            date: '', 
            week: '', 
            time: '',         }     } } </script>

原因：其实这是eslint对命名的校验，要以多词组件名称命名，防止与现有和未来的 HTML 元素发生冲突。

二、解决方法

方法一、第一种方式>配置.eslintrc.js文件（*推荐使用）

在根目录找到eslintrc.js文件，配置关闭名称的校验，在该文件中，找到rules进行配置，如下代码：

// 关闭名称校验 'vue/multi-word-component-names': 'off'

方法二、第二种方式>忽略指定文件

'vue/multi-word-component-names': [   'error', {     ignores: ['Home'] // 在数组中放入组件的名称 }]

方法三：关闭eslint的校验，很粗暴（不推荐使用）

同样找到eslintrc.js文件，在其配置上添加如下代码：

// 关闭eslint校验 lintOnSave: false

完美解决此问题！