Vue项目中<template>标签第一个尖括号下方飘红问题及解决方案

今天学习了怎样对vue项目进行eslint配置,之前写代码都是直接保存时格式化代码,没有特别地设置代码风格,但是在工作中需要统一组员的代码风格,因此eslint的配置是必要的。但是安装相关插件并且配置完成之后却遇到了各种各样的报错:

报错一:格式化代码之后代码结尾总是出现逗号导致报错

遇见这样的报错我就开始找settings.json中的配置,但是我已经配置了句尾没有逗号,但是依旧出现了这样的问题 :

 出现了这样的问题肯定是配置哪里出错了,我就开始排查,原来是.prettierrc配置文件中忘记对句尾逗号进行配置了,加上"trailingComma": "none"配置之后句尾逗号报错即可解决。

 

 报错二:<template>标签第一个尖括号下方飘红

解决完其余报错之后,遇见了最后一个报错,就是vue子组件的template标签第一个尖括号下方飘红,但app.vue父组件却没有出现这样的问题:

 遇见这样的问题我首先想到的是配置出现了问题,就百度了各种解决方案,修改与template相关的配置,但是试了很多种方案都没有解决问题,依旧报错,我就开始查看报错信息,报错信息显示:

 意思是:组件名称“Test”应始终为多字 vue/多字组件名称。我就给Test子组件另外添加了一个name属性:我首先将name属性定义为“test”,template标签的报错解决了,但是test下方直接飘红,报错信息显示:“Component name "text" should always be multi-word ”,意思就是name属性的值必须是多字母组合的,比如用驼峰命名法。将name属性的值修改之后报错全部解决:

 

 

  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值