一、为什么要让代码风格统一？

试着想象一下，如果团队有三个前端，写的 if...else循环如下

程序员A：

const a='123'
if(a==='123')
alert(a)

程序员B：

const a='123';
if(a==='123'){
  alert(a);
}

程序员C：

const a = "123";
if (a === "123") {
  alert(a);
}

那么以上三种风格，你觉得哪种最好呢？
很显然，第三种可读性最好！

二、Prettier

本来写代码就已经有很重的心智负担了，还要去注重格式？那岂不是让我们更身心疲惫？ 是的，确实会增加心智负担，那么现在有一个工具，能够让你在保存代码的时候自动格式化，是不是想想就觉得很兴奋？

• 引用下官网的介绍
• 效果预览
  是不是很爽？

三、配置

它支持市面上的主流编辑器： 这里，我主要说一说 VS Code配置方式

VS Code

很简单，三步即可！

graph TD
安装Prettier插件 --> 设置VSCode保存格式化规则
设置VSCode保存格式化规则 --> Package.JSON配置规则

安装Prettier插件

搜索安装即可

配置保存格式化

打开 VS Code 的设置界面
Mac：CMD + ,
Windows：Ctrl + ,

Package.json配置规则

为什么要在这里进行配置呢？为了便于多人GIT协作时候，保持规则一致！ 增加如下规则：

  "prettier": {
    "singleQuote": false,
    "semi": true,
    "tabWidth": 2,
    "useTabs": false,
    "trailingComma": "none",
    "bracketSpacing": true,
    "arrowParens": "avoid",
    "jsxBracketSameLine": false,
    "proseWrap": "preserve",
    "printWidth": 80
  }

参考

Prettier官网
Prettier深入理解