到底如何配置，才能在vscode中正常使用eslint和prettier？

为什么会遇到这个问题？

每次创建工程前，总要纠结一下是否要用eslint，一方面因为eslint没法和vscode很容易的集成，比如需要配置文件.eslintrc.js，需要设置.usersetting等，另一方面会和prettier等格式化软件可能有冲突，当然为了体现专业性，还是不能不用，于是半推半就的加上了。

配置复杂，这次好好总结一下，争取让大家拿来即用。

eslint和prettier是什么？

eslint是js代码的规范性检查工具。
prettier是js代码的格式化工具，可以格式化js/html/css/less/sass...等代码

从定位可以看出二者还是有区别的，一个用来检查规范性，一个格式化。

eslint也可以通过指定--fix参数来格式化，为什么还需要prettier？

eslint只能进行部分格式化，但这个格式化只是用来修正规范性，对代码可读性并没有改变，对于像var a={a:1,b:2,}这样写在一行的代码，并不能格式化。
因此eslint不能直接用于统一团队代码风格。
而prettier才是用于统一代码风格的格式化工具。
prettier会把var a={a:1,b:2,}格式化成多行，像这样：

//原代码：var a={a:1,b:2,}
var a = {
  a : 1,
  b : 2
}
//这里原代码段中等号、括号附近无空格，这个是规范性问题，
//最后一个kv对后加了逗号，这个是代码风格的问题，
//正好由eslint校验提示错误，由prettier进行格式化进行消除。

因此二者互相补充才是最好的。

---

说了那么多，如何配合使用？

配置还是有点复杂的，需要配置这些东西：

• vscode：
• eslint插件：
• prettier插件：
• .eslintrc.js文件：
• .eslintignore文件：

如何应用到vue工程中？

vue官方指定了一些插件，可以很方便的集成eslint和prettier