解锁团队协作新境界：Prettier 配置大揭秘！从代码规范到冲突解决，告别烦恼！

Hello大家好，我是日拱一卒的不浪，坚持从工作和生活中不断学习，提炼，沉淀，最终建立自己的强势领域！这是2024年输出的第4/100篇文章，欢迎志同道合的朋友一起学习交流；
公众号：攻城师不浪

wx：brown_7778

今天这篇文章不是讲prettier都有什么功能，相信有经验的工程师也都知道，不知道的就先去查下~；

我要分享的是，最近我发现，用这个prettier美化代码之后，在合并代码后，会跟团队其他同事的代码造成大量的冲突，而原因就是我俩的代码格式化不一致造成，我的血压瞬间就飙上来了。

那么问题来了：多人协作，明明配置了prettier，但是还是会造成代码风格不一致，什么原因？

究其原因，代码格式化不止与项目里的.prettierrc配置有关，还跟以下这些原因有关，请一一排查。

安装prettier包

保证项目里已经安装了prettier的包；

js 复制代码

npm i -D prettier

安装prettier插件

代码编辑器需要安装对应的prettier的插件，如vscode的插件：prettier-code formatter；

prettier配置文件

在项目根目录下配置了.prettierc文件（顺便简单配一下规范）

js 复制代码

{
  "tabWidth": 2, // tab键是2个宽度
  "useTabs": false,
  "singleQuote": true, // 是否采用单引号
  "semi": true, // 是否代码尾端添加分号
  "trailingComma": "none",
  "bracketSpacing": true
}

修改编辑器的配置文件

配置编辑器的配置文件，如vscode的setting.json，注意：只配置editor.defaultFormatter这一个选项即可，其他所有的defaultFormatter配置项全注释掉！不然会冲突；

js 复制代码

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true, // 开启 "保存自动格式化"

修改编辑器配置

另外，vscode编辑器会有自己的prettier的默认配置，如下图，这里的配置最好跟.prettierc里的一致，否则会按照后者的配置来，也就是说如果你配置了.prettierc文件，就无需管vscode的配置了，但是要把Prettier: Config Path的配置清空，这样会自动寻找项目根目录下的.prettierc文件

检查项目是否有单独的setting.json

这一点非常重要，检查你的项目里是否有.vscode文件夹，文件夹里是否也有setting.json这个文件，如果有，它会覆盖掉你在编辑器的setting.json文件配置！

批量美化代码

以上，都配置完成之后，如果你想立刻把项目里所有乱遭的代码都按照你配置的规则就行美化，执行以下命令

js 复制代码

// 这是把src文件夹下所有的代码都格式化一遍
npx prettier --write src/

总结

让你的同事按步骤依次执行以上操作，这样，以后就不会再担心合并代码会有大量的代码格式化的冲突了！tmd，高血压也好了~

如果觉得文章对你有帮助，欢迎点赞关注以及收藏，这也是支持我持续原创下去的动力~

点击关注不迷路，持续升级打怪👇👇👇