从零到一：花了一天我写了这样一个 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. 初始化项目：

   mkdir prettier-plugin-custom && cd prettier-plugin-custom
   npm init -y
   npm install prettier @babel/parser @babel/types --save-dev

2. 项目结构：

   /src
     index.js       # 插件入口
     printer.js     # 自定义打印逻辑
   /tests
     demo.js        # 测试用例
   prettier.plugin.json  # 插件配置

2.2 插件入口实现

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

module.exports = {
  languages: [{ name: "javascript", parsers: ["custom-parser"] }],
  parsers: {
    "custom-parser": require("./parser"), // 可复用现有解析器
  },
  printers: {
    "custom-parser": require("./printer"), // 自定义打印逻辑
  },
  options: {
    customTemplateIndent: {
      type: "boolean",
      default: false,
      description: "Enable custom template string indentation",
    },
  },
};

2.3 核心打印逻辑实现

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

const { print } = require("prettier").printer;
module.exports = {
  print(path, options, print) {
    const node = path.getValue();
    if (node.type === "TemplateLiteral" && options.customTemplateIndent) {
      // 自定义缩进逻辑：每行增加2个空格
      const quasis = node.quasis.map((q) => {
        const cooked = q.value.cooked.replace(/\n/g, "\n  ");
        return { ...q, value: { cooked } };
      });
      return { ...node, quasis };
    }
    return print(path); // 默认行为
  },
};

2.4 配置文件定义

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

{
  "name": "prettier-plugin-custom",
  "version": "0.1.0",
  "options": {
    "customTemplateIndent": {
      "type": "boolean",
      "default": false
    }
  }
}

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

3.1 本地测试

1. 创建测试用例：

   // tests/demo.js
   const str = `
     Line 1
     Line 2
   `;

2. 通过 npm link 本地调试：

   cd prettier-plugin-custom
   npm link
   cd ../test-project
   npm link prettier-plugin-custom
   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：

   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. 快速反馈：通过本地测试与日志输出快速定位问题。

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