AICon上海|与字节、阿里、腾讯等企业共同探索Agent 时代的落地应用 了解详情
写点什么

用 Prettier 格式化 JavaScript 代码

  • 2018-02-28
  • 本文字数:1944 字

    阅读完需:约 6 分钟

假如你有过编程经验的话,你应该很清楚,很难做到既让代码简洁明了,又使不同的代码书写风格在一个项目中保持一致性。即便你花了很多时间达到了这个目的,其它的开发者也会提交他们的修改或者禁用某些标志以方便他们快速提交代码,从而让你的努力功亏一篑。

在格式化代码上浪费时间是一件很枯燥的事情,Prettier 的目标便是解决这个问题。它将用简单的设置来帮助你克服格式化带来的困扰。

Prettier 可以做什么?

Prettier 是一个很有特色的代码格式化工具,它可以使整个代码库的格式化过程自动化。因此在设置好 Prettier 之后,你不再需要与同事讨论代码格式化规则、分号、换行符等问题了。它会导入你所有代码,删除所有格式,并根据其样式规则重新格式化代码。

在 Prettier 环境下,所有的 javascript 代码都会转换为抽象语法树,然后被重新格式化。因此,它确保不会对编写的代码进行任何破坏更改。对你来说,所有的东西都会被神奇地格式化,这你并不用担心。

例如:

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());会被被格式化为

复制代码
foo(
reallyLongArg(),
omgSoManyParameters(),
IShouldRefactorThis(),
isThereSeriouslyAnotherOne()
);

如果你想让体验一下,可以使用 playground 来试试。总结一下:

与ESLint 的差异

这是最常见的问题之一,简明的回答是ESLint 只是一个代码质量工具(确保没有未使用的变量、没有全局变量,等等)。而Prettier 只关心格式化文件(最大长度、混合标签和空格、引用样式等)。你可以将ESLint 和Prettier 结合起来使用,以获得双赢的组合。

Editorconfig 的作用

Prettier 1.9 版本之前会从 editorconfig 中读取配置值,推荐的配置选项包括:indent_style、indent_size/tab_width 和 max_line_length。

如何设置

如上所述,Prettier 的自动化程序会将整个代码库格式化。以下是你可以使用 Prettier 的场景:

  • 编辑器插件
  • CLI
  • Pre-commit hooks

在编辑器中使用

进入网站的交互页面并下载相应的插件,在你的IDE/ 编辑器中安装它。这应该是一个非常简单的过程。对于Visual Studio Code,你只需要从市场下载便可。之后,在用户设置中添加了一个首选项(“editor.formatOnSave”: true)。这样便可以起效了。我还根据我的需要设置了"prettier.singleQuote": true,其它的编辑器属性也可以在这里设置。

在项目中使用

你需要先安装Prettier 的CLI。我们将把它添加为dev 依赖项, (yarn add prettier --dev --exact or npm install --save-dev --save-exact prettier)。Prettier 推荐在项目中安装恰当的版本,因为Prettier 会在补丁发布时引入代码格式的变化。安装成功后,要针对某个特定文件运行的话,只需要运行命令yarn prettier --write index.js,这样便可在当前目录生成index.js 文件。

你可以根据需要配置Prettier 的其他选项,通常使用配置文件来做。也可以将这些添加到.prettierrc 文件中并放置在项目的根文件夹下。可用选项可以在网站上找到。

然后,你可以将这个命令添加到你的NPM 脚本中,并将src 文件夹作为一个glob 传递给它,而不是一个单独的文件。格式化脚本是这样的:prettier --write ‘./src/**/*.{ts,js,css,json}’。

如果你没有使用这种复杂的配置,也没用.prettierrc 文件,你也可以使用命令行参数指定选项配置。

然后你可以将其作为构建步骤的一部分进行调用。所有的改变也都会生效的。

在项目中,你可以更进一步将Prettier 代码整合为一个pre-commit hook。你需要安装husky 来配合lint-stage /pretty-quick 使用(如果你正在使用其他工具,比如ESLint,请使用lint-stage)。从NPM 安装这些包作为dev 依赖项之后,你可以将以下配置添加到package.json 文件中:

pretty-quick:

复制代码
"scripts": {
"precommit": "pretty-quick --staged”
}

lint-staged:

复制代码
"scripts": {
"precommit": "lint-staged",
"lint-staged": {
"*.{ts,js,css,json}": [
"prettier --write",
"git add"
]
}
}

要注意的是,当你将 prettier 作为一个 pre-commit hook 运行时,它会破坏你项目的状态。一个解决方案 ( gocarsno 在 Reddit 上建议的) 是在提交之前存储所有尚未载入的变更 (git stash -k)。

你可以更进一步在项目的构建步骤中添加另一个检查。Facebook 是这样做的,我是在一个员工会议演讲中知道这件事的。你可以在文件上的 CI/CD 服务器上运行 Prettier,如果 Prettier 的文件输出与签入的文件不同,那么服务器编译就会失败。你可以选择这样做,这取决于你依赖它的程度。

你还在等什么? 赶紧去配置使用 Prettier 吧!别再人工格式化项目代码了,让机器为你做这事。

分享这篇文章,我也是为了让更多的人发现 Prettier 的魅力。

英文原文链接 Using Prettier to format your JavaScript code

2018-02-28 17:06107932

评论

发布
暂无评论
发现更多内容

async/await 优雅永不过时

CRMEB

行业分析| 大势所趋:元宇宙

anyRTC开发者

音视频 视频通话 虚拟现实 元宇宙

API 编排的应用及痛点

全象云低代码

微服务 低代码 api 网关 API 编排

Flink CDC 2.1 正式发布,XTransfer技术专家贡献MongoDB CDC 连接器

XTransfer技术

大数据 实时计算

硬科技起飞,这家成立仅三年的AI研究院已颇具国际风范

硬科技星球

JS柯里化和反柯里化

Jeannette

Javascript的内存管理

Jeannette

TDengine在理想汽车物联网业务场景的落地实践

TDengine

tdengine 时序数据库

数据分析从零开始实战,Pandas读写CSV数据

老表

Python 数据分析 pandas 11月日更

XTransfer 1号技术员工卡乐:从普通程序猿到技术专家

XTransfer技术

金融科技 支付 经验分享 创业公司

尝试 Promise A+

Jeannette

跨端分布式计算技术初探|HDC2021技术分论坛

HarmonyOS开发者

HarmonyOS

Python代码阅读(第63篇):数字奇偶性

Felix

Python 编程 Code 阅读代码 Python初学者

元宇宙最缺的是内容,而云计算能帮上忙

百度开发者中心

云计算 元宇宙

TypeScript 之 Indexed Access Types

冴羽

JavaScript typescript html5 大前端 ES6

广发证券携手HarmonyOS打造智慧金融服务|HDC2021技术分论坛

HarmonyOS开发者

HarmonyOS

HarmonyOS低代码开发介绍|HDC2021技术分论坛

HarmonyOS开发者

HarmonyOS

回顾“低代码”历史发展,是技术进步了还是倒退了?

优秀

低代码

架构实战营 模块五

felix

#架构实战营

【Pandas学习笔记01】强大的分析结构化数据的工具集

恒生LIGHT云社区

Python 大数据 数据分析 pandas

CSS布局(五)之圣杯布局和双飞翼布局

Augus

CSS 11月日更

JS函数的this

Jeannette

应急响应入门之Linux分析排查

网络安全学海

网络安全 信息安全 渗透测试 WEB安全 安全漏洞

两个小时手写了个Zookeeper分布式服务注册中心

热爱java的分享家

Java 面试 程序人生 编程语言 经验分享

阿里蚂蚁花呗团队面试题:spring+分布式+jvm+session+redis

热爱java的分享家

Java 面试 程序人生 编程语言 经验分享

Python Qt GUI设计:QSlider滑动条类(基础篇—16)

不脱发的程序猿

Python PyQt GUI设计 Qt Designer QSlider滑动条类

百度与赛诺菲签订许可协议,开启新一代mRNA药物和疫苗研发

百度大脑

人工智能 百度

闭包与内存泄露

Jeannette

回顾我两个月面试阿里,携程,小红书,美团,网易等等(Java岗)

热爱java的分享家

Java 架构 面试 程序人生 经验分享

编写Java程序启动脚本最佳实践

WindFlying

Flink Forward Asia 2021 延期,线上相见

Apache Flink

大数据 flink 编程 后端 实时计算

用Prettier格式化JavaScript代码_JavaScript_Saransh Kataria_InfoQ精选文章