Prettier的作用是对代码进行格式化，并不关注代码质量潜在问题的检查。

Prettier 自身的规范倾向于团队的代码风格的规范或统一，例如每行最大长度，单引号还是双引号，等号左右空格，使用tab还是空格等等。

除了js/ts外，它还支持对多种语言进行格式化，如vue、html、css、less、scss、json、jsx等等，是一个比较综合的代码格式化工具。

如何点击保存自动使用prettier格式化数据：

1.在vscode开发编辑器里安装prettier

2.在vscode的 设置中配置相关格式

settings.json中设置编辑器的默认代码格式化器 

全局配置 

{
    "editor.formatOnSave": true, // 开启保存文件自动格式化代码
    "prettier.requireConfig": true, // 需要Prettier的配置文件
    "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认的代码格式化工具
}

或者为指定语音设置默认格式化器：（在你自己开发项目中对应用到的语言都可以设置）

{
 "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
 "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

}

 3.在项目的根目录创建..prettierrc文件

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "endOfLine": "auto",
  "htmlWhitespaceSensitivity": "css",
  "cssDeclarationSortOrder": "alphabetical",
  "tableContentIndentation": "align",
  "vueIndentScriptAndStyle": true,
  "proseWrap": "preserve"
}

• "semi": true：在语句末尾添加分号。
• "trailingComma": "all"：在对象或数组的最后一个元素后面添加尾随逗号。
• "singleQuote": true：使用单引号而不是双引号。
• "printWidth": 80：一行的最大宽度为 80 个字符。
• "tabWidth": 2：使用两个空格的缩进。
• "bracketSpacing": true：在对象的大括号之间添加空格 { foo: bar }。
• "jsxBracketSameLine": false：在 JSX 中，将 > 放在最后一行的结束处，而不是新行上。
• "arrowParens": "avoid"：在只有一个参数的箭头函数中避免使用圆括号。
• "endOfLine": "auto"：自动检测并保留行尾符号（如 \n 或 \r\n）。
• "htmlWhitespaceSensitivity": "css"：在 HTML 中，对空白字符的敏感度与 CSS 相同。
• "cssDeclarationSortOrder": "alphabetical"：将 CSS 声明按字母顺序排序。
• "tableContentIndentation": "align"：对齐表格内容的缩进。
• "vueIndentScriptAndStyle": true：在 Vue 文件中，对 <script> 和 <style> 标签的内容进行缩进。
• "proseWrap": "preserve"：在 Markdown 中，保持原有的换行符。

 你可以根据自己的代码风格和团队约定来调整这些选项。也可以在prettier官网自己体验后来配置

 4.注意prettier和eslint两者都存在时的冲突

参考文章：彻底搞懂ESLint与Prettier在vscode中的代码自动格式化

完成以上配置 就可以在点击保存文件后自动格式化文件了。