前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >火了!这款代码格式化工具就是团队开发利器!

火了!这款代码格式化工具就是团队开发利器!

作者头像
程序员老鱼
发布2023-05-23 19:35:40
3190
发布2023-05-23 19:35:40
举报
文章被收录于专栏:前端实验室前端实验室

今天介绍的是一款代码格式化工具,特别适合团队协作开发的时候使用。

也许你已经在使用了,没错!它叫 prettier,在 Github 上已达 45.5k Star,如果你还没听说过,看到这篇文章就很值了!

代码格式化工具 - Prettier

Prettier 是一个 “有主见” 的代码格式化工具,它几乎移除了编辑器本身所有的对代码的操作格式,然后重新显示,为的就是让所有使用用这套规则的人有完全相同的代码风格。

在团队协作开发的时候更是体现出它的优势,简而言之,这个工具能够使输出代码保持风格一致。

Prettier支持JavaScript、TypeScript、HTML、JSX、Vue、JSON、Markdown等主流格式,同时也支持市面上主流的编辑器,如Atom、Sublime Text、VS Code、WebStorm等。

示例

下面这行代码,它适合在同一行显示。

代码语言:javascript
复制
foo(arg1, arg2, arg3, arg4);

但是我们经常会遇到的代码是这样的:

代码语言:javascript
复制
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

于是,Prettier 会把这段代码转变成这样:

代码语言:javascript
复制
foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

Prettier可以在保存时在编辑器中运行,在预提交hook中或在 CI 环境中运行,以确保您的代码库具有一致的风格,开发人员无需再次在代码审查中检视出问题。

如何使用

1.使用编辑器的插件

使用编辑器插件是最为方便的一种方式,一键即可格式化编写的代码,非常方便。

在上述的编辑器中都可以使用Prettier的插件。

2.使用脚本的方式

首先,在本地安装 Prettier:

代码语言:javascript
复制
npm install --save-dev --save-exact prettier

然后,创建一个空的配置文件,让编辑器和其他工具知道你正在使用prettier

代码语言:javascript
复制
echo {}> .prettierrc.json

接下来,创建一个 .prettierignore文件,让 Prettier CLI 和编辑器知道哪些文件不格式化。比如:

代码语言:javascript
复制
# Ignore artifacts:
build
coverage

然后你就可以使用以下命令对文件进行格式化了。

代码语言:javascript
复制
npx prettier --write .
如:prettier --write ./main.js

这里使用的是prettier默认的配置规则,着是不符合我们的需求的,我们需要自定义配置规则,具体可以参考官方文档~

Github官方地址:https://github.com/prettier/prettier

个人感受

每个开发者可能都有自己的编码风格,而在一个项目或团队中拥有一个共同的编码风格指南无疑是很有价值的,我们不需要在花大量的时间和精力来格式化我们的代码。

技术上集成Prettier没有任何难度,也易于让你的同事接受,如果还没有使用,不妨加入你的项目中试试?

本文参与?腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2023-05-09,如有侵权请联系?cloudcommunity@tencent.com 删除

本文分享自 前端实验室 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体分享计划? ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 代码格式化工具 - Prettier
    • 示例
      • 如何使用
        • 1.使用编辑器的插件
        • 2.使用脚本的方式
      • 个人感受
      相关产品与服务
      Prowork 团队协同
      ProWork 团队协同(以下简称 ProWork )是便捷高效的协同平台,为团队中的不同角色提供支持。团队成员可以通过日历、清单来规划每?的工作,同时管理者也可以通过统计报表随时掌握团队状况。ProWork 摒弃了僵化的流程,通过灵活轻量的任务管理体系,满足不同团队的实际情况,目前 ProWork 所有功能均可免费使用。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
      http://www.vxiaotou.com