位置: 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)(日落时分是什么意思)

  • 工资超5000已申报税额为0,可以退税吗
  • 可变现净值相关税费包括消费税吗
  • 物业公司停车位出租发票税率是多少钱
  • 暂估冲回账务处理
  • 公司给员工发放福利的说辞
  • 物业公司物业费收入会计分录
  • 自来水厂的供水管是什么材质的
  • 会计二级科目是哪个
  • 零售业进销差价会计分录实例
  • 高新技术企业认定
  • 增值税专用发票和普通发票的区别
  • 监督审核费用会计入账
  • 外汇结款怎么办理
  • 收到政府划拨的固定资产会计处理
  • 投资性房地产收入属于什么收入
  • 纳税人提供不动产租赁服务采取预收款方式
  • 纳税人识别号和税号是一个意思吗
  • 土地增值税成本扣除项目
  • 哪些税计入原材料费用
  • 企业白条报销和采取措施
  • 预缴所得税多交了汇算时可以抵扣下一年的所得税吗
  • 主营业务成本怎么算出来的
  • 计提社保公司承担部分怎么算
  • 怎么使用Windows安装器安装Windows10
  • 在Win7系统中,文件的属性包括
  • 新版edge浏览器如何打开ie浏览器
  • 事业单位采购管理办法
  • 怎么补去年的税
  • deepin 文件管理器
  • php实现批量删除
  • 小程序码生成器在线制作
  • 系统win7旗舰版
  • 广告费与业务宣传费扣除给企业带来的好处
  • 装修费用账务怎么处理
  • 支付国外佣金税率是多少
  • 固定资产抵债债权人账务处理
  • 像指纹一样的图形
  • 公司的财产保险包括哪些
  • 汽车销售行业的税负率是多少
  • 退回的货款应该记什么费用
  • 购买承兑的收益会计分录
  • switch关键账号教程
  • python项目开发案例集锦pdf百度网盘
  • 织梦图集的使用教程
  • 一张记账凭证写不下时合计怎么写
  • 土地增值税的计算方法公式
  • 会计学中的折旧是什么意思
  • sql server定时作业
  • sqlserver 恢复数据库
  • 企业合并财务报表
  • 应缴财政专户款年末有余额吗
  • 公司组织员工旅游需要交个税吗
  • 股东以无形资产入股是否需要缴纳个税
  • 销项税计提多了
  • 社保调低,上半年多缴的怎么办
  • 融资租出的设备是不是资产
  • 财务费用范畴
  • 签合同付款
  • 携税宝费用可以抵扣增值税吗
  • 产值和销售收入可以一样吗
  • centos7如何设置ssh免密登陆
  • windows10预览版是什么
  • ubuntu20.04安装配置
  • 自建ss
  • win8系统没有wifi
  • 微信小程序wx.request实现后台数据交互功能分析
  • 高级控件动态数据加载过程有哪些
  • 批处理常用命令总结
  • 用python编写登录程序
  • 菜单下一章
  • javascript ie
  • jquery.css
  • 推荐一些非常不好的书
  • js div拖动
  • unity坐标系转换
  • android从入门到精通
  • 一般纳税人销售米面粮油税率
  • 征管基础平台app
  • 广州市国税咨询电话
  • 新疆喀什泽普县教育局联系电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设