【vue eslint】报错Component name “xxxxx“ should always be multi-word.eslintvue解决方案

【vue eslint】报错Component name “xxxxx“ should always be multi-word.eslintvue解决方案

报错代码

image

原因：

新手在组件命名的时候不够规范，根据官方风格指南，除了根组件（App.vue）外，自定义组件名称应该由多单词组成，防止和html标签冲突。而最新的vue-cli创建的项目使用了最新的vue/cli-plugin-eslint插件，在vue/cli-plugin-eslint v7.20.0版本之后就引用了vue/multi-word-component-names规则，所以在编译的时候判定此次错误。

解决方案：

关闭命名规则校验

在根目录下找到 .eslintrc.js 文件，同样如果没有则新建一个（注意文件前有个点），代码如下

添加一行:

"vue/multi-word-component-names":"off",

文件内容：

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     //在rules中添加自定义规则
     //关闭组件命名规则
     "vue/multi-word-component-names":"off",
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

以上是关闭命名规则，将不会校验组件名，官方建议设置是根据组件名进行忽略
下面是忽略个别组件名写法

// 添加组件命名忽略规则
    "vue/multi-word-component-names": ["error",{
       "ignores": ["index"]//需要忽略的组件名
    }]

————————————————

版权声明：本文为CSDN博主「wally94」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/u013078755/article/details/123581070