Prettier yuku 插件完全指南使用 yuku-parser 格式化 JavaScript 与 TypeScript 代码【免费下载链接】prettierPrettier is an opinionated code formatter.项目地址: https://gitcode.com/gh_mirrors/pr/prettierprettier/plugin-yuku是 Prettier 官方仓库中提供的一个实验性插件包它让 Prettier 可以借助 Rust 编写的 yuku 解析器来解析并格式化 JavaScript / TypeScript 代码。本指南将带你完成该插件的安装与两种配置方式全局启用与按文件类型定向启用并结合仓库源码剖析其 parser 命名、AST 格式与解析回退机制让你在项目中能独立、稳妥地接入这套格式化方案。插件是什么从 plugin-yuku 的包描述 可以看到该包名为prettier/plugin-yuku当前仓库内版本为 0.0.2类型为 ESMtype: module并声明了sideEffects: false说明它不携带副作用可以安全地被打包器摇树优化。它的核心作用只有一个为 Prettier 注册yuku 解析器。yuku 是一个独立的 JavaScript / TypeScript 解析器yuku-parserRust 实现该插件将其接入 Prettier 的插件体系从而让 Prettier 能够用 yuku 生成的 AST 来排版代码。从插件入口 packages/plugin-yuku/index.js 可以看到它导出了四部分内容parsers注册yuku与yuku-ts两个解析器并将它们的 AST 格式astFormat统一改写为estree-yukuprinters将estree-yuku格式的 AST 交给 Prettier 内置的 estree 打印器estree printer完成输出options直接复用 src/language-js/options.js 中 JavaScript 语言的整套格式化选项languages语言声明信息见下文“语言映射”一节。简言之yuku 插件 yuku 解析器 estree 打印器它把“解析”这一步替换成了 yuku而“打印”仍然复用 Prettier 最成熟的 estree 管线。安装插件在项目中使用 yarn 安装建议配合--exact锁定精确版本避免解析器与打印器之间的行为漂移yarn add --dev --exact prettier prettier/plugin-yuku版本要求该插件要求prettier 3.6.0README 中有明确标注。在 3.6.0 之前的 Prettier 版本上加载此插件可能导致插件 API 不兼容而无法正常工作。如果你使用 npm 或 pnpm也可以等价地安装npm install --save-dev --save-exact prettier prettier/plugin-yuku基础用法全局启用插件创建或修改你的 Prettier 配置文件如prettier.config.mjs将插件加入plugins数组即可。此时 yuku 会作为内置的 babel / typescript 解析器的替代实现参与格式化// prettier.config.mjs import * as prettierPluginYuku from prettier/plugin-yuku; /** * see https://prettier.io/docs/configuration * type {import(prettier).Config} */ const config { plugins: [prettierPluginYuku], }; export default config;启用后Prettier 在格式化.js、.jsx、.ts、.tsx等文件时会自动优先使用该插件注册的 yuku 解析器具体替换关系见下文“语言映射”。进阶用法按文件类型显式指定 parser如果希望精确控制哪些文件走 yuku 解析器而不是让插件接管所有 JS/TS 文件可以通过overrides显式指定// prettier.config.mjs import * as prettierPluginYuku from prettier/plugin-yuku; /** * see https://prettier.io/docs/configuration * type {import(prettier).Config} */ const config { overrides: [ { files: [**/*.{js,mjs,cjs,jsx}], options: { parser: yuku, plugins: [prettierPluginYuku], }, }, { files: [**/*.{ts,mts,cts,tsx}], options: { parser: yuku-ts, plugins: [prettierPluginYuku], }, }, ], }; export default config;这里两个 parser 的定位非常清晰parser 名称适用文件解析语言模式yuku.js/.mjs/.cjs/.jsxJS含 JSXyuku-ts.ts/.mts/.cts/.tsxTypeScript含 TSX / d.ts采用显式overrides的好处是可以将 yuku 解析器限定在指定扩展名范围内其余语言如 JSON、CSS、Markdown仍然交给各自的默认 parser互不干扰。解析器内部实现yuku 与 yuku-ts插件注册的两个 parser 实际来自 Prettier 源码中的 src/language-js/parse/yuku.js。该文件是yuku-parser在 Prettier 内部的适配层值得关注的细节包括JS 解析yuku调用yukuParse(text, { ... })时强制使用lang: jsx模式并会根据文件路径推断sourceTypemodule / script当无法确定 sourceType 时通过tryCombinationsSync依次尝试多种组合直到解析成功。TS 解析yuku-ts先根据文件路径与文本内容决定语言模式.d.ts文件固定用dts.tsx场景优先tsx其余情况用正则探测文本中是否包含 JSX 语法然后按[ts, tsx, dts]或[tsx, ts, dts]的顺序组合尝试解析见 getLanguageCombinations。解析选项parseWithOptions固定传入preserveParens: true保留括号、semanticErrors: false忽略语义错误、attachComments: false、tokens: false见 parseWithOptions随后将解析器产出的diagnostics转换为 Prettier 风格的行列号错误信息。注释处理解析完成后把comments挂到 AST 的program节点上再交给postprocess做后续归一化postprocess使其符合 Prettier estree 管线的预期。元数据parser 通过 createParser 统一补齐hasPragma、hasIgnorePragma、locStart、locEnd等字段保证/** format */pragma 与// prettier-ignore注释的行为与内置解析器一致。AST 格式与打印estree-yuku插件入口 packages/plugin-yuku/index.js 中定义了const AST_FORMAT estree-yuku;它将两个 parser 的astFormat统一改写为estree-yuku随后在printers中把该格式映射到 estree 打印器export const printers { [AST_FORMAT]: estreePrinter, };这意味着 yuku 解析出的 AST 只负责“读懂代码”最终输出排版仍然由 Prettier 经过长期打磨的 estree 打印器 完成。因此格式化风格缩进、引号、分号等与使用 babel / typescript 解析器时保持高度一致差异主要体现在解析行为本身。语言映射内置 JS 语言的替换插件导出的 languages.evaluate.js 对 Prettier 内置的 JavaScript 语言声明做了替换将原本挂在 babel / typescript 解析器上的语言条目改写为 yuku / yuku-tsconst replacements new Map([ [babel, yuku], [typescript, yuku-ts], ]);即凡是由 babel 解析的 JS 语言声明改用yuku由 typescript 解析的改用yuku-ts解析器列表为空的语言条目则被过滤掉。这也是“全局启用插件即可自动接管 JS/TS 文件”的原理所在。另外从 development-plugins.js 可以看出yuku与yuku-ts同时被列入 Prettier 内置的开发插件 parser 白名单中说明该解析器在仓库内部与 oxc、hermes 等解析器一样被作为可供切换的备选解析方案维护。适用范围与注意事项仅覆盖 JavaScript 系语言该插件只注册 JS / TS 相关的 parserJSON、CSS、HTML、Markdown、YAML 等语言不受影响仍走各自的默认 parser。Prettier 版本门槛需要prettier 3.6.0请先升级 Prettier 再引入插件。ESM 包插件是纯 ESM 模块type: module在 CommonJS 项目中需要用动态import()或prettier.config.mjs这类 ESM 配置文件来加载。解析器行为差异yuku 是 Rust 实现的解析器与 babel / typescript 在个别语法边界情况下的容错行为可能不同若遇到解析差异可通过overrides将特定文件退回默认 parser。实验性质该包版本号仍为 0.0.x属于早期阶段接入生产项目前建议先在目标代码库上做一轮格式差异验证。小结prettier/plugin-yuku提供了一条“以 yuku 解析、以 estree 打印”的轻量接入路径安装一条命令、配置两个 parseryuku/yuku-ts即可让 Prettier 使用 Rust 实现的解析器格式化 JS 与 TS 代码。理解其 AST 格式estree-yuku、语言映射与版本约束后你就能在项目中灵活选择全局启用或按文件类型定向启用并在必要时安全回退到默认解析器。【免费下载链接】prettierPrettier is an opinionated code formatter.项目地址: https://gitcode.com/gh_mirrors/pr/prettier创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考