项目架构：prettier 提交检测、全局||自动格式化代码

前言：

在项目开发团队中，想要统一大家的代码风格，并且不影响同事原来的编码习惯、所使用的的开发工具，此时就需要通过脚本命令或自动格式化进行处理了。

经历过的事件：某个领导整了个格式化规则文件，但非常愚蠢的要手下复制黏贴到自己的编辑器配置里面，造成了仅在vscode上使用，并且对不同类型项目也造成不便，还要每次保存文件要自己格式化，以及其他一系列的影响团队和谐的负面情绪！

本文所提供的以下方案：
1、每次保存文件后自动格式化；
2、每次提交代码前运行命令进行全局格式化；
3、每次提交代码时自动对提交的文件进行代码格式化；（最佳方案）

本文不介绍prettier格式化参数配置，避免文章过长且已经会的人看了也多余，默认当都会！

---

以上三个方案都需要先安装、配置如下内容

步骤1：

npm 安装 prettier； 编辑器安装 Prettier - Code formatter 插件；

步骤2：

项目根目录配置.prettierrc.json  .prettierignore 两个文件

---

方案1：每次保存文件后自动格式化

这是vscode的步骤，其他编辑器自行根据下面的方案处理。

1、打开编辑器设置页面，输入 files.autoSave 筛出设置项，并把设置项属性选择为 onFocuschange
  2、输入 editor.defaultFormatter ，将配置项选择为Prettier  （设置默认代码格式化（美化）的插件为Prettier）
  3、输入 editor.formatOnSave ，勾选上 "保存时格式化文件。格式化程序必须可用，xxxxxxxx....."

---

方案2：每次提交代码前运行命令进行全局格式化；

1、配置 package.json 下的 script 脚本命令

    "scripts": {
        .........
        "prettier": "prettier --write ."
    },

2、其他成员每次提交代码的时候，先执行 npm run prettier 即可！

（建议使用第一个方案，有同事不想用第一个方案的，或者他用的编辑器不适合第一个方案，那他就用这第二个方案）

---

方案3：每次提交代码时自动对提交的文件进行代码格式化；

1、npm install husky -D    npm install lint-staged -D

2、package的script下写入  "prepare": "husky install"

3、package.json 第一层级属性增加如下内容
"lint-staged": {
    "src/**/*.{js,jsx,vue,ts,tsx}": [
        "prettier --write"
    ]
}

4、npx husky install   npm run prepare

5、在 .husky 文件夹下第一层级创建 pre-commit 文件

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged

总结：

有了以上3个方案，就可以愉快且近乎0成本的统一同事的风格了，且几乎不会影响开发效率，这样同事也不会有怨言，也不怕同事之间使用不同的编辑器！

和谐！

高效！

统一！

早点下班！

不怕换人接手代码！

你还在担心什么？赶紧上吧！！