今天介绍的是一款代码格式化工具,特别适合团队协作开发的时候使用。
也许你已经在使用了,没错!它叫 prettier
,在 Github 上已达 45.5k Star,如果你还没听说过,看到这篇文章就很值了!
Prettier
是一个 “有主见” 的代码格式化工具,它几乎移除了编辑器本身所有的对代码的操作格式,然后重新显示,为的就是让所有使用用这套规则的人有完全相同的代码风格。
在团队协作开发的时候更是体现出它的优势,简而言之,这个工具能够使输出代码保持风格一致。
Prettier
支持JavaScript、TypeScript、HTML、JSX、Vue、JSON、Markdown等主流格式,同时也支持市面上主流的编辑器,如Atom、Sublime Text、VS Code、WebStorm等。
下面这行代码,它适合在同一行显示。
foo(arg1, arg2, arg3, arg4);
但是我们经常会遇到的代码是这样的:
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
于是,Prettier 会把这段代码转变成这样:
foo(
reallyLongArg(),
omgSoManyParameters(),
IShouldRefactorThis(),
isThereSeriouslyAnotherOne()
);
Prettier
可以在保存时在编辑器中运行,在预提交hook中或在 CI 环境中运行,以确保您的代码库具有一致的风格,开发人员无需再次在代码审查中检视出问题。
使用编辑器插件是最为方便的一种方式,一键即可格式化编写的代码,非常方便。
在上述的编辑器中都可以使用Prettier
的插件。
首先,在本地安装 Prettier:
npm install --save-dev --save-exact prettier
然后,创建一个空的配置文件,让编辑器和其他工具知道你正在使用prettier
echo {}> .prettierrc.json
接下来,创建一个 .prettierignore文件,让 Prettier CLI 和编辑器知道哪些文件不格式化。比如:
# Ignore artifacts:
build
coverage
然后你就可以使用以下命令对文件进行格式化了。
npx prettier --write .
如:prettier --write ./main.js
这里使用的是prettier默认的配置规则,着是不符合我们的需求的,我们需要自定义配置规则,具体可以参考官方文档~
Github官方地址:https://github.com/prettier/prettier
每个开发者可能都有自己的编码风格,而在一个项目或团队中拥有一个共同的编码风格指南无疑是很有价值的,我们不需要在花大量的时间和精力来格式化我们的代码。
技术上集成Prettier
没有任何难度,也易于让你的同事接受,如果还没有使用,不妨加入你的项目中试试?