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

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

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

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

遇见这样的报错我就开始找settings.json中的配置,但是我已经配置了句尾没有逗号,但是依旧出现了这样的问题 :Vue项目中<template>标签第一个尖括号下方飘红问题及解决方案_第2张图片

 出现了这样的问题肯定是配置哪里出错了,我就开始排查,原来是.prettierrc配置文件中忘记对句尾逗号进行配置了,加上"trailingComma": "none"配置之后句尾逗号报错即可解决。Vue项目中<template>标签第一个尖括号下方飘红问题及解决方案_第3张图片

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

 报错二: