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

  • 怎么定时发送微信(怎么定时发送微信消息OPPO)

    怎么定时发送微信(怎么定时发送微信消息OPPO)

  • 为什么没有对方正在输入(为什么没有对方的朋友圈入口)

    为什么没有对方正在输入(为什么没有对方的朋友圈入口)

  • 5g技术的特点是什么(5g技术是什么)

    5g技术的特点是什么(5g技术是什么)

  • 苹果watch怎么换id账号(苹果watch怎么换屏保)

    苹果watch怎么换id账号(苹果watch怎么换屏保)

  • cdy an00是什么型号(cdyan00是什么型号,市场价)

    cdy an00是什么型号(cdyan00是什么型号,市场价)

  • oppo屏幕旋转无效(oppo屏幕不旋转了怎么办)

    oppo屏幕旋转无效(oppo屏幕不旋转了怎么办)

  • 电脑8g内存什么意思(电脑8g内存什么也没开占用率是多少)

    电脑8g内存什么意思(电脑8g内存什么也没开占用率是多少)

  • 钉钉删好友是互删吗(钉钉我删除好友后好友列表里还有我吗)

    钉钉删好友是互删吗(钉钉我删除好友后好友列表里还有我吗)

  • soul群聊派对怎么突然没有了(soul群聊派对怎么卡麦)

    soul群聊派对怎么突然没有了(soul群聊派对怎么卡麦)

  • iphone为什么静音也响(iphone为什么静音了来电还有声音)

    iphone为什么静音也响(iphone为什么静音了来电还有声音)

  • 为什么小米更新11系统后会卡(为什么小米更新系统后变卡了)

    为什么小米更新11系统后会卡(为什么小米更新系统后变卡了)

  • 苹果查找朋友定位准吗(苹果查找朋友定位偏差)

    苹果查找朋友定位准吗(苹果查找朋友定位偏差)

  • 在计算机中汉字采用什么存放(在计算机中汉字国所占的字节数是)

    在计算机中汉字采用什么存放(在计算机中汉字国所占的字节数是)

  • 手机淘宝发不了图片给卖家(手机淘宝发不了消息)

    手机淘宝发不了图片给卖家(手机淘宝发不了消息)

  • 华为mate30闪退怎么办(华为mate30总闪退)

    华为mate30闪退怎么办(华为mate30总闪退)

  • 三星手机开不了机怎么办(三星手机开不了机怎么导出数据)

    三星手机开不了机怎么办(三星手机开不了机怎么导出数据)

  • ios12怎么关闭相机声音(苹果12怎么关闭相机快门声)

    ios12怎么关闭相机声音(苹果12怎么关闭相机快门声)

  • j1900性能(J1900性能怎么样)

    j1900性能(J1900性能怎么样)

  • 快手第一个作品怎么火(快手第一个作品两千播放量正常吗)

    快手第一个作品怎么火(快手第一个作品两千播放量正常吗)

  • 微信群禁言在哪里设置(微信群禁言在哪里开?)

    微信群禁言在哪里设置(微信群禁言在哪里开?)

  • 苹果6sp摄像头抖动(苹果6sp摄像头抖动修复多少钱)

    苹果6sp摄像头抖动(苹果6sp摄像头抖动修复多少钱)

  • 苹果6手机内存不够用怎么办(苹果6手机内存卡装哪里)

    苹果6手机内存不够用怎么办(苹果6手机内存卡装哪里)

  • win10开机启动项设置教程(win10开机启动项怎么删除)

    win10开机启动项设置教程(win10开机启动项怎么删除)

  • 公司租用其他公司车辆能报销保险费吗,发票怎么开
  • 利息发票怎么算
  • 负债表内容
  • 自产产品用于业务宣传确认收入吗
  • 临时聘用人员费用谁承担
  • 出差人员报销差额怎么算
  • 以固定资产换入原材料
  • 公司冲账发票做不够该如何处理合适?
  • 下列应税项目中,不按次计算征收个人所得税的是
  • 开具的发票是否为印花税的应税凭证?
  • 企业收到预收账款,能不能给购买方开具发票
  • 增值税普通发票和电子普通发票的区别
  • 地方教育费附加是什么意思
  • 公司冲账发票做账流程
  • 理财产品属于货币吗
  • 收到劳务公司缴税怎么办
  • 小规模申报个税手续费返还在哪填写信息
  • 公账的钱如何合法取出会计
  • 仓库的租赁费
  • 应付工资薪酬期末应该为0吗
  • 销售折让和折扣的风险点
  • 视同销售情形有哪些?
  • rtx3090 rtx titan
  • 商业一般纳税人标准
  • 对公帐户收款
  • 增值税应税行为是什么意思
  • 不能进行加计扣除的研发费用有哪些
  • html简单的游戏
  • 【类ChatGPT】本地CPU部署中文羊驼大模型LLaMA和Alpaca
  • 难以置信含义
  • 专家坐诊信息
  • 结构体基本知识
  • Js中操作数组的方法
  • set_ccopt_property
  • 融资租入固定资产
  • 公司买办公用品是谁的工作
  • 支租赁费用计提印花税吗
  • 企业交的社保包含什么
  • wordpress删除修订版本
  • 合伙股权退出机制
  • 政府返还的个税手续费会计分录
  • 负数发票开票条件?
  • 个体工商户怎么变更法人
  • sqlserver解密工具
  • sqlServer查询当前ip地址
  • centos彻底删除文件
  • 发票金额大于付款金额怎么写说明
  • 物业公司广告费收入税率
  • 所得税汇算清缴怎么操作
  • 借分公司的款收据怎么开
  • 微信提现手续费多少?
  • 招待客户住宿属于什么费用
  • 预支报销怎么做账
  • 投资有哪些方面
  • 记账凭证应交税费填写样本图片
  • 个体工商户注销代办
  • 施工人员的工资计入
  • 固定资产的入账时间应该是什么时间
  • 购入房屋建筑物进项税额抵扣
  • 红字冲销凭证怎么登明细账
  • 清除sql表内容
  • 如何解决电脑蓝屏0X0000007B
  • Linux系统配置要求
  • windows8.1界面
  • winxp/win7/win2003 电脑开机密码设置图文方法
  • 访问win10
  • cocos点击事件
  • android知识
  • perl 教程
  • 谈一谈js消息机制的理解
  • 批处理删除重复值
  • unity如何成一组
  • jquery中的事件和事件处理有哪些
  • android基础入门教程
  • javascript含义
  • Android调用系统摄像头
  • 合肥地税局客服电话
  • 资源税属于国税还是地税
  • 预缴的税额可以用留底抵扣吗
  • 山西省地方税务总局官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设