vue eslint报错:Component name “xxxxx“ should always be multi-word.eslintvue如何解决
这篇文章主要介绍“vue eslint报错:Component name “xxxxx“ should always be multi-word.eslintvue如何解决”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue eslint报错:Component name “xxxxx“ should always be multi-word.eslintvue如何解决”文章能帮助大家解决问题。
报错代码
vue-cli全新创建项目，并建立组件时提示报错，报错如下：
vscode标红提示：
Component name "index" should always be multi-word.eslintvue/multi-word-component-names
npm run serve / yarn serve报错：
ERROR Failed to compile with 1 error 下午6:02:08
C:\Users\wally\Desktop\vscode\vue\seal\seal_web\src\views\home\index.vue
1:1 error Component name "index" should always be multi-word vue/multi-word-component-names
✖ 1 problem (1 error, 0 warnings)
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
ERROR in
C:\Users\wally\Desktop\vscode\vue\seal\seal_web\src\views\home\index.vue
1:1 error Component name "index" should always be multi-word vue/multi-word-component-names
✖ 1 problem (1 error, 0 warnings)
webpack compiled with 1 error
原因
新手在组件命名的时候不够规范，根据官方风格指南，除了根组件（App.vue）外，自定义组件名称应该由多单词组成，防止和html标签冲突。
而最新的vue-cli创建的项目使用了最新的vue/cli-plugin-eslint插件，在vue/cli-plugin-eslint v7.20.0版本之后就引用了vue/multi-word-component-names规则，所以在编译的时候判定此次错误。
解决方案
方案一
改名
修改组件名为多个单词，使用大驼峰命名方式或者用“-”连接单词。但是有时候因为个别原因不能改名，此方案不好使，看下面两个方案。
方案二：
关闭校验
在根目录下找到vue.config.js文件（如果没有则新建一个），添加下面的代码
lintOnSave: false
添加后文件示例：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
//关闭eslint校验
lintOnSave: false
})此方案治标不治本，只是编译时不报错，如果使用vscode+eslint 会在文件头标红提示，强迫症根本忍受不了，并且官方并不建议直接关闭校验，所以推荐使用方案三
方案三（推荐）
关闭命名规则校验
在根目录下找到 .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"]//需要忽略的组件名
}]方案四(推荐):
方案三是关闭和忽略组件名规则，但是有时候还是需要团队有个共同规范，不能关闭，同时文件名可能和组件名不一致时，例如我需要每个页面入口为index.vue,但是组件名为MyHome,用忽略组件名的方式可能需要同时添加index和MyHome,就显得很傻瓜。或者我需要路由组件忽略，非路由组件不忽略，那如何在这种情况下修改规则更好用呢？因此我找到了第四种方式。方案三是根据组件名忽略，此方案是根据文件进行关闭规则，更适用。
关闭某文件命名规则校验
在根目录下找到 .eslintrc.js 文件，同样如果没有则新建一个（注意文件前有个点），代码如下
在文件的overrides中添加如下代码：
{
files: ['src/views/index.vue','src/views/**/index.vue'], // 匹配views和二级目录中的index.vue
rules: {
'vue/multi-word-component-names':"off",
} //给上面匹配的文件指定规则
}其中的 files: [] 是用于匹配文件的，*号代表所有文件。index.vue也可以改成 *.vue，这就是匹配目录下的所有vue文件
文件内容：
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',
},
overrides: [
//这里是添加的代码
{
files: ['src/views/index.vue','src/views/**/index.vue'], // 匹配views和二级目录中的index.vue
rules: {
'vue/multi-word-component-names':"off",
} //给上面匹配的文件指定规则
},
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}其实和方案三基本一致，只是放的位置不同
关于“vue eslint报错:Component name “xxxxx“ should always be multi-word.eslintvue如何解决”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注蜗牛博客行业资讯频道，小编每天都会为大家更新不同的知识点。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论