从零到一：花了一天我写了这样一个 Prettier 插件的实战指南

作者：宇宙中心我曹县2025.10.10 19:52浏览量：0

简介：本文记录作者如何在一天内从零开始开发一个 Prettier 插件，详细解析插件设计、核心实现与调试优化过程，为开发者提供可复用的技术路径与实战经验。

引言：为何选择一天开发 Prettier 插件？

Prettier 作为前端代码格式化工具的标杆，其插件生态为开发者提供了高度定制化的能力。然而，现有插件可能无法完全满足特定团队的代码风格需求（如自定义模板字符串缩进、特定注释格式等）。基于这一痛点，笔者决定用一天时间快速开发一个 Prettier 插件，验证技术可行性并探索高效开发模式。本文将围绕插件设计、核心实现、调试优化三个阶段展开，为开发者提供从零到一的完整路径。

一、插件设计：明确目标与边界

1.1 需求分析与场景定义

开发插件前需明确核心目标。例如，笔者团队需要支持以下场景：

  • 模板字符串缩进：在 JSX/TSX 中保持多行模板字符串的缩进一致性；
  • 注释格式标准化：强制注释以 // 开头且后跟空格；
  • 自定义排序规则：对对象属性按字母顺序排序。

通过定义具体场景，可避免功能泛化导致的开发周期延长。

1.2 技术可行性评估

Prettier 插件基于 AST（抽象语法树）操作，需熟悉以下技术点：

  • Parser 选择：Prettier 支持多种解析器（如 babel、typescript、vue），需根据目标语言选择；
  • Printer 扩展：通过覆盖默认的 print 方法实现自定义格式化逻辑；
  • 选项配置：通过 prettier.plugin.json 定义插件支持的配置项。

评估后确认，一天内可完成核心功能开发，但需牺牲部分边缘场景支持。

二、核心实现：从环境搭建到代码编写

2.1 开发环境准备

  1. 初始化项目：
    1. mkdir prettier-plugin-custom && cd prettier-plugin-custom
    2. npm init -y
    3. npm install prettier @babel/parser @babel/types --save-dev
  2. 项目结构：
    1. /src
    2.   index.js       # 插件入口
    3.   printer.js     # 自定义打印逻辑
    4. /tests
    5.   demo.js        # 测试用例
    6. prettier.plugin.json  # 插件配置

2.2 插件入口实现

在 src/index.js 中定义插件元信息与扩展点：

  1. module.exports = {
  2.   languages: [{ name: "javascript", parsers: ["custom-parser"] }],
  3.   parsers: {
  4.     "custom-parser": require("./parser"), // 可复用现有解析器
  5.   },
  6.   printers: {
  7.     "custom-parser": require("./printer"), // 自定义打印逻辑
  8.   },
  9.   options: {
  10.     customTemplateIndent: {
  11.       type: "boolean",
  12.       default: false,
  13.       description: "Enable custom template string indentation",
  14.     },
  15.   },
  16. };

2.3 核心打印逻辑实现

以模板字符串缩进为例，在 src/printer.js 中覆盖默认行为：

  1. const { print } = require("prettier").printer;
  3. module.exports = {
  4.   print(path, options, print) {
  5.     const node = path.getValue();
  6.     if (node.type === "TemplateLiteral" && options.customTemplateIndent) {
  7.       // 自定义缩进逻辑：每行增加2个空格
  8.       const quasis = node.quasis.map((q) => {
  9.         const cooked = q.value.cooked.replace(/\n/g, "\n  ");
  10.         return { ...q, value: { cooked } };
  11.       });
  12.       return { ...node, quasis };
  13.     }
  14.     return print(path); // 默认行为
  15.   },
  16. };

2.4 配置文件定义

在 prettier.plugin.json 中声明插件选项：

  1. {
  2.   "name": "prettier-plugin-custom",
  3.   "version": "0.1.0",
  4.   "options": {
  5.     "customTemplateIndent": {
  6.       "type": "boolean",
  7.       "default": false
  8.     }
  9.   }
  10. }

三、调试与优化：快速迭代验证

3.1 本地测试

  1. 创建测试用例：
    1. // tests/demo.js
    2. const str = `
    3.   Line 1
    4.   Line 2
    5. `;
  2. 通过 npm link 本地调试：
    1. cd prettier-plugin-custom
    2. npm link
    3. cd ../test-project
    4. npm link prettier-plugin-custom
    5. npx prettier --write tests/demo.js --plugin prettier-plugin-custom

3.2 性能优化

  • AST 遍历优化：避免深度遍历无关节点，使用 path.each 限制范围；
  • 缓存机制：对重复计算的缩进结果进行缓存；
  • 错误边界：通过 try-catch 捕获解析异常，避免插件崩溃。

3.3 发布准备

  1. 文档编写：在 README.md 中明确插件功能、配置项与使用示例；
  2. 版本管理：遵循 SemVer 规范，初始版本设为 0.1.0；
  3. 发布到 npm：
    1. npm publish --access public

四、实战经验总结

4.1 高效开发的关键点

  • 最小可行产品（MVP）思维：优先实现核心功能，避免过度设计；
  • 复用现有生态：直接使用 Prettier 的解析器而非自行实现；
  • 快速验证：通过本地链接与简单用例快速迭代。

4.2 常见问题与解决方案

  • 问题1：插件与 Prettier 版本冲突。
    解决：在 peerDependencies 中明确 Prettier 版本范围。
  • 问题2：自定义规则影响其他格式化逻辑。
    解决：通过 path.getNode() 判断节点类型，精准覆盖。

4.3 扩展建议

  • 支持更多语言：通过扩展 languages 字段支持 TypeScript、Vue 等；
  • 动态配置：从外部文件读取配置而非硬编码；
  • CI 集成：在项目中通过 prettier.config.js 动态加载插件。

结语：一天开发的启示

通过一天的高强度开发，笔者验证了 Prettier 插件开发的可行性，并总结出以下经验：

  1. 技术选型：优先使用现有解析器与工具链，降低开发成本；
  2. 目标聚焦：明确核心场景，避免功能蔓延；
  3. 快速反馈：通过本地测试与日志输出快速定位问题。

对于开发者而言，此类轻量级插件开发不仅是技术实践，更是对代码格式化底层逻辑的深入理解。未来可进一步探索插件性能优化、多语言支持等方向，为团队提供更灵活的代码风格管理方案。

最热文章