vue eslint报错:Component name “xxxxx“ should always be multi-word.eslintvue如何解决


这篇文章主要介绍“vueeslint报错:Componentname“xxxxx“shouldalwaysbemulti-word.eslintvue如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vueeslint报错:Componentname“xxxxx“shouldalwaysbemulti-word.eslintvue如何解决”文章能帮助大家解决问题。vue-cli全新创建项目,并建立组件时提示报错,报错如下:vscode标红提示:Component name “index” should always be multi-word.eslintvue/multi-word-component-namesnpm run serve / yarn serve报错:ERROR Failed to compile with 1 error 下午6:02:08
C:UserswallyDesktopvscodevuesealseal_websrcviewshomeindex.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:UserswallyDesktopvscod免费云主机域名evuesealseal_websrcviewshomeindex.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文件(如果没有则新建一个),添加下面的代码添加后文件示例:此方案治标不治本,只是编译时不报错,如果使用vscode+eslint 会在文件头标红提示,强迫症根本忍受不了,并且官方并不建议直接关闭校验,所以推荐使用方案三关闭命名规则校验在根目录下找到 .eslintrc.js 文件,同样如果没有则新建一个(注意文件前有个点),代码如下添加一行:文件内容:以上是关闭命名规则,将不会校验组件名,官方建议设置是根据组件名进行忽略忽略个别组件名方案三是关闭和忽略组件名规则,但是有时候还是需要团队有个共同规范,不能关闭,同时文件名可能和组件名不一致时,例如我需要每个页面入口为index.vue,但是组件名为MyHome,用忽略组件名的方式可能需要同时添加index和MyHome,就显得很傻瓜。或者我需要路由组件忽略,非路由组件不忽略,那如何在这种情况下修改规则更好用呢?因此我找到了第四种方式。方案三是根据组件名忽略,此方案是根据文件进行关闭规则,更适用。关闭某文件命名规则校验在根目录下找到 .eslintrc.js 文件,同样如果没有则新建一个(注意文件前有个点),代码如下在文件的overrides中添加如下代码:其中的 files: [] 是用于匹配文件的,*号代表所有文件。index.vue也可以改成 *.vue,这就是匹配目录下的所有vue文件文件内容:其实和方案三基本一致,只是放的位置不同关于“vueeslint报错:Componentname“xxxxx“shouldalwaysbemulti-word.eslintvue如何解决”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注百云主机行业资讯频道,小编每天都会为大家更新不同的知识点。

相关推荐: Spring的Controller怎么应用

今天小编给大家分享一下Spring的Controller怎么应用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。Controller是Spring…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 03/25 07:33
下一篇 03/25 07:34

相关推荐