VSCode合理配置ESLint+Prettier

前言

昨天，我的开源项目成员给我提交了代码，我在用webstorm看他的代码时发现了一堆跟代码格式相关的黄色报错，我就问他这一堆黄色报错你的编辑器就没给你提示吗？他说他用的vscode没有提示这些报错。

于是，我就亲自下载了vscode搞了下发现真没提示，在百度和掘金搜了下vscode配置eslint+prettier的文章没有一个好使的，终于在踩了很多坑后，配置成功了。

本文就跟大家分享下如何在vscode上配置Eslint+Prettier，欢迎各位感兴趣的开发者阅读本文。

写在前面

本文中所使用的项目在package.json中已经装了相关依赖包，在项目根目录也有其对应的配置文件。webstorm是可以正确识别我的配置文件在保存时进行格式化的，vscode就不行了，本文的目的就是解决这个问题。

本文中使用的项目地址：chat-system

插件安装

我们先需要为vscode安装相关插件。

• 安装eslint、prettier插件

插件使用

这里你可以选择直接修改vscode的setting.json文件，这样的修改是本地的，无法做到同步，如果有其他人也是用的vscode，那么你要告诉他改什么改什么，他在去改，甚是麻烦。

我这里选择在项目的根目录创建.vscode文件夹， 然后再在其下面创建setting.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保存代码时其也会按照我们自定义的的规范进行格式化。