vue3+ts项目保存自动格式化以及通过配置 prettier实现多人协作下统一代码格式_vue项目格式化ts联合类型格式化有问题

背景： 多个成员协作开发一个项目的时候需要统一代码格式和规范，避免出现一些不必要的问题
首先: 需要安装几个vscode编辑器插件
1、Prettier - Code formatter
2、Ant Design Vue helper（这个插件视个人情况，因为我的项目上基于antdv开发的）
3、Vue Language Features(Volar)
4、Eslint
然后需要找到vscode 设置-格式化，把 Editor: Format on Save勾选上

然后需要找到setting.json文件，去配置一些我们需要的项，给大家说一个快速找到setting.json文件的方法，请看下方图片：

setting配置项：

{ 
  // 文件保存自动格式化 
  "editor.formatOnSave": true, 
    // 格式化插件设置为 prettier 
    "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

prettier配置 : 项目里有一个prettier.config.js

module.exports = { 
  printWidth: 100, // 超过最大值换行 
  tabWidth: 2, // 缩进字节数 
  useTabs: false, // 缩进不使用tab，使用空格 
  semi: false, // 句尾添加分号 
  vueIndentScriptAndStyle: true, // 缩进Vue文件中的脚本和样式标签 
  singleQuote: true, // 不适用单引号，适用双引号 
  quoteProps: 'as-needed', // 仅在需要时在对象属性周围添加引号 
  bracketSpacing: true, // 格式化结果为 : { foo: bar } 
  trailingComma: 'none', // 无尾逗号 
  arrowParens: 'avoid', // 为单行箭头函数的参数添加圆括号 
  htmlWhitespaceSensitivity: 'strict', // 空格被认为是敏感的 
  endOfLine: 'auto' // 设置统一的行结尾样式 保持现有的行尾 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

以上就是多人开发，对代码进行统一管理的配置啦，希望对大家有帮助！
如有问题，欢迎指出，共同学习！