🚀🚀🚀 Prettier 3.6.0 正式发布,支持 OXC⚓️、Hermes !更快的体验⚡️

前言

Prettier 3.6.0 正式发布!这次更新带来了实验性的快速 CLI 和全新的 OXC、Hermes 插件,简直是前端开发者的福音!下面就带大家深入了解这次更新的亮点!

往期精彩推荐

正文

Prettier 3.6.0 新特性分享

Prettier 作为一个"固执"的代码格式化工具,以其一致性和零配置的特性深受开发者喜爱。这次的 3.6.0 版本在性能和插件生态上迈出了重要一步,重点推出了三个亮点:实验性快速 CLI、全新 OXC 插件和 Hermes 插件。让我们逐一拆解这些新特性,以及它们如何提升你的开发体验。

1. 实验性快速 CLI:性能飞跃

Prettier 的 CLI(命令行接口)一直是项目中不可或缺的工具,但在大规模代码库中,格式化速度有时会成为瓶颈。3.6.0 引入的实验性快速 CLI 针对性能进行了深度优化。这得益于 Fabio Spampinato 的工作,他在 CLI 性能优化上投入了大量精力。新 CLI 通过更高效的代码解析和处理逻辑,显著缩短了格式化时间,尤其在处理大型项目时效果明显。

使用方法:

bash 复制代码
npx prettier --experimental-cli .

或者通过环境变量:

bash 复制代码
PRETTIER_EXPERIMENTAL_CLI=1 npx prettier .

运行之后是这样的:

这个 --experimental-cli 标志目前是可选的,建议在非生产环境中测试。官方提到,这项优化将在未来的 4.0 版本中成为默认行为。如果你有上千个文件的项目,不妨试试看,可能会让你惊讶于它的速度!

2. 新插件:@prettier/plugin-oxc

OXC 是一个用 Rust 编写的快速 JavaScript 和 TypeScript 解析器,性能优异。Prettier 3.6.0 引入了基于 OXC 的新插件 @prettier/plugin-oxc,提供了 oxc(JavaScript 语法)和 oxc-ts(TypeScript 语法)两个解析器。这对于需要处理大量 JavaScript 或 TypeScript` 代码的项目来说,是一个巨大的性能提升。

安装:

bash 复制代码
yarn add --dev prettier @prettier/plugin-oxc

配置 : 在 .prettierrc 中添加:

json 复制代码
{
  "plugins": ["@prettier/plugin-oxc"]
}

由于插件体积较大,因此被分离为单独的包

使用场景 : 如果你在项目中使用 TypeScript,oxc-ts 解析器可以显著加快格式化速度。例如:

typescript 复制代码
// 输入
function greet(name: string) {
  return `Hello, ${name}!`;
}

格式化后:

typescript 复制代码
// 输出
function greet(name: string) {
  return `Hello, ${name}!`;
}

OXC 的 Rust 实现让解析过程更快,尤其适合大型 TypeScript 项目。

3. 新插件:@prettier/plugin-hermes

Hermes 是 Meta 开发的 JavaScript 引擎,广泛用于 React Native 等场景。Prettier 3.6.0 引入了基于 Hermes 的新插件 @prettier/plugin-hermes,提供了 hermes 解析器,专门用于 Flow 语法。这为使用 Flow 的开发者提供了更高效的格式化选项。

安装:

bash 复制代码
yarn add --dev prettier @prettier/plugin-hermes

配置 : 在 .prettierrc 中添加:

json 复制代码
{
  "plugins": ["@prettier/plugin-hermes"]
}

同样,由于插件体积较大,因此被分离为单独的包。官方计划在 Prettier v4 中,将 hermes 解析器设为 Flow 的默认解析器,并移除 babel-flow 解析器。

使用场景 : 对于 Flow 项目,hermes 解析器可以更高效地处理类型注解。例如:

javascript 复制代码
// @flow
function add(a: number, b: number): number {
  return a + b;
}

格式化后:

javascript 复制代码
// @flow
function add(a: number, b: number): number {
  return a + b;
}

Hermes 插件的引入为 Flow 用户提供了更现代化的解析方案。

最后

Prettier 3.6.0 的发布为开发者带来了性能提升和更丰富的插件生态。实验性快速 CLI 让格式化速度更快,而 OXC 和 Hermes 插件则提供了更高效的解析能力。无论你是小型项目的维护者,还是大型代码库的管理者,这些新特性都能帮助你更高效地管理代码格式。快去试试吧!

今天的分享就这些了,感谢大家的阅读!如果文章中存在错误的地方,欢迎指正!

往期精彩推荐

相关推荐
中文呀2 小时前
三维 GIS 离线缓存实战:逆向 CesiumOfflineCache,并亲手为它补上"自动更新"能力
前端
前进前进前进2 小时前
TRAE 全链路实战:做了一个警示牌一键生成器:纯 Canvas、单文件、零依赖
前端
小万7423 小时前
God‘s Eye View 深度解析:15 路公开信号 + CesiumJS 的浏览器级 OSINT 控制台,60 帧渲染的“真实间谍卫星模拟器”
前端
IT星宿4 小时前
浏览器标签页全是一个图标:我用名字哈希生成 favicon,让每个项目都有身份标识
前端
全栈项目管理程序猿4 小时前
ArcGIS JS 基础教程(32):体元系列 - VoxelSlice 体元切片
前端·javascript
结局无敌5 小时前
React Native for OpenHarmony 实战:三方库 react-native-modal-dialog 的鸿蒙化适配指南
深度学习·算法·react native·react.js·harmonyos
拖孩6 小时前
AI 帮我写的小程序「厨菜记」上线满月了,挣了两百块!!!
前端·后端·微信小程序
用户360055579006 小时前
Kestrel_VLLM - 13 · 为什么排除 MoE FFN Tiling 与 Tensor Core
前端
流烟默6 小时前
SSE 实战:在 SpringBoot + Vue 项目中零依赖实现轻量级实时消息推送
vue.js·spring boot·后端·sse
Hilaku6 小时前
AI 流式输出都用 SSE,什么时候必须换 WebSocket?
前端·javascript·程序员