当前栏目
在 vue eslint 报错 error “Component name “*****“ should always be multi-word”,该怎么办?
目录
方案二 :配置 vue.config.js 文件(网上方法,本人使用无效)
出现的问题:
在 vue-cli 创建的项目中,创建文件并命名后,会报 “Component name "*****" should always be multi-word” 报错;
报错截图示例如下:
Component name "******" should always be multi-word.eslintvue/multi-word-component-names
报错的原因:
在组件命名的时候未按照 ESLint 的官方代码规范进行命名,根据 ESLint 官方代码风格指南,除了根组件(App.vue)以外,其他自定义组件命名要使用大驼峰命名方式或者用“-”连接单词进行命名;
解决方案:
方案一 :重命名(亲测有效)
文件的名称重命名
重新命名组件名为驼峰命名方式或者用“-”连接单词的格式
这样问题就解决啦~~~~
示例如下:
方案二 :配置 vue.config.js 文件(网上方法,本人使用无效)
在根目录下找到 vue.config.js 文件(如果没有则新建一个,按照示例中的代码进行添加;用 vue-cli 脚手架进行创建的项目都会有 vue.config.js 文件),添加下面的代码在 vue.config.js 文件下,加入以下代码
// 关闭eslint校验 lintOnSave: false
示例如下:
此方案只是编译时不报错,如果使用 VScode+eslint 会在文件头标红提示,并且官方并不建议直接关闭校验,因此在这里并不推荐使用该方法进行解决;
配置 vue.config.js 文件的方法(方案二)一般都不能解决问题,不建议大家使用
如果你发现并没有解决问题,那么不妨试试其他方案
方案三 :配置 .eslintrc.js文件(亲测有效)
1、关闭命名规则
找到 .eslintrc.js 文件在 rules 里面加上这么一句
// 关闭名称校验 'vue/multi-word-component-names': "off"
建议使用这种方法,更加正确合理;
示例如下:
发现不报错了,可以正常运行啦~~~
以上是关闭命名规则,将不会校验组件名,官方建议设置是根据组件名进行忽略
2、忽略个别组件名
// 添加组件命名忽略规则 "vue/multi-word-component-names": ["error",{ "ignores": ["Home","User"] //在这个数组中加入需要忽略的组件名 }]
推荐使用方案三,极力推荐!!!
示例如下:
非常重要的注意点:(重启项目,配置文件才生效)
在运行的项目中,修改配置文件,必须先将项目在 终端 两次点击 Ctrl+C 将项目 终止运行,再 npm run serve 重新运行项目,修改的配置文件才可以生效
这样,就解决这个报错啦~~~
如果有问题,欢迎大家评论区讨论,文章对你有用,给正在学习前端的小陈点个赞吧~~~
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件