解锁团队协作新境界: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,高血压也好了~

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

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

相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站