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

  • 苹果13怎么截图(苹果13怎么截图快捷键)

    苹果13怎么截图(苹果13怎么截图快捷键)

  • 华为有识别图片文字的功能吗(华为识别图片文字转化为文本手势)

    华为有识别图片文字的功能吗(华为识别图片文字转化为文本手势)

  • 华为畅享20plus和华为畅享10plus对比(华为畅享20plus和华为畅享20pro哪个好)

    华为畅享20plus和华为畅享10plus对比(华为畅享20plus和华为畅享20pro哪个好)

  • 华为手机怎么改照片尺寸(华为手机怎么改时间)

    华为手机怎么改照片尺寸(华为手机怎么改时间)

  • 畅享10是前置指纹吗(华为畅享10前置)

    畅享10是前置指纹吗(华为畅享10前置)

  • pckm00是什么型号(pckm00是oppo什么型号)

    pckm00是什么型号(pckm00是oppo什么型号)

  • 群公告删除后别人能看到吗(群公告删了谁会看到)

    群公告删除后别人能看到吗(群公告删了谁会看到)

  • 抖音里的狗头怎么弄的(抖音里的狗头怎么打出来)

    抖音里的狗头怎么弄的(抖音里的狗头怎么打出来)

  • 手机显示有网络却上不了网怎么回事(手机显示有网络却上不了网怎么回事OPPO)

    手机显示有网络却上不了网怎么回事(手机显示有网络却上不了网怎么回事OPPO)

  • 苹果11手机充满电后为什么没有提示(苹果11手机充满电要多少度电)

    苹果11手机充满电后为什么没有提示(苹果11手机充满电要多少度电)

  • 华为手机怎么弄两个系统(华为手机怎么弄微信分身)

    华为手机怎么弄两个系统(华为手机怎么弄微信分身)

  • 淘宝退货物流单号是什么(淘宝退货物流单号在哪里)

    淘宝退货物流单号是什么(淘宝退货物流单号在哪里)

  • word可以做思维导图吗(world可以做思维导图吗)

    word可以做思维导图吗(world可以做思维导图吗)

  • 苹果xr如何辨别有锁无锁(怎么识别苹果xr真假是不是翻新机)

    苹果xr如何辨别有锁无锁(怎么识别苹果xr真假是不是翻新机)

  • rm文件用什么播放器打开(rm 文件)

    rm文件用什么播放器打开(rm 文件)

  • 手机欠费怎么查欠多少(手机欠费怎么查询欠费多少钱)

    手机欠费怎么查欠多少(手机欠费怎么查询欠费多少钱)

  • 华为mate20怎样调大音量(华为mate20怎么自动调节亮度)

    华为mate20怎样调大音量(华为mate20怎么自动调节亮度)

  • 苹果11对比苹果x(苹果11对比苹果xs参数)

    苹果11对比苹果x(苹果11对比苹果xs参数)

  • 天猫精灵可以连接几个手机(天猫精灵可以连接电脑吗)

    天猫精灵可以连接几个手机(天猫精灵可以连接电脑吗)

  • 微信被投诉1次会怎样(微信被投诉了两次,要多久才回来正常)

    微信被投诉1次会怎样(微信被投诉了两次,要多久才回来正常)

  • 计算机系统结构是什么?(计算机系统结构第三版课后答案)

    计算机系统结构是什么?(计算机系统结构第三版课后答案)

  • phpcms能不能修改模板(如何修改php网页内容)

    phpcms能不能修改模板(如何修改php网页内容)

  • 公司不开票要交工会经费吗
  • 出口退税申报系统安装路径
  • 实物折扣的增值税
  • 待摊费用和无形资产摊销
  • 红冲以前年度收入成本的账务处理
  • 个人所得税申报密码如何设置
  • 缴纳增值税和附加税
  • 支付买方佣金
  • 公司试驾车购置税怎么交
  • 电子发票不小心删掉了怎么办
  • 收到增值税专用发票怎么处理
  • 运输公司结转成本
  • 公司租土地建厂房合法吗
  • 实收资本退还
  • 企业重组中撤资所得税有哪些处理规则?
  • 私车公用油费计入什么科目
  • 个税手续费返还计入哪个科目
  • 福利费开专票怎么处理
  • 借钱注册公司会计分录
  • 主营业务净利率和销售净利率一样吗
  • 企业接收股东划入资产作为收入处理有所得税差异吗
  • 工程发票预交税金规定
  • 外购固定资产入账
  • 一般纳税人购进农产品如何抵扣进项税额
  • 资产减值损失会影响营业利润吗
  • 法人不缴纳社保员工可以缴纳吗怎么办
  • 垫资计入什么会计科目
  • nddeagnt.exe - nddeagnt是什么进程 有什么用
  • 采购周转材料会议记录
  • 原材料因管理不善发生毁损
  • 大雾山国家公园总部加特林堡
  • layui iconfont
  • 双色球python算法
  • 穆尔官网
  • php 时间
  • 结转制造费用用什么科目
  • 目标检测算法有哪些
  • 采购商品的运费计入成本吗
  • 工业企业应收应付会计怎样
  • 哪些计入管理费用哪些计入资本公积
  • sql实例命名规则
  • 金蝶暂存凭证怎样转正常凭证
  • 本年利润和利润分配属于什么账户
  • 汽车买卖中介
  • 创业带动就业补贴是给企业的还是员工的
  • 关税 账务处理
  • 员工给兄弟公司的感谢信
  • 可供出售金融资产包括哪些内容
  • 物业公司付电业费合法吗
  • 跨年做进项税额转出
  • 建立明细账的操作步骤
  • sqlserver排序规则怎么看
  • mysql 多表联合更新
  • windows7开机黑屏安全模式也进不去
  • windows10的设置在哪里
  • macos rootless
  • qtask.exe - qtask是什么进程 有什么用
  • win7系统怎么关闭防火墙设置
  • linux服务器的mac地址怎么查
  • 局域网下访问vue点击无反应
  • preorder遍历
  • opengl缓冲区
  • 简单的安卓程序
  • 认识 认知
  • window批处理
  • 被人遗忘的明星
  • python 安装setup
  • perl的正则表达式语法
  • jquery ztree api
  • unity转盘游戏
  • jquery移动节点的方法
  • Android 为LinearLayout增加分割线 divider
  • css样式不能制作体积更小下载更快的网页
  • unity strangeioc
  • js日历插件
  • unity物体碰撞爆炸
  • 政治轮训的效果
  • 电子税务局怎么添加银行账户信息
  • 安置房公摊面积多少属于正常范围
  • 外地人在秦皇岛买房
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设