位置: IT常识 - 正文

【vue eslint】报错Component name “xxxxx“ should always be multi-word.eslintvue/四种解决方案(eslint vue配置)

编辑:rootadmin
【vue eslint】报错Component name “xxxxx“ should always be multi-word.eslintvue/四种解决方案 vue eslint报错:Component name "index" should always be multi-word.eslintvue/multi-word-component-names的四种解决方式报错代码原因解决方案方案一方案二:方案三(推荐)方案四(推荐):报错代码

推荐整理分享【vue eslint】报错Component name “xxxxx“ should always be multi-word.eslintvue/四种解决方案(eslint vue配置),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:eslint-config-vue,vue项目eslint配置,vue-eslint-parser,vuecli eslint,vue3 eslint配置,vue项目eslint配置,vuecli eslint,vue eslint报错,内容如对您有帮助,希望把文章链接给更多的朋友!

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:08C:\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})【vue eslint】报错Component name “xxxxx“ should always be multi-word.eslintvue/四种解决方案(eslint vue配置)

此方案治标不治本,只是编译时不报错,如果使用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 } } ]}

其实和方案三基本一致,只是放的位置不同

本文链接地址:https://www.jiuchutong.com/zhishi/292992.html 转载请保留说明!

上一篇:桌山,南非开普敦 (© 4FR/Getty Images)(桌山 开普敦)

下一篇:日落时分中央海岸入口海滩上的救生员小屋,澳大利亚新南威尔士州 (© Yury Prokopenko/Getty Images)(日落时分是什么意思)

  • 联想蓝牙耳机怎么连接手机(联想蓝牙耳机怎么重新配对)

    联想蓝牙耳机怎么连接手机(联想蓝牙耳机怎么重新配对)

  • 华为v30有红外线功能吗(华为v30红外线如何用)

    华为v30有红外线功能吗(华为v30红外线如何用)

  • xr发热严重(xr发热很严重)

    xr发热严重(xr发热很严重)

  • 双显卡会自动切换吗(双显卡自动切换规则)

    双显卡会自动切换吗(双显卡自动切换规则)

  • 朋友圈长图照片怎么弄(朋友圈长图模板)

    朋友圈长图照片怎么弄(朋友圈长图模板)

  • 赞赏码可以随便给别人吗(赞赏码可以随便发给别人吗)

    赞赏码可以随便给别人吗(赞赏码可以随便发给别人吗)

  • u盘大小规格(u盘大小规格排序(u盘大小规格))

    u盘大小规格(u盘大小规格排序(u盘大小规格))

  • icloud照片正在上传都没动(icloud照片正在上传什么意思)

    icloud照片正在上传都没动(icloud照片正在上传什么意思)

  • iphone11面容解锁一直转圈(iphone11面容解锁突然不能用了)

    iphone11面容解锁一直转圈(iphone11面容解锁突然不能用了)

  • mac重启卡住了怎么办(mac重启之后特别卡程序也打不开)

    mac重启卡住了怎么办(mac重启之后特别卡程序也打不开)

  • 微信红包多长时间自动退回(微信红包多长时间不领退回去)

    微信红包多长时间自动退回(微信红包多长时间不领退回去)

  • 快手买的东西退款什么时候到账(快手买的东西退款了货也收了怎么办)

    快手买的东西退款什么时候到账(快手买的东西退款了货也收了怎么办)

  • 笔记本小键盘0键打不出来(笔记本小键盘0变成右键)

    笔记本小键盘0键打不出来(笔记本小键盘0变成右键)

  • 手机充电几秒就断了(手机充电几秒就充一格)

    手机充电几秒就断了(手机充电几秒就充一格)

  • 苹果11是全网通的吗(苹果11全网通型号)

    苹果11是全网通的吗(苹果11全网通型号)

  • iphone6能不能用扁头耳机(iPhone6能不能用快充)

    iphone6能不能用扁头耳机(iPhone6能不能用快充)

  • 苹果手机拉黑了怎么解开(苹果手机拉黑了别人,别人发短信会显示什么)

    苹果手机拉黑了怎么解开(苹果手机拉黑了别人,别人发短信会显示什么)

  • 怎么把airpods从壳里拿出来(怎么把airpods添加到我的icloud)

    怎么把airpods从壳里拿出来(怎么把airpods添加到我的icloud)

  • 荣耀20s什么时候上市(荣耀20s什么时候停产的)

    荣耀20s什么时候上市(荣耀20s什么时候停产的)

  • 手机上怎样查询话费(手机上怎样查询养老保险缴费记录)

    手机上怎样查询话费(手机上怎样查询养老保险缴费记录)

  • window10运行在哪(window10里运行在哪里)

    window10运行在哪(window10里运行在哪里)

  • 苹果11两个摄像头怎么切换(苹果11两个摄像头挡住一个没有影响啊)

    苹果11两个摄像头怎么切换(苹果11两个摄像头挡住一个没有影响啊)

  • 朋友圈怎么发不被折叠(朋友圈怎么发不出去视频了)

    朋友圈怎么发不被折叠(朋友圈怎么发不出去视频了)

  • oppor17怎么换微信铃声(oppor15怎么改微信号)

    oppor17怎么换微信铃声(oppor15怎么改微信号)

  • 手机看视频卡怎么办(手机看视频卡怎么回事)

    手机看视频卡怎么办(手机看视频卡怎么回事)

  • 个体工商户可以开发票吗
  • 外地预缴的附加税怎么算
  • 城镇土地使用税暂行条例
  • 外出经营是什么意思
  • 分配本月材料费用的会计分录
  • 未达起征点的增值税怎么账务处理
  • 新政府会计制度下属于负债类科目的是
  • 租借车辆发生事故后的保险理赔问题
  • 经营活动现金流增加的原因
  • 工业企业生产费用要素
  • 商业发票和形式发票英文
  • 原材料盘亏会计分录怎么做
  • 短期薪酬是会计科目么
  • 公司车子的保养费怎么算
  • 人力资源外包服务费计入什么科目
  • 公司牌车还款从哪里扣款
  • 废品材料回收价格
  • 直接减免的增值税计入哪个科目
  • 同一控制下企业合并会产生商誉吗
  • 跨行业能开发票吗
  • 股权转让印花税税率
  • 这些常用的发票知识,你都知道了吗?
  • 公司向外单位借款摘要怎么写
  • 公司租赁房屋的物业费怎么入账
  • 增值税税额计入什么科目?
  • 坏账准备本期期末应有金额
  • 专票可以当普票用不抵扣吗
  • 高危行业企业提成怎么算
  • 直接人工分配按计时工资怎么分
  • 新企业办理地税登记流程
  • 怎么获取免费的腾讯vip
  • 运行项目报错Couldn't import Django
  • Win11怎么设置屏幕熄灭时间
  • php使用内置函数的过程
  • 结存材料实际成本例题
  • 装机电源怎么装
  • 对于企业已经入账而银行尚未入账
  • ts基础
  • Symfony2实现在controller中获取url的方法
  • php生成随机6位数
  • Yii1.1中通过Sql查询进行的分页操作方法
  • javaweb.xml配置文件
  • chattra
  • 出售在建工程账务处理
  • 新开企业如何在电子税务局操作
  • 应付票据是商业承兑汇票吗
  • 跨区预缴增值税申报表查不到怎么回事
  • 调账处理
  • day14-HTTP01
  • 帝国cms建站实例教程
  • 纳税申报的流程如何?面试怎么说
  • 什么情况下要去y加ies
  • 网银数字证书年费
  • 经营性存款人罚款
  • 其他综合收益算不算所有者权益
  • 抵扣税款
  • 开办费用怎么处理
  • 预提费用多提了怎么办
  • 入库单金额写错可以改吗
  • 补缴以前年度的税
  • 职工福利费计提标准
  • 咨询服务费可以全额扣除吗
  • 专项应付款的账务处理营业外收入
  • 公司给员工租的宿舍如何做分录
  • 小规模纳税人劳务费税率
  • 期初数据根据总账还是明细账
  • 管理会计的职能作用是
  • 群发网址
  • win7自带截图保存在哪个文件夹
  • cmd命令怎么进入d盘文件夹
  • linux 中find
  • 通过防火墙可以保证窃听到的信息毫无价值
  • linux系统基本操作命令
  • 禁用强制驱动程序签名有什么用
  • windows8.1crazy error
  • IE、FF、Chrome浏览器中的JS差异介绍
  • nodejs的http
  • unity3d游戏开发书籍
  • 张家港市有什么好吃的美食
  • 小店区国税地税局地址
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设