前言
昨天，我的开源项目成员给我提交了代码，我在用webstorm看他的代码时发现了一堆跟代码格式相关的黄色报错，我就问他这一堆黄色报错你的编辑器就没给你提示吗？他说他用的vscode没有提示这些报错。
于是，我就亲自下载了vscode搞了下发现真没提示，在百度和掘金搜了下vscode配置eslint+prettier的文章没有一个好使的，终于在踩了很多坑后，配置成功了。
本文就跟大家分享下如何在vscode上配置Eslint+Prettier，欢迎各位感兴趣的开发者阅读本文。
写在前面
本文中所使用的项目在package.json中已经装了相关依赖包，在项目根目录也有其对应的配置文件。webstorm是可以正确识别我的配置文件在保存时进行格式化的，vscode就不行了，本文的目的就是解决这个问题。
本文中使用的项目地址：chat-system
插件安装
我们先需要为vscode安装相关插件。
- 安装eslint、prettier插件
插件使用
这里你可以选择直接修改vscode的settings.json文件，这样的修改是本地的，无法做到同步，如果有其他人也是用的vscode，那么你要告诉他改什么改什么，他在去改，甚是麻烦。
我这里选择在项目的根目录创建.vscode文件夹， 然后再在其下面创建settings.json文件，将这个文件夹同步到git，这样做vscode就会优先读取项目根目录下的配置文件了，完美的解决了刚才那个痛点。
创建好文件后，添加下述配置：
{
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.alwaysShowStatus": true,
"eslint.format.enable": true,
"eslint.packageManager": "yarn",
"eslint.run": "onSave",
"prettier.packageManager": "yarn",
"eslint.validate": [
"vue",
"javascript",
"javascriptreact"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"vetur.validation.template": false,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.formatOnSave": true,
"files.eol": "\n"
}
注意：如果你启用了prettier，但是没有相关配置文件，editor.formatOnSave选项就要设置为false。不然会与vscode自身的保存起冲突
接下来，我们来配置prettier，同样的在项目根目录创建.prettierrc.json文件，添加下述配置：
{
"tabWidth": 2,
"useTabs": false,
"endOfLine": "auto",
"singleQuote": false,
"semi": true,
"trailingComma": "none",
"bracketSpacing": true
}
上述配置是我项目的相关规范，你可以按照你的实际需求去弄，对此不了解的可以去查阅官方文档。
做完上述配置后，vscode就已经可以按照我们的规范来进行相应的提示了，按ctrl+s保存代码时其也会按照我们自定义的的规范进行格式化。
Windows下的坑
做完上述配置后，mac下没有任何问题，一切按照我的配置规则走了，然而我的用windows的项目成员说注释格式化没生效，我是配置了注释必须有一个空格，按ctrl+s时会自动格式化。
为了解决这个问题，找了很多方案，没有一个好使的，当我快要放弃时，无意间发现vscode下面的eslint有个禁用的标志（如下图所示）。
此时，我觉得我好像知道啥问题了，应该是启用prettier后，vscode默认就把eslint给禁用了，我尝试的点了两下禁用图标，出现了如下图所示的界面，选择第一个。
果然如我所料，做完上述操作后，eslint哪个标志打了个勾，我再次尝试了下Ctrl+s，成了，注释也按照我的规则自动格式化了。
写在最后
- 文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注😊
- 本文首发于掘金，未经许可禁止转载💌
评论区