为什么需要保存文件自动格式化？

我们项目内配置了eslint、prettier、stylelint等代码规范，代码不规范的时候虽然会出现红色波浪号，但是需要手动去点击修复，一个个的去点过于麻烦；

解决方案：

（1）直接修改vscode中配置，达到可以全局生效，针对所有项目都会保存自动格式化；
- 弊端：
  - 1.需要团队中的每个人都要在自己的vscode中去修改配置
  - 2.有的老项目文件之前没有全局设置，现在设置后再去保存老项目变动会比较大
（2）针对当前项目配置vscode，使用项目下的vscode配置文件，并且项目下的配置会覆盖全局的配置

项目内配置vscode

.vscode文件夹 + extensions.json + settings.json解读

1. extensions.json

在当前项目中，需要安装哪些插件。

{
  // 在当前项目中，需要安装哪些插件。
  "recommendations": [
    "Vue.volar",
     "Vue.vscode-typescript-vue-plugin",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode"
  ]
}

查看当前项目（工作区）推荐插件，步骤：
在这里插入图片描述

上面展示的就是extensions.json推荐安装插件，可以一键安装。

编辑推荐插件

我们也可以编辑推荐哪些插件，例如：在extensions.json增加stylelint插件推荐：

{
  // 在当前项目中，需要安装哪些插件。
  "recommendations": [
    "Vue.volar",
     "Vue.vscode-typescript-vue-plugin",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "stylelint.vscode-stylelint"
  ]
}

值stylelint.vscode-styleling对应插件的标识符

二、settings.json

vscode编辑器和插件的配置。

注意：项目中的setting.json会覆盖vscode中的全局配置。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "stylelint.validate": ["css", "less", "scss", "vue"]
}

总结

extensions.json和settings.json对于团队协作开发起到很重要的作用。

eslint、prettier、stylelint校验工具保存自动格式化