vscode中vetur、eslint、prettier个人理解

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

解决问题流程：

首先确定问题是什么->能不能分解成多个小问题->依次解决小问题->反思问题的产生

---

以下是本篇文章正文内容

一、问题的出现

在编写vue代码时，vscode中使用到vetur、eslint、prettier插件，想实现保存时，自动格式化代码。但事与愿违，保存自动格式化代码后，会出现eslint语法报错。

二、vetur、eslint、prettier是什么？

vetur：主要针对vue文件，有代码高亮、错误检查、格式化、debugger以及一些vue文件的定制功能。
eslint：代码检测工具，用来检测你代码中的不规范，可以统一项目项目的代码规范。
prettier：代码格式化工具，以某种规则来格式化你的代码。

使用背景：虽然vetur同时有错误检查以及格式化，但是代码检测在项目中还是通常用eslint；而格式化工具则是用prettier。vetur则更多的是用到了它的代码高亮等功能

二、解决办法

1.安装vetur插件

安装vetur插件后，vue代码可以高亮了，vetur中也有prettier格式化工具，但只能针对vue文件使用。

2.安装eslint插件

安装eslint插件后，代码不规范的地方，会报出错误。具体的配置可以根据实际需求在.eslintrc.js文件中的rule项里设置对应规则（配置信息也可能在package.json文件中）。

3.安装prettier插件

安装prettier插件后，会根据prettier插件的默认规则来格式化代码，规则可以通过在根目录下，新建.prettierrc.json文件来配置规则。

总结

报错原因：是因为prettier插件格式化代码后，代码的格式化规则和eslint的检测代码的规则有冲突，因此保存后就会报错。
解决办法：修改prettier插件的规则或者eslint设置忽略错误。
（个人见解，如果有误，请多指教）