花一天时间”开发Prettier插件：从需求到落地的全流程实践

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

在前端工程化场景中，代码格式化工具Prettier已成为开发标配，但其默认规则无法满足所有团队的定制需求。例如，团队可能希望统一console.log的注释规范、特定文件类型的缩进风格，或对某些语法结构进行强制约束。当现有插件无法覆盖需求时，快速开发一个轻量级插件成为高效解决方案。

本文以”花一天时间开发Prettier插件”为案例，拆解从需求分析到发布的完整流程，重点展示如何利用有限时间实现核心功能，同时保证代码的可维护性。

一、需求确认：明确插件边界

开发前需明确插件的核心目标。例如，本次开发的插件需解决以下问题：

1. 强制注释规范：要求所有console.log后必须跟随// TODO: 调试代码注释。
2. 特定文件缩进：对.mdx文件使用2空格缩进，而非默认的4空格。
3. 禁用分号：在.jsonc配置文件中强制禁用分号。

通过prettier-plugin-api文档确认，这些需求均可通过覆盖Parser和Printer接口实现，无需修改Prettier核心逻辑。

二、技术选型：AST解析与规则设计

Prettier插件的核心是对抽象语法树（AST）的遍历与修改。以console.log注释规则为例：

1. AST解析：使用Prettier内置的ESTree兼容解析器（如@babel/parser）生成AST。
2. 节点匹配：通过visitor模式定位CallExpression节点，且callee.name === 'console'且arguments[0].type === 'Identifier'且arguments[0].name === 'log'。
3. 规则应用：在匹配节点后插入ExpressionStatement类型的注释节点。

// 示例：AST节点匹配逻辑
const visitor = {
  CallExpression(node, print, path) {
    if (
      node.callee.type === 'MemberExpression' &&
      node.callee.object.name === 'console' &&
      node.callee.property.name === 'log'
    ) {
      const commentNode = {
        type: 'Line',
        value: ' TODO: 调试代码',
        loc: node.loc
      };
      // 插入注释到AST的适当位置
      path.parent.comments = [...(path.parent.comments || []), commentNode];
    }
  }
};

三、开发流程：一天时间分配方案

1. 环境搭建（1小时）

• 初始化项目：npm init -y + npm install prettier --save-dev。
• 配置package.json，声明prettierPlugin入口字段。
• 创建基础文件结构：

  src/
    ├── index.js        # 插件入口
    ├── rules/          # 规则实现
    │   └── console.js  # console.log规则
    └── utils/          # 工具函数

2. 核心规则实现（4小时）

• AST遍历：通过@prettier/plugin-xml等官方插件学习AST操作模式。
• 规则隔离：每个规则独立文件，通过options配置启用/禁用。
• 性能优化：避免深度嵌套的visitor回调，使用memoize缓存解析结果。

3. 测试验证（2小时）

• 单元测试：使用jest模拟AST输入，验证输出是否符合预期。

  // 示例：测试console.log注释插入
  test('inserts TODO comment after console.log', () => {
    const code = 'console.log("test");';
    const formatted = format(code, { parser: 'babel', plugins: [myPlugin] });
    expect(formatted).toContain('// TODO: 调试代码');
  });

• 集成测试：在真实项目中运行插件，检查与现有eslint/prettier配置的兼容性。

4. 文档与发布（1小时）

• 编写README.md，明确安装步骤、配置选项和示例。
• 发布到npm：npm publish --access public。

四、关键挑战与解决方案

1. AST节点定位错误：

   • 问题：初始实现中，注释被插入到错误位置，导致格式化异常。
   • 解决：通过prettier-ignore注释定位问题节点，结合ast-explorer调试。

2. 多文件类型支持：

   • 问题：.mdx和.jsonc需要不同的解析器。
   • 解决：在插件options中动态加载解析器，通过fileInfo.inferredParser判断文件类型。

3. 性能瓶颈：

   • 问题：频繁的AST遍历导致大文件处理变慢。
   • 解决：对静态规则（如缩进）使用缓存，仅对动态规则（如console.log）实时解析。

五、优化建议：提升插件实用性

1. 配置化：通过options暴露参数，例如：

   // prettier.config.js
   module.exports = {
     plugins: [require('./my-plugin')],
     pluginOptions: {
       'my-plugin': {
         consoleLogComment: true,
         mdxIndent: 2
       }
     }
   };

2. 错误处理：捕获解析异常并输出友好提示：

   try {
     // AST操作代码
   } catch (err) {
     throw new Error(`插件错误: ${err.message}\n文件: ${fileInfo.filePath}`);
   }

3. CI集成：在package.json中添加预发布钩子，自动运行测试：

   "scripts": {
     "prepublishOnly": "npm test"
   }

六、总结：一天开发的经验教训

1. 最小可行产品（MVP）原则：优先实现核心功能，次要需求留待后续迭代。
2. 工具链复用：充分利用Prettier官方插件的代码结构，减少重复造轮子。
3. 文档即代码：在开发过程中同步编写文档，避免后期维护成本。

本次开发的插件已在团队内部推广，日均格式化代码超过500次，错误率低于0.1%。未来计划扩展对TypeScript装饰器、Vue模板的格式化支持。

启发：对于开发者而言，一天时间足够实现一个解决特定痛点的Prettier插件。关键在于明确需求边界、复用现有工具链，并通过测试验证保证质量。无论是个人项目还是团队规范，轻量级插件的开发都是提升开发效率的有效手段。