使用 @prettier/plugin-hermes 为 Prettier 接入 Hermes 解析器

使用 prettier/plugin-hermes 为 Prettier 接入 Hermes 解析器【免费下载链接】prettierPrettier is an opinionated code formatter.项目地址: https://gitcode.com/gh_mirrors/pr/prettier本篇技术指南围绕 Prettier 官方仓库中的prettier/plugin-hermes插件包展开介绍如何通过该插件让 Prettier 使用 Facebook Hermes 引擎的 JavaScript/Flow 解析器来格式化代码。读完本文你将掌握该插件的安装方式、配置方法全局启用或按文件类型覆盖启用、插件内部架构与解析流程以及它在 Flow 类型代码格式化场景下的价值与适用边界。插件是什么prettier/plugin-hermes是 Prettier 官方仓库 packages/plugin-hermes 中维护的一个独立插件包其 README 中的定位一句话即可概括Prettier 的 Hermes 插件。Hermes 是 FacebookMeta为移动端 JavaScript 应用设计并开源的 JavaScript 引擎它以快速启动、低内存占用著称。Hermes 项目内附带的hermes-parser解析器基于 Flow 语法实现能够解析标准 JavaScript 以及 Flow 类型注解。prettier/plugin-hermes的意义在于把这一引擎级解析器接入 Prettier 的插件体系让 Prettier 可以借助 Hermes 的语法能力完成解析再由 Prettier 既有的 ESTree 打印器输出格式化结果。从源码结构看该插件本体非常轻量index.js 只做了三件事——复用语言-js 模块中现成的 Hermes 解析器、把 AST 格式标记为estree-hermes、再挂接语言-js 的 ESTree 打印器。它并不重复实现一套格式化逻辑而是将解析与打印两个环节分别交给 Hermes 解析器和 Prettier 主打印器。安装插件要求Prettier 版本 3.6.0见 packages/plugin-hermes/README.md 中的声明同时需要 Node.js 环境支持 ESM。按照 README 给出的命令使用 yarn 安装yarn add --dev --exact prettier prettier/plugin-hermes这里有两个值得注意的细节使用--devPrettier 与格式化插件都属于开发期依赖不应进入生产依赖使用--exact格式化结果对工具版本敏感锁定精确版本可以避免依赖升级导致格式化输出发生变化。如果使用 npm可等价写成npm install --save-dev --save-exact prettier prettier/plugin-hermes插件包的 package.json 声明了type: module并通过exports字段暴露入口构建产物为index.mjs因此它只能以 ESM 方式被加载。从sideEffects: false也可以看出该包设计为纯函数式插件可安全参与打包摇树。配置插件全局启用插件创建或修改你的 Prettier 配置文件如prettier.config.mjs在plugins数组中注册插件即可这是 README 给出的最简用法// prettier.config.mjs import * as prettierPluginHermes from prettier/plugin-hermes; /** type {import(prettier).Config} */ const config { plugins: [prettierPluginHermes], }; export default config;全局注册后插件提供的hermes解析器对所有被 Prettier 识别的 JavaScript 文件都可用。但需要注意注册插件只是让解析器可用Prettier 仍会按文件的扩展名与语言推断结果选择解析器。从 src/language-js/languages.evaluate.js 可以看到JavaScript 语言默认绑定的解析器列表为babel、acorn、espree、meriyah、babel-flow、babel-ts、flow、typescript等并不包含hermes。因此在全局注册的场景下若要真正让文件走 Hermes 解析通常还需要通过overrides显式指定解析器。按文件类型覆盖启用README 同时给出了显式配置的推荐写法用overrides把特定文件类型的解析器指定为hermes并在这些文件上注册插件// prettier.config.mjs import * as prettierPluginHermes from prettier/plugin-hermes; /** * see https://prettier.io/docs/configuration * type {import(prettier).Config} */ const config { overrides: [ { files: [**/*.{js.flow,js,mjs,cjs}], options: { parser: hermes, plugins: [prettierPluginHermes], }, }, ], }; export default config;该示例覆盖了三类典型文件*.js.flowFlow 类型的库定义文件.js.flow 后缀。这正是 Hermes 解析器最契合的场景——hermes-parser本身就是 Flow 语法的解析实现*.js/*.mjs/*.cjs常规 JavaScript 文件分别对应 CommonJS、ESM 与脚本场景。在overrides的options中同时声明parser和plugins是一种自包含的做法即使未来调整了顶层plugins配置这些文件的解析行为也不会受影响。单独指定解析器运行除了配置文件也可以在命令行中直接指定解析器运行例如prettier --plugin prettier/plugin-hermes --parser hermes --write src/**/*.js这种方式适合临时验证插件行为不污染项目级配置。插件内部是如何工作的解析器与打印器的组合packages/plugin-hermes/index.js 是插件的核心注册逻辑全文仅 17 行import * as hermesParsers from ../../src/language-js/parse/hermes.js; import { estree as estreePrinter } from ../../src/language-js/printers.js; const AST_FORMAT estree-hermes; export const parsers Object.fromEntries( Object.entries(hermesParsers).map(([name, parser]) [ name, { ...parser, astFormat: AST_FORMAT }, ]), ); export const printers { [AST_FORMAT]: estreePrinter, }; export { default as options } from ../../src/language-js/options.js; export { default as languages } from ./languages.evaluate.js;它揭示了插件运行的完整链路解析器来源parsers直接复用主仓库 src/language-js/parse/hermes.js 中导出的hermes解析器AST 格式桥接将解析器的astFormat覆盖为自定义的estree-hermes同时把语言-js 的estree打印器注册到该格式名下。Prettier 的插件机制按astFormat匹配打印器因此Hermes 解析出的 AST → ESTree 打印器这一组合得以成立选项与语言元数据options直接复用 src/language-js/options.js即 JavaScript 的通用格式化选项如semi、singleQuote、trailingComma等languages则由 languages.evaluate.js 派生而来。需要说明的是src/language-js/parse/hermes.js中导出的hermes解析器是 Prettier 内建能力的一部分src/language-js/parse/index.js 第 6 行即export * from ./hermes.js。也就是说Prettier 本身已具备hermes解析器插件包的价值在于把它独立成可单独安装、按需启用的插件形态便于不想使用内建 Flow/Babel 解析器的用户切换。Hermes 解析器的解析选项在 src/language-js/parse/hermes.js 中可以看到调用hermes-parser时的解析配置const parseOptions { flow: all, babel: false, // enableExperimentalComponentSyntax: true, // Enable by default // enableExperimentalFlowMatchSyntax: true, // Enable by default tokens: false, allowReturnOutsideFunction: true, };各选项的含义如下flow: all完整启用 Flow 语法支持允许在.js.flow等文件中解析类型注解babel: false关闭 Babel 兼容解析模式纯粹以 Flow/Hermes 语义解析tokens: false不收集词法 token降低解析开销Prettier 打印阶段不需要 token 流allowReturnOutsideFunction: true允许在函数外出现return这在格式化某些脚本片段如 REPL 输入、被包裹的代码段时是必要的宽松项两条被注释的enableExperimental*选项相关实验语法在hermes-parser中默认已启用因此无需显式打开。解析出错时createParseError 会把 Hermes 的错误信息与行列位置转换为 Prettier 标准的解析错误格式message (line:column)从而保证 CLI 与编辑器集成中的报错体验一致。后处理与打印解析完成后AST 会经过 src/language-js/parse/postprocess/index.js 的postprocess处理其中针对hermes的astType有专门分支TemplateElement的 range 按 espree 风格重算即不含定界符的原始内容区间保证与 Prettier 的 ESTree 打印逻辑对齐ImportDeclaration节点上的assertions会被重命名为attributes以统一 import attributes 的 AST 形态同时会统一处理 hashbang、注释归并、括号表达式的保留等通用任务。打印阶段则由 src/language-js/printers.js 导出的estree打印器完成它包含完整的 ESTree 打印实现、注释处理handleComments/printComment、pragma 插入insertPragma以及prettier/ignore支持。因此使用该插件得到的格式化风格与 Prettier 默认的 JavaScript 输出完全一致只是语法解析这一环节换成了 Hermes 引擎。语言元数据与解析器映射插件自带的 languages.evaluate.js 从内建 JavaScript 语言定义派生元数据const replacements new Map([[flow, hermes]]);它的逻辑是遍历 src/language-js/languages.evaluate.js 定义的语言把每个语言绑定的解析器列表中的flow替换为hermes。结果是名为Flow的语言扩展名为.js.flow见 src/language-js/languages.evaluate.js 第 40-47 行的定义其解析器变为hermes名为JavaScript的语言含.js、.mjs、.cjs、.wxs等扩展名同样会获得hermes解析器因为它原本就包含flow解析器条目。这也是为什么 README 示例中*.js.flow、*.js、*.mjs、*.cjs都适合搭配parser: hermes这些扩展名对应的语言定义里都含有会被替换为hermes的flow条目。使用场景与边界适合的使用场景Flow 类型代码格式化如果你的项目使用 Flow 进行静态类型检查尤其是存在大量.js.flow声明文件Hermes 解析器Flow 语法原生实现是一个值得尝试的解析后端可与 Prettier 内建的flow解析器对照使用统一解析引擎偏好团队若希望格式化所用解析器与运行时引擎Hermes常见于 React Native 场景保持一致减少解析行为差异验证 Hermes 兼容性在 React Native / Hermes 目标环境中用 Hermes 解析器做格式检查可提前暴露不兼容的语法写法。需要注意的边界插件要求 Prettier 3.6.0请先升级主包再安装插件插件包是 ESM-onlytype: moduleCommonJS 项目的配置文件需使用.mjs扩展名或采用动态 import 方式加载建议搭配overrides显式指定parser: hermes否则仅注册插件并不会自动改变默认解析器的选择该插件的打印能力完全复用 ESTree 打印器不提供任何自定义打印行为期望不同解析器、不同输出的场景不适用。小结prettier/plugin-hermes是 Prettier 官方维护、体量极小但链路完整的插件安装后通过 prettier.config.mjs 的plugins注册配合overrides把目标文件.js.flow、.js、.mjs、.cjs的解析器指定为hermes即可让 Prettier 借助 Hermes 引擎解析 JavaScript 与 Flow 代码并复用成熟的 ESTree 打印器完成格式化。其核心实现位于 packages/plugin-hermes/index.js底层解析器与后处理逻辑可分别在 src/language-js/parse/hermes.js 与 src/language-js/parse/postprocess/index.js 中深入阅读。对于希望在 Prettier 与 Hermes/Flow 生态之间建立一致解析行为的团队这是一个低成本、易验证的接入方案。【免费下载链接】prettierPrettier is an opinionated code formatter.项目地址: https://gitcode.com/gh_mirrors/pr/prettier创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考